Using Google Places Search Box. How to initiate a search by clicking a button?

Question

Either I am an idiot or this was an egregious oversight on the part of the Google Maps team.

I am attempting to trigger a places search request on a button click event in conjunction with the standard enter keypress event (which is currently working fine). I have combed through the documentation related to the Google Places search box and have found no sutiable solution.

Because of confidentiality reasons I am using the example from the demo.

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-33.8902, 151.1759),
    new google.maps.LatLng(-33.8474, 151.2631));
  map.fitBounds(defaultBounds);

  var input = /** @type {HTMLInputElement} */(document.getElementById('target'));
  var searchBox = new google.maps.places.SearchBox(input);
  var markers = [];


  document.getElementById('button').addEventListener('click', function() {
    var places = searchBox.getPlaces();

    // places -> undefined

    // The assumption is that I could just call getPlaces on searchBox
    // but get nothing in 'places'
    // Beyond that it doesn't even make a call to the Google Places API

    // Currently the only way to perform the search is via pressing enter
    // which isn't terribly obvious for the user.

  }, false)


  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    markers = [];
    var bounds = new google.maps.LatLngBounds()

    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      });

      markers.push(marker);

      bounds.extend(place.geometry.location);
    }
  }

Answer 1

You need to first trigger focus on the input element, then trigger a keydown event with code 13 (enter key).

var input = document.getElementById('target');

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

JSFiddle demo

Answer 2

It is more simple than you think. With same starting point as above, https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Add a button to the HTML

<button id="button">click</button>

in initialize() add this to the very end, before } :

  var button = document.getElementById('button'); 
  button.onclick = function() {
    input.value='test';
    input.focus(); 
  }

input is already defined. All you have to do, to trigger the places search by a button is - really - to focus the input box associated with the searchBox. You dont have to mingle with searchBox or trigger "places_changed" or anything like that, which you can see elsewhere as suggestions - but in fact is not working.

I guess you want to trigger by a button "for some reason", like searching for some specific predifined - thats why I trigger the search with "test", simply by setting the input value to test.

Updated with working demo, based on the google example above -> http://jsfiddle.net/7JTup/