2

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 enter image description here

Alex R
  • 11,364
  • 15
  • 100
  • 180
Fergmux
  • 932
  • 9
  • 13
  • 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 Jun 27 '14 at 12:47
  • `pac-input` seems to be related to the Places Autocomplete. Right? – MrUpsidown Jun 27 '14 at 13:12
  • Yeah it's the auto-complete search box. – Fergmux Jun 27 '14 at 13:17
  • Does this answer your question? [Google Maps API: How do you ensure that the Google Maps Autocomplete text is an actual address before submitting?](https://stackoverflow.com/questions/18454677/google-maps-api-how-do-you-ensure-that-the-google-maps-autocomplete-text-is-an) – Alex R Oct 11 '20 at 22:38

2 Answers2

8

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/

Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • Thanks very much, great answer, very well explained, worked perfectly. – Fergmux Jun 30 '14 at 14:56
  • Thanks very much! Just a note to any other readers, I had to add a focus event as the first event in the list of google.maps.event's (e.g. add `google.maps.event.trigger( input, 'focus')` before the `google.maps.event.trigger( input, 'keydown', {keyCode:40})`) – Adam Jun 08 '16 at 19:26
0

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 });
Simon Stevens
  • 424
  • 1
  • 5
  • 13