I'm trying to hook up the Google Maps Places API to a search box. To test jquery autoplete, I got it working with this simple example:

function bindAutoplete() {
    var locationSearch = $("input#Location");

    locationSearch.autoplete({
        source: ["Massachusetts", "New Hampshire", "Boston"],
        minLength: 2
    });
}

I'm trying to figure out how to use the results of the google maps API as the source though, and I'm not sure what to do. I can get results from the API in my browser:

=(regions)&input=mas&key=xxx

These are the things I've tried:

locationSearch.autoplete({
    source: function (request, response) {
     $.getJSON("=(regions)&key=xxx&input=mass", {
            term: "mass"
        }, response),
    minLength: 2
});

but I got a "Access Control Allow Origin" security error. I tried doing jsonp like this:

locationSearch.autoplete({
    source: function (request, response) {
        $.ajax({
            url: "=(regions)&key=xxx&input=mass",
            type: "GET",
            dataType: 'jsonp',
            cache: false,
            success: function (response) {
                console.log(response);
            }
        });
    },
    minLength: 2
});

but I got an error trying to log the response, because the response is json but it's expecting jsonp. (Also, even if this did work, I wasn't sure how to set the output of the ajax call as the source)

The last thing I tried was this:

locationSearch.autoplete({
    source: new google.maps.places.Autoplete("mass"),
    minLength: 2
});

with these scripts on my page:

<script src=';key=xxx'></script>
<script>$(bindAutoplete)</script>

but when the page loads I get the error "google is not defined" as well as a bunch of errors saying "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience" and "Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened"

I'm trying to hook up the Google Maps Places API to a search box. To test jquery autoplete, I got it working with this simple example:

function bindAutoplete() {
    var locationSearch = $("input#Location");

    locationSearch.autoplete({
        source: ["Massachusetts", "New Hampshire", "Boston"],
        minLength: 2
    });
}

I'm trying to figure out how to use the results of the google maps API as the source though, and I'm not sure what to do. I can get results from the API in my browser:

https://maps.googleapis./maps/api/place/autoplete/xml?types=(regions)&input=mas&key=xxx

These are the things I've tried:

locationSearch.autoplete({
    source: function (request, response) {
     $.getJSON("https://maps.googleapis./maps/api/place/autoplete/json?types=(regions)&key=xxx&input=mass", {
            term: "mass"
        }, response),
    minLength: 2
});

but I got a "Access Control Allow Origin" security error. I tried doing jsonp like this:

locationSearch.autoplete({
    source: function (request, response) {
        $.ajax({
            url: "https://maps.googleapis./maps/api/place/autoplete/json?types=(regions)&key=xxx&input=mass",
            type: "GET",
            dataType: 'jsonp',
            cache: false,
            success: function (response) {
                console.log(response);
            }
        });
    },
    minLength: 2
});

but I got an error trying to log the response, because the response is json but it's expecting jsonp. (Also, even if this did work, I wasn't sure how to set the output of the ajax call as the source)

The last thing I tried was this:

locationSearch.autoplete({
    source: new google.maps.places.Autoplete("mass"),
    minLength: 2
});

with these scripts on my page:

<script src='http://maps.googleapis./maps/api/js?libraries=places&key=xxx'></script>
<script>$(bindAutoplete)</script>

but when the page loads I get the error "google is not defined" as well as a bunch of errors saying "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience" and "Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened"

• javascript
• jquery
• ajax
• google-maps
• autoplete

Share Improve this question Follow asked Mar 31, 2015 at 17:48 Erica Stockwell-AlpertErica Stockwell-Alpert 4,8731111 gold badges6767 silver badges139139 bronze badges 1

• Please take look at this to give you some idea. – bjiang Commented Apr 1, 2015 at 0:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

When you want to request these data via JS you must use the AutopleteService of the Places-library

Sample-implemetation:

function bindAutoplete() {

  var acService = new google.maps.places.AutopleteService(),
    placesService = new google.maps.places.PlacesService(document.createElement('div'));

  $("input#location").autoplete({
    source: function(req, resp) {

      acService.getPlacePredictions({
        input: req.term,
        types:['(regions)']
      }, function(places, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          var _places = [];
          for (var i = 0; i < places.length; ++i) {
            _places.push({
              id: places[i].place_id,
              value: places[i].description,
              label: places[i].description
            });
          }
          resp(_places);
        }
      });
    },
    select: function(e, o) {
      placesService.getDetails({
        placeId: o.item.id
      }, function(place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          alert(o.item.value +
            '\n is located at \n ' +
            place.geometry.location.toUrlValue());
        }
      });


    }
  });
}
$(window).load(bindAutoplete);

<link rel="stylesheet" href="http://code.jquery./ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery./jquery-1.10.2.js"></script>
<script src="http://code.jquery./ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://maps.googleapis./maps/api/js?v=3&libraries=places"></script>
<input id="location" />

Note: this service doesn't support the types-filter

However: the places-library also inludes an Autoplete