I need to render the results of google.maps.places.Autoplete in a custom way, instead of the default drop down menu.

Is there any way I can use the Google Maps API V3 to retrieve the same info of Autoplete, but in an Array per request instead of the API do the rendering for me?

PS1:

I wondered I could use the google.maps.places.PlaceSearchRequest. But, differently from Autoplete, it restricts my location. It cannot be used to search worldwide.

• .html
• .html

PS2:

The default way I am (currently) using Autoplete restricts me. I must pass an input element, and the API renders the dropdown, which I do NOT want.

var autoplete, input_el, place_changed_trigger_func;
input_el = <an input element>;
place_changed_trigger_func = function() {
  var place = autoplete.getPlace();
  // do whatever you want with place
};
autoplete = new google.maps.places.Autoplete(input_el, {types: ["geocode"]});
google.maps.event.addListener(autoplete, 'place_changed', place_changed_trigger_func);

I need to render the results of google.maps.places.Autoplete in a custom way, instead of the default drop down menu.

Is there any way I can use the Google Maps API V3 to retrieve the same info of Autoplete, but in an Array per request instead of the API do the rendering for me?

PS1:

I wondered I could use the google.maps.places.PlaceSearchRequest. But, differently from Autoplete, it restricts my location. It cannot be used to search worldwide.

• http://code.google./apis/maps/documentation/javascript/reference.html
• http://code.google./apis/maps/documentation/places/index.html

PS2:

The default way I am (currently) using Autoplete restricts me. I must pass an input element, and the API renders the dropdown, which I do NOT want.

var autoplete, input_el, place_changed_trigger_func;
input_el = <an input element>;
place_changed_trigger_func = function() {
  var place = autoplete.getPlace();
  // do whatever you want with place
};
autoplete = new google.maps.places.Autoplete(input_el, {types: ["geocode"]});
google.maps.event.addListener(autoplete, 'place_changed', place_changed_trigger_func);

• javascript
• google-maps
• google-maps-api-3
• autoplete

Share Improve this question Follow edited Apr 12, 2018 at 6:04 ekad 14.6k2626 gold badges4646 silver badges4848 bronze badges asked Feb 14, 2012 at 12:07 Rafael XavierRafael Xavier 2,8992828 silver badges3535 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I believe this is the link that @jegnag meant to include.

https://developers.google./maps/documentation/javascript/places-autoplete#place_autoplete_service

You can access the array of results (places in addition to suggested search terms), you can even add your own custom results to this array, and display everything however you choose.

Have you explored the Autoplete function of the Places API webservice? That appears to be what you're looking for.

Try the AutopleteService class:

"You can use the AutopleteService class to retrieve the query or place prediction data returned from the Autoplete service. Calling either the getPlacePredictions() or getQueryPredictions() methods will return an array of five prediction objects of the form:"