How to wait for Angular Google Maps to append getGMap to the control object

Question

I've been trying to set up click event listeners on the google.maps.Map object that's created by the ui-gmap-google-map directive from the Angular Google Maps library.

I need to do this dynamically, so it seems (by my brief testing at least) that using the events parameter on the ui-gmap-google-map directive won't work (because it seems to "read" the parameter value only once, but maybe I'm wrong about that).

So I decided to use the control parameter, which augments the object named by the parameter value with the methods getGMap and refresh. Here is what my directive usage looks like:

<ui-gmap-google-map center="appCtrl.mapSetup.center"
                    zoom="appCtrl.mapSetup.zoom"
                    control="appCtrl.mapSetup">
</ui-gmap-google-map>

Finally, I'm loading the Google Maps API asynchronously, and relying on the GoogleMapApi service/promise (part of Angular Google Maps) to know when I can start safely dealing with the google.maps.Map object (e.g. adding event listeners etc.). Here is a small example of what that looks like:

// inside the AppController constructor, see the fiddle linked below
var mapSetup = this.mapSetup;
GoogleMapApi.then(function () {
    google.maps.event.addListener(mapSetup.getGMap(), 'click', function () {
        alert('hello');
    });

So when the page is loaded (here's the fiddle), I get "TypeError: undefined is not a function" because the mapSetup object hasn't been augmented with getGMap or refresh. It seems like it should have been, based on my understanding of the documentation.

I wrapped the addListener call with $timeout (the Angular service) using a few hundred millisecond delay, and then it worked because the mapSetup object had by that time been augmented with getGMap.

Is there a way to avoid having to use $timeout with an arbitrary delay to wait until the control-specified object is actually augmented?

Trihydric

Answer 1

By my testing and by what I've read in the docs and in various issue comments, it seems that this (waiting for the control object to get augmented) is one of the things that the uiGmapIsReady service in Angular Google Maps was designed for.

My current understanding is that uiGmapGoogleMapApi should be used to wait for async loading of the Google Maps API and uiGmapIsReady should be used to wait for uiGmap* directives and all they entail (including control object augmentation) to complete. The naming says it all.

Here's a new demo fiddle. This demo's usage of IsReady:

IsReady.promise().then(function (maps) {
    var map1 = $scope.control.getGMap();
    var map2 = maps[0].map;
    alert(map1 === map2); // true
});

IsReady.promise (source) accepts an optional integer argument indicating (I'm pretty sure) the number of ui-gmap-google-map directives your page is using. It defaults to 1. (If you happen to give it a "wrong" number, I believe there's a (remote?) possibility that the returned promise will never resolve.)

Jephum

This answer looks much cleaner. Updating to the correct answer. – Trihydric

IsReady is now uiGmapIsReady as of Angular Google Maps v2.0 – Setula

I confirm that the integer passed to uiGmapIsReady's promise is the number of ui-gmap-google-map directive in the page. – Simulacrum

Answer 2

I ended up using vanilla JS and got everything to work with no headache. Angular Google Maps is a cool idea, but at least in my case, the issues outnumber the benefits.

After spending an hour or so on github and stackoverflow, I realised that the proposed solutions (like https://github.com/angular-ui/angular-google-maps/issues/308) were a hack of a hack, and since my task was just "display some markers on a map and center the map on them" I don't want to use a hack.

The gmaps documentation contains tons of examples (in vanilla JS) that can be used in an Angular app, copy + paste and you're done.

Again, this is my personal experience, might not be the same for you

Obvert