angular-google-maps - listen for infowindow domready event

Question

Listening for the domready event in normal js Google maps is relatively easy as outlined here :

infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(infoWindow, 'domready', function() {
      // whatever you want to do once the DOM is ready
});

However it doesn't seem obvious how to do it in angular-google-maps.

Is there a solution ?

Regale

Answer 1

The solution when using Angular Google Maps involves using the infowindow control object - see docs.

As noted in this issue - where I first posted this solution - you can create an empty infowindow control object within the main controller :

$scope.infowindowControl = {};

Then you scope bind your new object in the ui-gmap-window directive definition like :

<ui-gmap-window
    options="windowOptions"
    closeClick="closeClick()"
    control="infowindowControl"
>

On infowindow open (actually unsure at what point) - it will pass five functions to the empty object you created within $scope. Some of these functions are noted in the documentation but in a rather haphazard and non-defined way :

• getChildWindows()
• getGWindows()
• getPlurals()
• hideWindow()
• showWindow()

The one that you need is getGWindows() - which you put inside your marker click event.
This will get you an array of the open infowindows and you can now attach an event listener in the standard google maps fashion, like :

var windows = $scope.infowindowControl.getGWindows();
    console.log('inside click after getGWindows ', windows);
google.maps.event.addListener(windows[0], 'domready', function() {
    console.log('infowindow domready just fired !!');
});

While it's not an ideal, well documented or easy solution (and took me a number of hours to figure out) - and passing functions to an empty object is frankly counter-intuitive - it does seem to work.

Plunker here.

Regale