Adding Autocomplete to Google Geocoder

Question

After my recent success (with help from here), I wanted to finish up my script. Google agreed that it was ok to put the geocoded map result on the second page so I want to strip out the map display from my geocoding script on the first page.

I have this working here: http://jsfiddle.net/njDvn/15/

BUT! The only thing it doesnt have is autosuggest (the google one, not a jqueryUI one). Here is some code which does demonstrate the google autosuggest: http://jsfiddle.net/Rr5PL/63/

Now, the code that seems to enable the autosuggest is this:

var autocomplete = new google.maps.places.Autocomplete(address,options);
var autocompleteOptions = {types: ['geocode']};

I added this to my original code and unfortunatly it doesnt work! This code can be seen here: http://jsfiddle.net/njDvn/16/

So my question is, based on my original code in my FIRST LINK, how do I enable the google autocomplete suggestions?

Any help or input you can give would be much appreciated! Thank you.

Answer 1

Here is an Autocomplete example, (US only), with Streetview included.

The key lines for creating it are:

var input = document.getElementById('searchTextField');
var options = {
    types: [],
    componentRestrictions: {country: 'us'}
};

var autocomplete = new google.maps.places.Autocomplete(input, options);

You also need to load the Places library:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

and the HTML:

<input id="searchTextField" type="text" size="50" value="">

By the way, you don't "add autocomplete to the geocoder".The Places Autocomplete class includes geocoding capabilities.

Answer 2

The JavaScript Autocomplete is part of the Google Places API, which is not loaded by default with the Google Maps API. You need to explicitly load the Places library when you include the Maps API by adding the parameter libraries=places:

<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

Answer 3

Have a look at this ready demo, that does exactly what is mentioned by Marcelo and ssorallen http://devfestmtm.appspot.com/demos/places/autocomplete_addressform.html