AngularJS - API-Schlüssel für Google Place Autocomplete

Question

Ich bin neu in der Verwendung von Google APIs und habe versucht, herauszufinden, wie die Places Autocomplete API mit Angular implementiert werden kann. Ich habe nie wirklich mit Autocomplete im Allgemeinen gearbeitet. Ich habe die jQuery-Bibliothek im Moment nicht in mein Projekt eingebunden, aber ich glaube, ich habe einige Entwickler gesehen, die das innerhalb der Direktive mit element.autocomplete verwenden.

ich sah für alle bestehenden Richtlinien, die dabei helfen können, und ich habe festgestellt: https://github.com/kuhnza/angular-google-places-autocomplete

Danach up Einstellung entsprechend die Dokumentation, habe ich nicht in der Lage gewesen, um es zu arbeiten und Ich habe auch nicht gesehen, wo ich den API-Schlüssel einrichten würde, damit er überhaupt funktioniert. Ich denke, der Hauptfehler hat mit dem API-Schlüssel zu tun, aber ich bin nicht positiv.

Von dem, was ich verstanden, Google Text & Tabellen erwähnen die API-Schlüssel als key Parameter enthalten, wenn die Orte der Bibliothek ziehen. Wenn ich den Schlüssel wie in der Dokumentation der Richtlinie weglasse, bekomme ich MissingKeyMapError. Wenn ich den Schlüssel wie Google hinzufüge, bekomme ich ApiNotActivatedMapError. Zur gleichen Zeit sagt Google auch, dass mein API-Schlüssel ein Server-API-Schlüssel ist und "Dieser Schlüssel sollte auf Ihrem Server geheim gehalten werden".

Die Linie in der Bibliothek zu ziehen, dass ich Referenzierung ist: <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

eine cURL Anfrage mit meinem PHP-Backend tun oder einfach nur in dem Browser bietet mich mit den Ergebnissen. Jetzt versuche ich nur zu verstehen, wie Autocomplete funktioniert und wie ich es mit AngularJS arbeiten kann.

Also ja, ich bin ein wenig verwirrt in diesem ganzen Thema. Wenn jemand mich in der richtigen Richtung zeigen könnte oder darauf hinweisen, was ich Mißverständnis sein kann, wäre es eine große Hilfe sein!

Answer 1

Sie können einen Google-API key für eine bestimmte Domäne erstellen und auf diese Weise werden Sie sicher sein, dass niemand sonst es auf seiner Seite verwenden kann usw.

Ich habe auch Google Ort Richtlinie mit diesen api implimented und wir müssen API-Schlüssel API SDK zu erhalten.

<script src="https://maps.googleapis.com/maps/api/js?libraries=places?key=your_key"></script> 

Hier ist Richtcode.

angular.module('app') 
    .directive('googlePlace', directiveFunction); 

directiveFunction.$inject = ['$rootScope']; 

function directiveFunction($rootScope) { 
    return { 
    require: 'ngModel', 
    scope: { 
     ngModel: '=', 
     details: '=?' 
    }, 
    link: function(scope, element, attrs, model) { 
     var options = { 
     types: [], 
     componentRestrictions: {} 
     }; 
     scope.gPlace = new google.maps.places.Autocomplete(element[0], options); 

     google.maps.event.addListener(scope.gPlace, 'place_changed', function() { 
     scope.$apply(function() { 
      scope.details = scope.gPlace.getPlace(); 
      model.$setViewValue(element.val()); 
      $rootScope.$broadcast('place_changed', scope.details); 
     }); 
     }); 
    } 
    }; 
} 

Sie können es verwenden, wie

<input type="text" google-place ng-model="venue.address_line_1" aria-label="search"> 

und dann in der Steuerung, fangen die place_changed Ereignis.

$scope.$on('place_changed', function (e, place) { 
    // do something with place 
}); 

Answer 2

Sie können Ihre api Schlüssel hier im Skript übergeben als params

<script 
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"> 
     </script> 

und danach, wenn Sie diesen Fehler sehen ApiNotActivatedMapError dann bedeutet es, dass Sie den Service google Orte in Ihrer Google-Entwickler-Konsole aktivieren müssen

https://console.developers.google.com

unter API klicken Google maps mehr und Sie sollten Google Places API Web Service klicken Sie darauf und aktivieren zu sehen.

hoffte, das hilft