Using Google Places Autocomplete with Google Maps

Must Read : Using Google Places Autocomplete with Google Maps

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.

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

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

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.

(Visited 55 times, 1 visits today)

Leave a Comment.