AngularJS - GoogleプレイスのオートコンプリートAPIキー

Question

GoogleのAPIを初めて使用しており、プレースオートコンプリートAPIをアングルで実装する方法を理解しようとしています。私は一般的にオートコンプリートを使ったことはありません。私は現時点で私のプロジェクトにjQueryライブラリを持っていませんが、element.autocompleteという指令の中でそれを利用している開発者がいると思います。

私はこれで役立つかもしれない既存のディレクティブを探した、と私が見つけた：https://github.com/kuhnza/angular-google-places-autocomplete

をマニュアルに従ってそれを設定した後、私はそれが仕事を得ることができていない、と私はまた、最初に機能するためにAPIキーをどこに設定するかわかりませんでした。主なエラーはAPIキーと関係があると思いますが、私は肯定的ではありません。

Googleのドキュメントには、場所ライブラリを取得するときにAPIキーをkeyパラメータとして含めることが記載されています。ディレクティブのドキュメントのようにキーを省略すると、MissingKeyMapErrorとなります。 Googleのようにキーを追加すると、ApiNotActivatedMapErrorとなります。同時に、GoogleではAPIキーがサーバーAPIキーであり、「このキーはサーバー上で秘密にする必要があります」とも言います。

私が参照してるライブラリに引っ張るためのラインは次のとおりです。<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

は私のPHPのバックエンドとのcURLの要求を行うか、単にブラウザで結果を私に提供します。では、オートコンプリートの仕組みや、AngularJSとの連携方法を理解しようとしています。

ええ、私はこの全体の話題でちょっと混乱しています。もし誰かが正しい方向に私を指すことができ、あるいは私が誤解しているかもしれないことを指摘することができれば、大きな助けになるでしょう！

Answer 1

を助け希望あなたが特定のドメインのGoogle API keyを作成することができ、このようにあなたは誰もが自分のページにそれを使用することはできないことを確認することになるなど

また、私はしましたこのAPIを使用してGoogle placeディレクティブを実装し、API SDKを取得するにはAPIキーが必要です。

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

ここにはディレクティブコードがあります。

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

あなたは

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

のようにそれを使用して、コントローラには、place_changedイベントをキャッチすることができます。

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

Answer 2

あなたは

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

のparamsとしてスクリプト内で右ここにあなたのAPIキーを渡すことができますし、このエラーApiNotActivatedMapErrorを見た場合、その後、それはあなたのGoogleのdevのコンソールでサービスのGoogleプレイスを有効にする必要があることを意味しますAPI Googleマップの下

https://console.developers.google.com

以上をクリックすると、Google Places API Web Serviceがそれをクリックして、アクティブに表示されるはずです。

これは