Google Places Autocomplete JavaScript Library is a great tool which suggests locations and points of interest through an AJAX style drop down meny based on user input. I’ve used this for a couple of recent development projects such as www.twitjobseek.com.
Places Autocomplete library hooks up to Google Maps JavaScript API V3 and does not require the use of an API Key.
This post runs through the steps involved to setup a basic autocomplete lookup functionality and how the returned values for longitude and latitude might then used to update a Google Map.
You can check out a Places Autocomplete demo, which includes a breakdown of the main parameters returned (such as the longitude and latitude).
First things first, lets load the places library by putting the below line somewhere in the head tag (or in the footer if you prefer). This is in fact the same code required for standard Google Maps V3 functionality but with the added ‘places’ library
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
Then we can add some simple HTML for a locations input box, submit button and form, along with a div that will be used for our map. Using javascript:void(0); prevents the form from being submitted (which is not needed for the purposes of this demo).
<form action="javascript:void(0);" name="form1" id="form1"> <input type="text" name="location" class="textbox" id="location" value="" /> <input type="submit" value="Submit" class="submit" /> </form> <div id="map-canvas"></div>
Add the below JavaScript just before the closing body tag. This is so that we can access any of the HTML elements straight away without having to put everything within a ‘ready’ or ‘load’ handler.
The script does the following:
<script type="text/javascript"> //Autocomplete variables var input = document.getElementById('location'); var searchform = document.getElementById('form1'); var place; var autocomplete = new google.maps.places.Autocomplete(input); //Google Map variables var map; var marker; //Add listener to detect autocomplete selection google.maps.event.addListener(autocomplete, 'place_changed', function () { place = autocomplete.getPlace(); //console.log(place); }); //Add listener to search searchform.addEventListener("submit", function() { var newlatlong = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng()); map.setCenter(newlatlong); marker.setPosition(newlatlong); map.setZoom(12); }); //Reset the inpout box on click input.addEventListener('click', function(){ input.value = ""; }); function initialize() { var myLatlng = new google.maps.LatLng(51.517503,-0.133896); var mapOptions = { zoom: 1, center: myLatlng } map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Main map' }); } google.maps.event.addDomListener(window, 'load', initialize); </script>
Hooray, now we have a basic and unstyled Google Places Autocomplete drop down hooking up to a regular Google Map. 🙂
To elaborate this code further; first we declare our variables; the input field, form and a variable ‘place’ to hold our returned values from Places Autocomplete. An ‘autocomplete’ variable is also created to hold the API values of the returned location.
An event listener is setup as a Google Maps event to detect when a new Place is selected, based on the input field. console.log will let you see the output of this object in your browser’s JavaScript console, allowing you to drill down to see each parameter within the object. To access the longitude and latitude values for example, we can use place.geometry.location.lat() and place.geometry.location.lng().
A listener is also added to the form to detect when the form is submitted. This then updates the marker and center of the Google Map based on the selected location’s longitude and latitude values.
The Google Map itself is setup on load through the initialize() function, using the longitude and latitude of the center of London to setup the map and marker center. Zoom is 1 so we can see everything.
Hi Tom, Thanks for the tutorial..
I try to implement the source code, but whi i always get Uncaught TypeError: Cannot call method ‘addEventListener’ of null? Do you know?
Hey Tom Great tut!
I love little spitting twitter bird too!
I have a quick question, say i use Google autocomplete to bind to a map from an input field, how can i grab the autocomplete data that was place in the input field after the selected it from the drop. I have been trying to do that for a mad minute now, lol. I want to basically take the data from the input and copy it to another field.
Hitting ENTER while on suggested search result will submit the form before the google response with place object will return.
Any ideas on how to fix that?
Hi!!
When I click the submit button its not showing google map?why
How can I implement this on a wordpress page?
Thanks!
Hey Tom, very handy thank you. What would tie nicely into this is how to get the browser to detect the ‘myLatLong’ coordinates automatically?
I want to fill out a form with the results you display at the end of your input but without having to hit submit. Where would I get the information as a result to do this?