Javascript Angular Google Map automatische Vervollständigung Api nicht funktioniert

Question

Ich versuche, die google map api in Winkel mit dem folgenden Code zu se: 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/Winkel

$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() {... 


    } 

Ich habe ein Fehler InvalidValueError: keine Instanz von HTMLInputElement aus der Var-Autovervollständigung = new google.maps.places.Autocomplete (Eingabe, {types: ['geocode']}). Anscheinend ist die Eingabe kein HTMLInputElement. Weißt du, wie man ein HTMLInputElement von dom in eckig übergibt?

EDIT: das Setzen einer Warnung ('input') zeigt, dass die Eingabevariable immer Null ist ... nicht sicher warum?

Answer 1

Ich hatte das gleiche Problem, müssen Sie initMap() auf ng-focus des Eingabeelements aufrufen. Dann wird es funktionieren.

Aber das Problem, auch nach der Aktualisierung meines Codes, wurde das Modell nicht aktualisiert. Dann wechselte ich zur angular-google-places-autocomplete-Bibliothek.

Und diese Bibliothek ist genial. Check out https://github.com/kuhnza/angular-google-places-autocomplete

Edit: Antwort Aktualisiert Sie müssen nur wie unten schreiben, und wenn Sie den Speicherort wählen foundaddress haben Google Platz Objekt, von dem Sie formatted_address entpacken.

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