シングルページアプリケーションでGoogle Maps APIを使用する - 複数回のAPIを使用しているエラー

Question

Google Map APIを使用している角度のあるウェブアプリケーションがあります。これはhtmlビューに読み込まれます。クリックすると、状態が別のページに変わり、マップが読み込まれます。これは初めてのことです。読み込みページに戻ると、私のコンソールはこう言っています。このページにはGoogle Maps APIが複数回含まれています。予期しないエラーが発生する可能性があります。そして、再び地図をロードすると、予期しないエラーが発生しています。

私の質問：google Maps APIをリセットして、毎回戻るようにリセットすることはできますか？または、インスタンスを削除するか、何をすべきですか？

私は角Googleマップディレクティブを使用しています：https://angular-ui.github.io/とでそれを実装する：それをロードしているページで

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXX" type="text/javascript"> 

。

マップページには「uiGmapgoogle-maps」指示が反映されています。

インラインJavaScriptを使用しているため、指示キーの設定にapiキーを渡す方法がわかりませんでした。そして私はGoogleマップのページの前にロードするので、マップはうまくロードされます。

州最初のページ：

.state('apps.vermittlungDetail', { 
        url: '/vermittlung/detail/:taskID', 
        templateUrl: 'tpl/apps_vermittlung_detail.html', 
        controller: 'XeditableCtrl', 
        resolve: load(['ui.select','toaster','js/app/globalServices/global-services.js','js/app/vermittlung/newTask-service.js','js/controllers/bootstrap.js','js/app/vermittlung/vermittlung-detail.js','js/app/annulation/annulation-service.js','js/app/smsTool/smsTool-service.js','js/app/emailMami/emailmami-service.js' ,'js/app/vermittlung/vermittlung-service.js', 'smart-table','xeditable','js/controllers/xeditable.js', 'moment']) 
       }) 

州2ページ目（マップ）

.state('apps.vermittlungGoogleMap', { 
        url: '/vermittlungMap', 
        templateUrl: 'tpl/apps_vermittlung_googlemap.html', 
        resolve: load(['uiGmapgoogle-maps','toaster','js/app/vermittlung/vermittlung-detail.js', 'js/app/vermittlung/vermittlung-service.js']) 

       }) 

HTML 2ページ

<div ng-controller="vermittlungDetailCtrl"> <!--SET CONTROLLER--> 

    <ui-gmap-google-map center='map.center' zoom='map.zoom'> 
     <ui-gmap-markers models="markers" coords="'self'" icon="'icon'" options="markers.options" click="onClickMarker"> 
     </ui-gmap-markers> 

     <ui-gmap-window options="windowOptions" show="showWindow" coords="windowData.model" closeClick="closeClick()"> 
      <div> 
      <div class="m-b-sm">{{currentMarkerTitle}}<br>{{currentMarkerPhone}}</div> 
      <button class="btn btn-info btn-xs" ng-click="$parent.sendMamiSMS($parent.tasktosend,$parent.currentMarkerPhone,$parent.currentMarkerTitle)">SMS senden</button> 
      </div> 
      </ui-gmap-window> 

    </ui-gmap-google-map> 

    </div> 

Answer 1

まず、あなたの状態にコントローラを設定し、ないあなたテンプレート。

.state('apps.vermittlungGoogleMap', { 
       url: '/vermittlungMap', 
       controller: 'vermittlungDetailCtrl', 
       templateUrl: 'tpl/apps_vermittlung_googlemap.html', 
       resolve: load(['uiGmapgoogle-maps','toaster','js/app/vermittlung/vermittlung-detail.js', 'js/app/vermittlung/vermittlung-service.js']) 

      }) 

次に角度Googleマップはすでにそれをしないこの

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXX" type="text/javascript"> 

のようにGoogleマップのインポートを停止します。

マップを操作してAPIキーを挿入するには、hereをご覧ください。

Answer 2

mcrvazの回答が私の問題を解決しました。私はインラインのjavascriptファイルを削除しました。コントローラにuiGmapgogole mapインスタンスをロードしました。ドキュメントのように。

.controller("someController", function($scope, uiGmapGoogleMapApi) { 
// Do stuff with your $scope. 
// Note: Some of the directives require at least something to be defined originally! 
// e.g. $scope.markers = [] 

// uiGmapGoogleMapApi is a promise. 
// The "then" callback function provides the google.maps object. 
uiGmapGoogleMapApi.then(function(maps) { 

}); 

}）;

コントローラーヘッドに「uiGmapGoogleMapApi」を挿入していませんでした。