Monday 9 January 2017

How to integrate Google Places Search API in website?

How to integrate Google Places Search API in website?

Get the Google API Key
  1. Login to https://console.developers.google.com
  2. Get the API Keys.
  3. Enable "Google Places API Web Service" from Google Google Map API



HTML Code

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;libraries=places&amp;key=HERE_YOUR_KEYS"></script>
<div class="search-Form">
<input id="search" name="q" type="text" value="" /> <input id="submit" type="submit" value="go" />
</div>



JavaScript Code

    var lat
    var lon
    function initialize() {
        var input = document.getElementById('search');
        var autocomplete = new google.maps.places.Autocomplete(input);

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            lat = place.geometry.location.lat()
            lon = place.geometry.location.lng()
        });

    }

    google.maps.event.addDomListener(window, 'load', initialize);

View Demo