How to Get Latitude and Longitude of a Place Using Google Map API

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 TextBoxes, 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.

5 Comments

Join the conversation! Your thoughts help the community grow.

Jithin Sunny8y ago
This answer is now out-of-date. You are now required to have an API key to use google maps.
Nicola Hanna11y ago
Why does the label display and then disappear again? and how do I stop it doing that?
Vithal Wadje13y ago
good,keep it up
- Sanjeeb Lenka13y ago
  thank you.....
Preeti Agrawalla13y ago
nice .....