Google 지역 정보 자동 완성을 수동으로 시작해야합니다.

Question

미리 정의 된 데이터로 작업하는 Google 지역 정보 자동 완성을 얻으려고하고 있지만 지금까지는 아무런 운이 없었습니다.

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

내가 거기에 구글의 자동 완성을 초기화하고 어떻게 든 그렇게 그것을 실행하는 데 싶습니다

내가이 같은 미리 정의 된 입력 필드에서이 텍스트 "알래스카 웨이 사우스 시애틀, WA"가 말할 수 있습니다 페이지가로드 될 때 바로이 주소를 찾습니다.

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