Callback method for opening Google Maps InfoWindow

Question

I am using Google Maps v3 and have markers on the map which show an InfoWindow when clicked. The InfoWindow needs to contain an image carousel. In order for me to initialize the carousel, I need to run some javascript after the InfoWindow has opened. In effect I need a callback for the InfoWindow.open() method.

However I am unable to find one so have had to resort to using setTimeout to wait for 1 second before initializing the image carousel. This is not ideal.

Does anybody know of a better way?

UPDATED with full code

var widgetMap;
var widgetInfoWindow;
var widgetMarkers = [];
var popIndex = 0;
var popTotal = 0;

$(document).ready(function () {
    $.ajax({
        url: '/handlers/GoogleLocations.ashx?kmlpath=<%= KmlPath %>',
        dataType: "json",
        success: function (data) {
            clearData();
            initialize();
            LoadWidgetMapData(data);
        }
    });
});

function initialize() {

    var myLatlng = new google.maps.LatLng(53.32, -7.71);
    var mapOptions = {
        zoom: 7,
        center: myLatlng
    };

    widgetMap = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    widgetInfoWindow = new google.maps.InfoWindow();
    widgetInfoWindow = new InfoBubble({
        maxHeight: 275,
        maxWidth: 350,
        arrowSize: 30,
        arrowStyle: 2,
        borderRadius: 0,
        disableAutoPan: false
    });

    google.maps.event.addListener(widgetInfoWindow, 'domready', initPopupCarousel);
}

google.maps.event.addDomListener(window, 'load', initialize);

function LoadWidgetMapData(data) {

    var marker, i, image;

    for (i = 0; i < data.locations.length; i++) {
        var location = data.locations[i];
        if (location) {

            var pinColor = location.colour;
            var image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
                new google.maps.Size(21, 34),
                new google.maps.Point(0, 0),
                new google.maps.Point(10, 34));

            marker = new google.maps.Marker({
                bubble: location.bubble,
                position: new google.maps.LatLng(location.latitude, location.longitude),
                map: widgetMap,
                icon: image
            });

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {

                    widgetInfoWindow.setContent(data.locations[i].bubble);
                    widgetInfoWindow.open(widgetMap, marker);

                };
            })(marker, i));

            widgetMarkers.push(marker);
        }
    }
}

function clearData() {
    widgetMap = null;
    widgetInfoWindow = null;
    clearOverlays();
}

function clearOverlays() {
    for (var i = 0; i < widgetMarkers.length; i++) {
        widgetMarkers[i].setMap(null);
    }
    widgetMarkers = [];
}

function initPopupCarousel() {
    alert("here");
}

UPDATE DETAILS I am loading the KML from a web service as there is filtering of map markers taking place elsewhere.

The current behavior with this code is that I click a marker, the alert shows and then the InfoBubble opens. So it appears that "domready" occurs BEFORE the InfoBubble is rendered.

score 5 · Answer 1 · answered Aug 18 '14 at 12:56

5

use the 'domready' event of the InfoWindow

google.maps.event.addListener(marker, 'click', (function (marker, i) {
   return function () {
       widgetInfoWindow.setContent(data.locations[i].bubble);
       widgetInfoWindow.open(widgetMap, marker);
       google.maps.event.addListener(widgetInfoWindow,'domready',initPopupCarousel);
   };
})(marker, i));

answered Aug 18 '14 at 12:56

geocodezip

158,664
13
220
245

1

Ok great. I have added an alert() to my initPopupCarousel() method to see when it fires. The alert appears before the InfoWindow has opened, which means I can't access any of the HTML content in there. So it seems "domready" occurs before the InfoWindow has finished opening? – rf_wilson Aug 18 '14 at 13:02
Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) if you need help debugging. [similar question](http://stackoverflow.com/questions/12665108/google-maps-api-v3-infowindow-flot/12665704#12665704) – geocodezip Aug 18 '14 at 13:44
Your code doesn't include the carousel. When you see the alert may not be relevant (of course it may be broken as well, but can't tell from an alert). – geocodezip Aug 19 '14 at 15:42
[similar question](http://stackoverflow.com/questions/12665108/google-maps-api-v3-infowindow-flot) with [example fiddle](http://jsfiddle.net/ryleyb/Aykg2/) – geocodezip Aug 19 '14 at 15:49

score 1 · Answer 2 · answered Aug 03 '19 at 07:41

This is how I've managed to control a button html within the infoWindow once it is opened:

var contentString = '<button data-whatSite="'+whatSite+' "type="button" class="btn-site">Save</button>';

var infoWindow = new google.maps.InfoWindow({content: contentString});

google.maps.event.addListener(infoWindow, 'domready', function() {
  $(".btn-site").on('click', function(e) {
    console.log($(this).attr("data-whatSite"));             
  });  
});

Callback method for opening Google Maps InfoWindow

2 Answers2

Linked