Javascript Угловой Google Map автозаполнение Api не работает

Question

Я пытаюсь себе карту API Google в угловом со следующим кодом: HTML:

<div ng-value="initMap()"> 
      <div> 
      <input id="pac-input" type="text" 
        value="{{event_foundaddress}}" ng-model="event_foundaddress"/> <!-- placeholder breaks EVERYTHING!!!! No placeholder!!!--> 
      </div> 

      <div id="map" style="width: 300px; height: 400px" > </div> 

      <div > Found address: {{event_foundaddress}} </div> 
     </div> 

JS/угловой

$scope.initMap = function() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: $scope.lat, lng: $scope.long},//london coords 
    zoom: 13 
    }); 
    $scope.foundaddress = $localStorage.event.address 
    var input = /** @type {!HTMLInputElement} */ 
     (document.getElementById('pac-input')); 
    //$scope.event_foundaddress 
    //alert('in:'+input) 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
    //var types = document.getElementById('type-selector'); 
    //map.controls[google.maps.ControlPosition.TOP_LEFT].push(types); 
    //alert(input) 
    var autocomplete = new google.maps.places.Autocomplete(input,{types: ['geocode']}); 
    autocomplete.bindTo('bounds', map); 


    var infowindow = new google.maps.InfoWindow(); 
    var marker = new google.maps.Marker({ 
    map: map, 
    anchorPoint: new google.maps.Point(0, -29) 
    }); 


    autocomplete.addListener('place_changed', function() {... 


    } 

Я получил ошибка InvalidValueError: не экземпляр HTMLInputElement из var autocomplete = new google.maps.places.Autocomplete (input, {types: ['geocode']}) ;. Очевидно, что вход не является элементом HTMLInputElement. Вы знаете, как пройти через HTMLInputElement из dom в угловом?

EDIT: Оставить предупреждение ('input') показывает, что входная переменная всегда равна null ... Не знаете, почему?

Answer 1

У меня была такая же проблема, вы должны позвонить initMap() по адресу ng-focus элемента ввода. Тогда это сработает.

Но проблема даже после обновления моего кода, модель не была обновлена. Затем я перешел в угловую-google-места - библиотеку автозаполнения.

И эта библиотека потрясающая. Проверьте https://github.com/kuhnza/angular-google-places-autocomplete

Edit: Ответ Обновлено Вы просто должны написать, как показано ниже, и как только вы выбираете место foundaddress будет иметь место Google объект, из которого вы должны извлечь formatted_address.

<input ng-model="foundaddress" type="text" id="pac-input" g-places-autocomplete></input>