Google Maps - Trigger Search Box on button click

Question

I'm interested in implementing a Google Maps search button with a 'Submit'/'Go' button next to it (such as on http://maps.google.com). Everything works great if I press Enter in the search box, but I have no idea how to force/submit the search using the button.

Right now I have my code based on the example on: https://developers.google.com/maps/documentation/javascript/examples/places-searchbox . The most important part is that I'm using this for now:

HTML:

<div id="intro-search">
    <input id="search-box" />
    <button type="button">Submit!</button>
</div>

JS:

  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    // ... 
    // Show the results on the map
    // ...
  }

I have no idea how to trigger the same thing on a button click.

On another note, what is the difference between the SearchBox and the Autocomplete controls? Don't they do the same thing?

Answer 1

For the SearchBox, you have to use google map's trigger event on the input field like so

document.getElementById('my-button').onclick = function () {
    var input = document.getElementById('my-input');

    google.maps.event.trigger(input, 'focus', {});
    google.maps.event.trigger(input, 'keydown', { keyCode: 13 });
    google.maps.event.trigger(this, 'focus', {});

};

Answer 2

To build on Alex Beauchemin's and Scott Butler's answers, a non-Angular, non-jQuery option that works for me today (but may not in the future) is:

document.getElementById('my-button').onclick = function () {
  var input = document.getElementById('my-input');

  function noop() {}

  google.maps.event.trigger(input, 'focus', {});
  google.maps.event.trigger(input, 'keydown', {
    keyCode: 40, // arrow down
    stopPropagation: noop, // because these get called
    preventDefault: noop,
  });  
  google.maps.event.trigger(input, 'keydown', { keyCode: 13 });  // enter
  google.maps.event.trigger(this, 'focus', {});
};

Answer 3

Thought I'd share this in case someone finds this thread as I did. This seemed to work for me. This is a directive I made. So i on your input, you can use

<input id="txtLocation" places-auto-complete autocomplete-select-first-on-enter>

.

app.directive('autocompleteSelectFirstOnEnter', function() {
    //Requires jquery.simulate
    return function(scope, element, attrs) {
        element.bind("keydown", function(e) {
            if(e.which === 40){
                //if they already clicked down, we don't want to click down again
                element.triggered = true;
            }
            if(e.which === 13 && !element.triggered) {
                //They clicked enter, and haven't clicked down yet, and its not recursive
                element.triggered = true; //keep it from being recursive
                $("input#" + element[0].id).trigger('focus');
                $("input#" + element[0].id).simulate('keydown', { keyCode: 40 } ).simulate('keydown', { keyCode: 13 });
                element.triggered = false; //reset it
            }
        });
        element.bind("focus", function(e) {
            //reset it when they click in the field
            element.triggered = false;
        });
    };
});