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

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

• javascript
• jquery
• google-maps
• google-maps-api-3

• Is it in a form? Perhaps $('form').submit(); If not, is there a button? Maybe $('#myButton').click(); Do this after the search box is pre-populated. – StaticVoid Commented Jun 27, 2014 at 12:47
• pac-input seems to be related to the Places Autoplete. Right? – MrUpsidown Commented Jun 27, 2014 at 13:12
• Yeah it's the auto-plete search box. – Fergmux Commented Jun 27, 2014 at 13:17
• Does this answer your question? Google Maps API: How do you ensure that the Google Maps Autoplete text is an actual address before submitting? – Alex R Commented Oct 11, 2020 at 22:38

2 Answers 2

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/doktormolle/R8XdL/

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 });