Using Google Places Autocomplete with Google Maps

05 February, 2014 by Tom Elliott

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

The HTML

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&amp;sensor=false&amp;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>

The JavaScript

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:

1. Initiate the autocomplete method and a declare some variables
2. Setup a Google Map and drop a basic marker on London
3. Find the longitude and latitude values of the selected place on form submit
4. Update the Google map marker and map center using the new longitude and latitude.

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

---

---