How to ensure that the map is loaded

Question

getGMap() returns an instance of the Map object. If the map is not ready, this function returns undefined. Is there an event or a way which tells that the Map is ready and that calling the getGMap will surely return the Google Map?

Thanks

Yash

Answer 1

You can use the uiGmapIsReady within your controller - see IsReady in docs.

uiGmapIsReady returns:
- a promise once the map is loaded and ready
- an array of map info (which i've called map_instances)
-- the array length depends on how many maps you have loaded in your page
-- each object in the array includes the google map object

To use getGmap() ready on your control object would then look like this:

HTML

<div ng-app="myApp" ng-controller="myController">
    <ui-gmap-google-map 
        center="map.center" 
        zoom="map.zoom" 
        control="map.control">
    </ui-gmap-google-map>
</div>

CONTROLLER

myApp.controller('myController', function ($scope, uiGmapIsReady) {

    $scope.map = {
        center : {
            latitude: 37.7749295, 
            longitude: -122.4194155 
        },
        zoom : 14,
        control : {}
    };

    uiGmapIsReady.promise()
    .then(function (map_instances) {
        var map1 = $scope.map.control.getGMap();    // get map object through $scope.map.control getGMap() function
        var map2 = map_instances[0].map;            // get map object through array object returned by uiGmapIsReady promise
    });

});

Note how you can also access the map object through two methods:
- via the map_instances array (which looks like [map1Instance, map2Instance, ...])
- via $scope.map.control.getGMap() as long as you've defined it in your html and $scope

JSFIDDLE

Answer 2

You could attach to the tilesloaded event by passing it into the "events" property of the map options. tilesloaded fire after a tile is loaded on the map (therefore the map is loaded).