Post
Ask Question

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.
  1. <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.

1.jpeg

Or you can copy the following source code:

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <table>  
  5.             <tr>  
  6.                 <td>  
  7.                     Country :  
  8.                 </td>  
  9.                 <td>  
  10.                     <asp:TextBox ID="txtCon" runat="server"></asp:TextBox>  
  11.                 </td>  
  12.             </tr>  
  13.             <tr>  
  14.                 <td>  
  15.                     City :  
  16.                 </td>  
  17.                 <td>  
  18.                     <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>  
  19.                 </td>  
  20.             </tr>  
  21.             <tr>  
  22.                 <td colspan="2" align="center">  
  23.                     <input id="btn" type="button" value="Search Coordinates" />  
  24.                 </td>  
  25.             </tr>  
  26.             <tr>  
  27.                 <td colspan="2" align="center">  
  28.                     <asp:Label ID="lblresult" runat="server" ForeColor="Red"></asp:Label>  
  29.                 </td>  
  30.             </tr>  
  31.         </table>  
  32.     </div>  
  33.     </form>  
  34. </body>
Now add the following jQuery and Google map references in the Head section:
  1. <script src="jquery-1.9.1.js" type="text/javascript"></script>  
  2. <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.
  1. <script type="text/javascript">  
  2.         $(document).ready(function () {  
  3.             $("#btn").click(function () {  
  4.                 var geocoder = new google.maps.Geocoder();  
  5.                 var con = document.getElementById('txtCon').value;  
  6.                 var city = document.getElementById('txtCity').value;  
  7.                 var res = document.getElementById('lblresult');  
  8.                 var com = city + "," + con;  
  9.                 geocoder.geocode({ 'address': com }, function (results, status) {  
  10.                     if (status == google.maps.GeocoderStatus.OK) {  
  11.                         res.innerHTML = "Latitude : " + results[0].geometry.location.lat() + "<br/>Longitude :" +  
  12. results[0].geometry.location.lng();  
  13.                     } else {  
  14.                         res.innerHTML = "Wrong Details: " + status;  
  15.                     }  
  16.                 });  
  17.             });  
  18.         });  
  19. </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.
 
2.jpeg

Thank you. 


Similar Articles