Post
Ask Question

View Address Using Maps in ASP.Net Web Pages 2

Introduction

In this article, we'll create a page to view or search for a location on the maps using WebMatrix in an ASP.NET Web Pages 2. There are various services that provide mapping, like Bing, Google, MapQuest, and Yahoo.

In that context, you'll learn to generate the map based on the given address and to register as a Bing Maps developer with a Microsoft Account. We need to use the maps helper to generate the Map. You'll also need to install the ASP.NET Web helpers library from the NuGet Package. So, let's proceed with the following:

  • Registering as Bing Developer
  • Creating Map Page
  • Launching the Page

Registering as a Bing Developer

At first you must have a free account on the Bing Maps Developer and get the key. Proceed with the following procedure.

Step 1: Register as a developer in Bing Maps.

Registering New User in Bing

Step 2: You need to login with your Microsoft account.

SignIn microsoft

Step 3: Now click on "Create or view keys".

Create Key on Bing Map

Step 4: Just record the key that Bing creates.

Creating Map Page

Step 1: Create a new CSHTML file as named MapPage in the website.

Step 2: Create a new folder named Scripts and paste it into the jQuery file. You can download the file.

Step 3: Now enter the following code into it:

  1. <html lang="en">  
  2.     <head>  
  3.         <meta charset="utf-8" />  
  4.         <title></title>  
  5.         <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>  
  6.     </head>  
  7.     <body>  
  8.         <h1>Map the Address</h1>  
  9.     <form method="post">  
  10.         <fieldset>  
  11.           <div>  
  12.             <label for="SearchAddress">Address You Looking for:</label>  
  13.             <input style="width: 300px" type="text" name="SearchAddress" value="@Request["SearchAddress"]"/>  
  14.             <input type="submit" value="Map It!" />  
  15.            </div>  
  16.         </fieldset>  
  17.     </form>  
  18.     @if(IsPost) {  
  19.         @Maps.GetGoogleHtml(Request.Form["SearchAddress"],  
  20.             width: "400",  
  21.             height: "400")  
  22.     }  
  23.     </body>  
  24. </html> 

In the code above the SearchAddress is passed as a string in the @Maps.GetGoogleHtml method.

Step 4: Launch the webpage in the browser. The page displays a map that is based upon the Google maps.

Enter the address you want to search:

Search Address to Map

Now click on "Map it".

Address Map

Summary

This article describes how to search for an address using Google maps. Thanks for reading.


Similar Articles