Google Places Autocomplete textbox using Google maps API

In this article, we will set Google places in textbox using Google maps API, using this article we can get the details of address, latitude, and Longitude.
Source Code:-

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> Google Places Autocomplete textbox using Google maps API
</title>
   
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', function () {
            var places = new google.maps.places.Autocomplete(document.getElementById('txtplaces'));
            google.maps.event.addListener(places, 'place_changed', function () {
                var place = places.getPlace();
                var address = place.formatted_address;
                var latitude = place.geometry.location.lat();

                var longitude = place.geometry.location.lng();
                var msg = "Address: " + address;
                msg += "\nLatitude: " + latitude;
                msg += "\nLongitude: " + longitude;
                alert(msg);
            });
        });
    </script>
    <span>Location:</span>
    <input type="text" id="txtplaces"  placeholder="Enter your places" />
</body>
</html>

Output:-






Google Places Autocomplete textbox using Google maps API Google Places Autocomplete textbox using Google maps API Reviewed by NEERAJ SRIVASTAVA on 6:37:00 PM Rating: 5

No comments:

Powered by Blogger.