手動でGoogleプレイスオートコンプリートを開始する必要があります

Question

Googleプレースオートコンプリートを事前定義済みのデータで処理しようとしています。

私はこのような事前定義された入力フィールドに、このテキスト「アラスカ道南、シアトル、WA」を持っているとしましょう：

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

私はそれをグーグルのオートコンプリートを初期化し、私は何とかそれので、それをトリガしたいと思いますページが読み込まれたときにこのアドレスを探します。

それ「place_changed」のための唯一の文書化イベントがあるように思える：

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

アドレス検索がすでに行われた後、それがトリガーます原因私はこの1つを使用するカント。私は利用可能なイベントのリストを見つけることができませんでした - 多分誰も知っていますか？

ご迷惑をおかけして申し訳ありません。

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