Google Maps - Trigger Search Box on button click

google-maps, google-maps-api-3, javascript

Solution

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', {});

};

Problem

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?

Original source