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.