title: Using Google Places Search Box. How to initiate a search by clicking a button?
body: <p>Either I am an idiot or this was an egregious oversight on the part of the Google Maps team.</p>
  
  <p>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 <a href="https://developers.google.com/maps/documentation/javascript/examples/places-searchbox">Google Places search box</a> and have found no sutiable solution.</p>
  
  <p>Because of confidentiality reasons I am using the example from the demo. </p>
  
  <pre><code>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 -&gt; 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);
      }
    }
  </code></pre>