Необходимо вручную запустить автозаполнение google places

Question

Я пытаюсь получить автозаполнение google-мест, работая с предопределенными данными, но пока не повезло.

Допустим, у меня есть этот текст «Alaskan Way South, Seattle, WA» в поле ввода предопределенного так:

<input id="ev-loc-input" size="60" value="Alaskan Way South, Seattle, WA" /> 

инициализирую Googles автозаполнения на нем, и я хотел бы, чтобы каким-то образом вызвать его так ищет этот адрес сразу, когда загружается страница.

Там, кажется, только один документально событие для его «place_changed»:

google.maps.event.addListener(events_autocomplete, 'place_changed', function(){.. 

Я не могу использовать это потому что срабатывает после того, поиск адресов уже сделано. Я не смог найти список доступных событий - может быть, кто-нибудь знает?

Любая помощь очень ценится!

Answer 1

Я, наконец, понял это! Я работаю над этим в течение 2 часов!

В любом случае вам нужно сосредоточиться на своем элементе ввода, но вы не можете сделать это сразу. Вам нужно отложить это.

Так, как это ...

setTimeout(func, 2000); 
function func() { 
    input.focus(); 
    selectFirstResult(); 
} 

Вот мой код, и она работает.

$(function() { 
    var input = document.getElementById('searchTextField'); 
    input.value = "{{ $user["location"] }}";//I'm using laravel 
    //You won't need the above line if you're already filling in the value of 
    //the input field - I'm going to get this working without the map as well 
    //I'll come back and post that later this weekend 
    var lat = -33.8688, 
    lng = 151.2195, 
    latlng = new google.maps.LatLng(lat, lng), 
    image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';  
    var mapOptions = {   
      center: new google.maps.LatLng(lat, lng),   
      zoom: 13,   
      mapTypeId: google.maps.MapTypeId.ROADMAP   
     }, 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions), 
     marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      icon: image 
     }); 
    var autocomplete = new google.maps.places.Autocomplete(input, { 
     types: ["geocode"] 
    });   
    autocomplete.bindTo('bounds', map); 
    var infowindow = new google.maps.InfoWindow(); 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     infowindow.close(); 
     var place = autocomplete.getPlace(); 
     if (place.geometry.viewport) { 
      map.fitBounds(place.geometry.viewport); 
     } else { 
      map.setCenter(place.geometry.location); 
      map.setZoom(17); 
     } 
     moveMarker(place.name, place.geometry.location); 
    }); 
    $("input").focusin(function() { 
     $(document).keypress(function (e) { 
      if (e.which == 13) { 
       selectFirstResult(); 
      } 
     }); 
    }); 
    $("input").focusout(function() { 
     if(!$(".pac-container").is(":focus") && !$(".pac-container").is(":visible")) 
      selectFirstResult(); 
    }); 
    function selectFirstResult() { 
     infowindow.close(); 
     $(".pac-container").hide(); 
     var firstResult = $(".pac-container .pac-item:first").text(); 
     var geocoder = new google.maps.Geocoder(); 
     geocoder.geocode({"address":firstResult }, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       var lat = results[0].geometry.location.lat(), 
       lng = results[0].geometry.location.lng(), 
       placeName = results[0].address_components[0].long_name, 
       latlng = new google.maps.LatLng(lat, lng); 
       moveMarker(placeName, latlng); 
       $("input").val(firstResult); 
      } 
     }); 
    } 
    function moveMarker(placeName, latlng){ 
     marker.setIcon(image); 
     marker.setPosition(latlng); 
     infowindow.setContent(placeName); 
     infowindow.open(map, marker); 
    } 
    setTimeout(func, 2000); 
    function func() { 
     input.focus(); 
     selectFirstResult(); 
    } 
});