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

Sanjeeb Lenka
11y
31.6k
0
0

Article

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;
                    }
                });
            });
        });