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

问题:

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

回答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

回答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/

文章来源: Using Google Places Search Box. How to initiate a search by clicking a button?