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);
    }
  }

Solution 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

Solution 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/

Comments

[jjhenry]

Thanks a ton! Sorry I am just seeing this. I will try this and let you know once I get in the office.

[Cosmin SD]

This will trigger the search results dropdown to populate with the suggestions, right? But is there any way to also simulate the behaviour obtained when hitting 'Enter'? As in show the results on the map for the input that is in the input box when hitting the button?

[davidkonrad]

@CosminSD, dont quite understand? The google places input are responding on <enter> by default. If you want to populate from another source by hitting enter, you could easily replace the button with an input and replace onclick with an onkeyup-event

[davidkonrad]

@jjhenry, glad to help. You could upvote or accept the answer :-)

[Cosmin SD]

I'm not interested in populating the input, but in performing a search (I think this is also what OP asked). The idea would be to have an input and a button next to it and, when the button is clicked, get the same result as when hitting enter (i.e. make a search and show results on the map). For example, what you can see on maps.google.com: an input and a search button and the search is done when hitting Enter or when clicking the button.

[davidkonrad]

@gstackoverflow, so? Set up a fiddle or create a new question. The answer is not accpeted, not even upvoted, so I dont think you should blame me.