elpeyotl elpeyotl - 17 days ago 17
AngularJS Question

Using Google Maps API on Single page application - Error using multiple times the api

I have an angular WebApp in which I use the google Map API. It is loaded in the html view. On click the states changes to another page and loads the map. It is working well for the first time. When I go back to the loading page my console says: You have included the Google Maps API multiple times on this page. This may cause unexpected errors. And when i load the map again, some unexpected errors are happening.

So my question: Is it possible to reset the google Maps API so that it refreshes everytime i go back? Or can i delete the instance or what should i do?

I'm using the angular google maps directive: https://angular-ui.github.io/ and implementing it with:

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


On the page who is loading it.

The maps page is loaded with resolving the 'uiGmapgoogle-maps' directive.

I'm using the inline javascript cause i could not figure out how to pass an api key to the directive settings. And I load it before the google maps page so, the maps loads well.

State first page:

.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'])
})


State second page (the map)

.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 second page

<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

First, set the controller on your state, not your template.

.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'])

          })

Then stop importing GoogleMaps like this

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

Angular Google Maps already does it.

To manipulate the map and insert your API key, take a look here.