title: Callback method for opening Google Maps InfoWindow
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Does anybody know of a better way?</p>
  
  <p><strong>UPDATED with full code</strong></p>
  
  <pre><code>var widgetMap;
  var widgetInfoWindow;
  var widgetMarkers = [];
  var popIndex = 0;
  var popTotal = 0;
  
  $(document).ready(function () {
      $.ajax({
          url: '/handlers/GoogleLocations.ashx?kmlpath=&lt;%= KmlPath %&gt;',
          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 &lt; 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&amp;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 &lt; widgetMarkers.length; i++) {
          widgetMarkers[i].setMap(null);
      }
      widgetMarkers = [];
  }
  
  function initPopupCarousel() {
      alert("here");
  }
  </code></pre>
  
  <p><strong>UPDATE DETAILS</strong>
  I am loading the KML from a web service as there is filtering of map markers taking place elsewhere.</p>
  
  <p>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.</p>