CODEWITHSUNDEEP
angularjsgoogle-maps
elpeyotl
elpeyotl

Reputation: 372

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>

Upvotes: 0

Views: 1039

Answers (2)

elpeyotl
elpeyotl

Reputation: 372

The answer from mcrvaz solved my problem. I removed the inline javascript file. And loaded it uiGmapgogole map Instance in the controller. Like in the docs. 

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

});

});

I was missing putting "uiGmapGoogleMapApi" in the controller head.

Upvotes: 1

mcrvaz
mcrvaz

Reputation: 659

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.

Upvotes: 1

Related Questions