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:
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Map the Address</h1>
<form method="post">
<fieldset>
<div>
<label for="SearchAddress">Address You Looking for:</label>
<input style="width: 300px" type="text" name="SearchAddress" value="@Request["SearchAddress"]"/>
<input type="submit" value="Map It!" />
</div>
</fieldset>
</form>
@if(IsPost) {
@Maps.GetGoogleHtml(Request.Form["SearchAddress"],
width: "400",
height: "400")
}
</body>
</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 foa an address using Google maps. Thanks for reading.