Google Maps Autocomplete auto-pick first suggestion and auto-submit search on page load?

Question

I am using Google Maps API v3 on my webpage and currently when the page loads, the search box gets pre-populated with a search term I choose. But I need it to actually then search maps using that term. I can't seem to find any way to do this using only google's API, so I thought perhaps I could simulate an 'enter' key press using this code:

var e = jQuery.Event("keydown");
e.which = 13;
$("#pac-input").trigger(e);

( #pac-input is the id of the <input> tag on the map)

However this doesn't seem to work.

So how can I force a search on the page load?

EDIT: This is the search box I'm talking about

Answer 1

The first thing you have to think about is not which event has to be triggered, it's more important to know when to trigger the events.

The predictions will be loaded asynchronously, so you must wait until they are available. There will not fire any event when the predictions are available, but you may observe the DOMNodeInserted -event of the body(the dropdown will be inserted there) and check if the nodes have the className 'pac-item' (it's the className of the items in the dropdown).

Then these events must be triggered on the input:

1. keydown with keyCode:40 (to move to the first prediction in the dropdown)
2. keydown with keyCode:13 (to select/activate the prediction)
3. focus (to activate the input)
4. keydown with keyCode:13 (to send the request)

Example:

  var input          =  document.getElementById('pac-input'),
      ac              = new google.maps.places.SearchBox(input),
      itemsloaded    =  google.maps.event
                          .addDomListener(document.body,
                                          'DOMNodeInserted',
                                          function(e){ 
                            if(e.target.className==='pac-item'){
                              //remove the listener
                              google.maps.event.removeListener(itemsloaded);
                              //trigger the events
                              google.maps.event.trigger( input, 'keydown', {keyCode:40})
                              google.maps.event.trigger( input, 'keydown', {keyCode:13})
                              google.maps.event.trigger( input, 'focus')
                              google.maps.event.trigger( input, 'keydown', {keyCode:13})
                            }
                          });

Note: In InternetExplorer the DOMNodeInserted -event is supported since V9, in older versions and other browsers that didn't support this event you may check in intervals if there are .pac-item present in the document.

Demo: http://jsfiddle.net/doktormolle/R8XdL/

Answer 2

if your use case allows, the easiest (and presumably intended by google) way of doing this is to store googles place_id and then query based on that using the new google.maps.places.PlacesService.getDetails method

var service = new google.maps.places.PlacesService(map);
service.getDetails({placeId: $('[name="google_places_id"]').val()}, function(place, status) { do code here });