Get Latitude Longitude using Google Map Api

Use google map API to get Latitude Longitude using the autocomplete address. The example displays the address, latitude and longitude location of the user entered place.

First get the api key and add the key in the below url which is used in the scripts.

https://maps.googleapis.com/maps/api/js?key=YOUR API Key&libraries=places

Add below code in the aspx page of the empty web application.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Google Places Autocomplete textbox using google maps api</title>
</head>
<body>
    <h2>Google Places Autocomplete textbox using google maps api</h2>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR API Key&libraries=places"></script>
    <script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', initialize);
        function initialize() {
            var autocomplete = new google.maps.places.Autocomplete(document.getElementById('txtAutocomplete'));
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                // Get the place details from the autocomplete object.
                var place = autocomplete.getPlace();
                var location = "<b>Address</b>: " + place.formatted_address + "<br/>";
                location += "<b>Latitude</b>: " + place.geometry.location.lat() + "<br/>";
                location += "<b>Longitude</b>: " + place.geometry.location.lng();
                document.getElementById('lblResult').innerHTML = location
            });
        }
    </script>
    <span>Location:</span>
    <input type="text" id="txtAutocomplete" style="width: 300px" placeholder="Enter your address" /><br />
    <br />
    <label id="lblResult" />
</body>
</html>

 Output

Demo Code

Download Demo