Can Google Maps/Places 'autocomplete' API be used via AJAX? Can Google Maps/Places 'autocomplete' API be used via AJAX? json json

Can Google Maps/Places 'autocomplete' API be used via AJAX?


Here is a code snippet for future readers who come across this scenario.

Using the "Places API" rather than the "Maps API", this code snippet fills in my form elements (including the input that is used to autocomplete) with returned data from Google.

/* Use google place API to auto complete the address field and populate form inputs */function addressAutoComplete(){    var planAddress = document.getElementById('mps_planaddress'),        planCity = document.getElementById('mps_plancity'),        planCounty = document.getElementById('mps_plancounty'),        planZip = document.getElementById('mps_planzip'),        planSub = document.getElementById('mps_plansubdivision'),        options = {            componentRestrictions: {country: 'us'}    };    autocomplete = new google.maps.places.Autocomplete(planAddress, options);    // After the user selects the address    google.maps.event.addListener(autocomplete, 'place_changed', function() {        planSub.focus();        var place = autocomplete.getPlace();        planAddress.value = place.name;        planCity.value = place.address_components[2].long_name;        planCounty.value = place.address_components[3].long_name;        planZip.value = place.address_components[6].long_name;    });}

Put a listener on the autocomplete for "place_changed" (they chose something from the list) and then fill in the inputs with the data returned.

All of this is listed on the Place Library Google page.


To make cross-domain AJAX calls like this, you should use JSONP with a callback. However, Google doesn't provide a JSONP interface for Autocomplete.

You might be able to use this Autocomplete class instead, though it doesn't seem possible to style the dropdown.

EDIT There may be a way to do this. Check out the geo-autocomplete jQuery Plugin. It has two demos. I haven't given this a proper look over yet however.


There are two ways to access the Google Maps Autocomplete API.

The first is via the google.maps.places.Autocomplete class. This provides all the necessary implementation in Javascript. However, you have complete control over styling. Use the pac-container and pac-item CSS classes.

The second is via the Autocomplete Web Service. This is not accessible via the browser because of same origin policy (there is no JSONP API). This is the most flexible way to access Autocomplete results.