Verwenden des Google Places-Suchfelds. Wie starte ich eine Suche durch einen Klick auf eine Schaltfläche?

Question

Entweder ich bin ein Idiot oder das war eine ungeheuerliche Aufsicht seitens des Google Maps-Teams.

Ich versuche, eine Ortssuche Anfrage auf einem Button-Klick-Ereignis in Verbindung mit dem Standard-Enter-Taste drücken -Ereignis (die derzeit gut funktioniert). Ich habe die Dokumentation über die Google Places search box durchgekämmt und keine sinnvolle Lösung gefunden.

Aus Gründen der Vertraulichkeit verwende ich das Beispiel aus der 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

Es ist einfacher als Sie denken. Mit dem gleichen Ausgangspunkt wie oben, https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Fügen Sie eine Schaltfläche auf der HTML-

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

in initialize() fügen Sie diese bis zum Ende, bevor }:

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

input ist bereits definiert. Alles, was Sie tun müssen, um die Suche nach Orten mit einer Schaltfläche auszulösen, ist - wirklich - focus das Eingabefeld für die searchBox. Sie müssen sich nicht mit searchBox verbinden oder "places_changed" oder etwas ähnliches auslösen, was Sie an anderer Stelle als Vorschläge sehen können - aber tatsächlich funktioniert es nicht.

Ich denke, Sie möchten mit einer Schaltfläche "aus irgendeinem Grund" auslösen, wie die Suche nach bestimmten bestimmten - also, warum ich die Suche mit "test" auslösen, einfach durch Eingabe der Eingabewert zu testen.

mit Arbeits Demo aktualisiert, basierend auf dem Google-Beispiel oben ->http://jsfiddle.net/7JTup/

Answer 2

Sie müssen zuerst Trigger focus auf dem Eingangselement, dann löst ein keydown Ereignis mit Code 13 (Enter-Taste).

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

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

JSFiddle demo