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

This article describes how to get the latitude and longitude of a location using the Google Map API in ASP.Net.

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.

1.jpeg

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.
 
2.jpeg

Thank you.