Korzystanie z pola wyszukiwania w Miejscach Google. Jak zainicjować wyszukiwanie, klikając przycisk?

Question

Albo jestem idiotą, albo był to niesamowity niedopatrzenie ze strony zespołu Map Google.

Próbuję wywołać żądanie wyszukiwania miejsc w zdarzeniu kliknięcia przycisku w połączeniu ze standardowym zdarzeniem klawisza Enter (które obecnie działa poprawnie). Przeszedłem przez dokumentację związaną z Google Places search box i nie znalazłem żadnego rozwiązania.

Ze względu na poufność używam przykładu z wersji demonstracyjnej.

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

To jest bardziej proste niż myślisz. Z tego samego punktu wyjścia, jak powyżej, https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Dodaj przycisk do HTML

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

w initialize() dodać to do samego końca, zanim }:

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

input jest już zdefiniowany. Wszystko, co musisz zrobić, aby wywołać wyszukiwanie miejsc za pomocą przycisku, jest - naprawdę - na focus polu wprowadzania danych związanym z polem wyszukiwania. Nie musisz mieszać się z searchBox lub wywoływać "places_changed" lub czegoś podobnego, co można zobaczyć gdzie indziej jako sugestie - ale w rzeczywistości nie działa.

Chyba chcesz wywołać za pomocą przycisku "z jakiegoś powodu", na przykład po wyszukaniu jakiegoś określonego predykcji - to dlatego wywołuję wyszukiwanie za pomocą "testu", po prostu ustawiając wartość wejściową do przetestowania.

Aktualizacja z dema pracy, na podstawie powyższego przykładu google ->http://jsfiddle.net/7JTup/

Answer 2

trzeba najpierw spustu focus na elemencie wejściowym, a następnie wywołać keydown zdarzenie z kodem 13 (enter).

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

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

JSFiddle demo