Introduction
This article describes how to Search a Place in Google Map using the Google Map API in ASP.Net. Here I will describe how to
communicate with the Google Map API.
Description
To use the Google Map API you need to add the following link to the Head section.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
And we need jquery file to pass the values to google map Api
Here i used jquery-1.9.1.js.
Design Now add two Text Boxes,one Button and one Label.
And div to show the map in page.
Design your screen as in the following screen.
![]()
Or you can copy the following source code:
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td
colspan="2">
Search Place In Google Map
</td>
</tr>
<tr>
<td>
Country :
</td>
<td>
<asp:TextBox ID="txtCon" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
City :
</td>
<td>
<asp:TextBox ID="txtCity"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td
colspan="2"
align="center">
<input
id="btn"
type="button"
value="Search
Place" />
</td>
</tr>
</table>
</div>
<div id="map-canvas"
style="height: 500px; width: 500px">
</div>
</form>
</body>
Now add the following jQuery and Google map link in the Head section:
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
Now write the following JavaScript code in the Head section .
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function () {
var geocoder = new
google.maps.Geocoder();
var con = document.getElementById('txtCon').value;
var city = document.getElementById('txtCity').value;
var com = city + "," + con;
geocoder.geocode({ 'address': com }, function (results, status) {
if (status ==
google.maps.GeocoderStatus.OK) {
var x = results[0].geometry.location.lat();
var y = results[0].geometry.location.lng();
var latlng = new
google.maps.LatLng(x, y);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId:
google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var
marker = new google.maps.Marker({
position: new google.maps.LatLng(x, y),
map: map,
title: com
});
var infowindow = new
google.maps.InfoWindow({
content: com
});
infowindow.open(map,
marker);
google.maps.event.addDomListener(window, 'load');
} else
{
res.innerHTML = "Enter correct Details: " + status;
}
});
});
});
</script>
In the above code check these lines:
<div id="map-canvas"
style="height: 500px; width: 500px">
</div>
The map to display on the page , we must need a place for it so we used this div to display the map.
var x = results[0].geometry.location.lat();//latitude
var y = results[0].geometry.location.lng();//Longitude
In this line its getting the latitude and longitude value of the place you want to search. var latlng = new
google.maps.LatLng(x, y);
In this we are passing the latitude and longitude of the place to gmap.
mapTypeId:
google.maps.MapTypeId.ROADMAP
In The above i used ROADMAP.
The following map types are supported:
ROADMAP displays the normal, default 2D tiles of Google Maps.
SATELLITE displays photographic tiles.
HYBRID displays a mix of photographic tiles and a tile layer for prominent features (roads, city names).
TERRAIN displays physical relief tiles for displaying elevation and water features (mountains, rivers, etc.).
Now build your application. Enter a City and Country in the text boxes then press the button.
Now It will show that place in the Google Map. ![]()