How to Search a Place in Map using Google Map API

Preeti Agrawalla
3y
48.3k
0
3

Article

Introduction

This article describes how to Search for 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 TextBoxes, one Button, and one Label.

And div to show the map on the 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.