Introduction
This
article describes how to get the latitude and longitude of a location
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>
Design Now add two Text Boxes,one Button and one Label.
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>
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 Coordinates" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Label ID="lblresult" runat="server" ForeColor="Red"></asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>Now add the following jQuery and Google map references 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 that will communicate with the Google map API.
<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 res = document.getElementById('lblresult');
var com = city + "," + con;
geocoder.geocode({ 'address': com }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
res.innerHTML = "Latitude : " + results[0].geometry.location.lat() + "<br/>Longitude :" +
results[0].geometry.location.lng();
} else {
res.innerHTML = "Wrong Details: " + status;
}
});
});
});
</script>
Now build your application. Enter a City and Country in the respective text boxes then press the button.
It will show the latitude and longitude of that place in the label.
Thank you.
Posts
0 comments:
Post a Comment