Korzystanie z pola wyszukiwania Miejsc Google. Jak rozpocząć wyszukiwanie, klikając przycisk?
Albo jestem idiotą, albo było to skandaliczne przeoczenie ze strony zespołu Google Maps.
Próbuję wywołać żądanie wyszukiwania miejsc w zdarzeniu kliknięcia przycisku w połączeniu ze standardowym zdarzeniem naciśnięcia klawisza Enter (które obecnie działa poprawnie). Przeszukałem dokumentację związaną zPole wyszukiwania Miejsc Google i nie znalazłem żadnego rozsądnego rozwiązania.
Ze względu na poufność używam przykładu z demonstracji.
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);
}
}