CODEWITHSUNDEEP
angularjsgoogle-maps
Whisher
Whisher

Reputation: 32766

angular google maps show a loader before the map is loaded

I'm using this good module: http://angular-ui.github.io/angular-google-maps

and I'm wondering how can show a loader before the map is loaded/showed I've tried simply (in the view)

ng-if="map"

but it doesn't work. Can anyone give en hint, please ?

Upvotes: 0

Views: 561

Answers (1)

Tony Barnes
Tony Barnes

Reputation: 2643

You could do it like this with a promise, using isReady and ng-show, ng-hide:

Controller:

angular.module('myApp')
  .controller('MainCtrl', function ($scope, uiGmapIsReady) {

    $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };

    uiGmapIsReady.promise(1).then(function() {
      $scope.mapLoaded = true;
    });

  });

View:

<p ng-hide='mapLoaded'>loading...</p>

<ui-gmap-google-map ng-show='mapLoaded' center='map.center' zoom='map.zoom'></ui-gmap-google-map

Upvotes: 1

Related Questions