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

Question

I'm trying to use the Google Places autocomplete API to pre-fill a form on a web application with Establishment data to ease data-entry. The API is pretty straightforward, but it doesn't seem to want to accept the XHR.

$.getJSON("https://maps.googleapis.com/maps/api/place/autocomplete/json",{
  input: input.term,
  sensor: false,
  types: 'establishment',
  location: '40.01496,-105.27029',
  radius: 10000,
  key: Config.googleplaceskey
},function(places_response){
    //Some other code.
});

I get this in the console:

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/autocomplete/json?input=At&sensor=false&types=establishment&location=40.01496%2C-105.27029&radius=10000&key=AIzaSyDKzUgcLklQE_U5494vHq_SzrFakNHugaQ. Origin http://localhost:8086 is not allowed by Access-Control-Allow-Origin.

Is this somehow not what the API is meant for? Anyone know a workaround, or some kind of extra parameter(s) I could send to make it work?

Update:

Here's the link to the API documentation for this call. The parent docs actually even have JavaScript JSON-parsing examples. Really confusing why this would be shut down on the server side.

http://code.google.com/apis/maps/documentation/places/autocomplete.html

Answer 1

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.