Subscribe For Free Updates!

We'll not spam mate! We promise.

Tuesday 29 October 2013

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

Socializer Widget By Blogger Yard
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 comments:

Post a Comment