Google Maps API v3 Click events not passed on by custom overlays

Question

Hi there,

I've been making use of InfoBox to draw custom overlays on my GoogleMap. In short I load from XML lat longs etc, draw pins on the map, and show a custom infowindow. All good, however I wanted to use my own content instead of pins for markers (small previews of the content), so I created them using InfoBox as a map label. Then in turn on clicking them I open up an InfoBox as a InfoWindow replacement.

The trouble is, for the life of me I cannot get an event listener to pass the click on the pin replacements. The event listener just doesn't pick it up..

    // This works perfectly when var marker = new google.maps.Marker({
    // but registers nothing when var marker = new InfoBox(flookLabel);

    google.maps.event.addListener(marker, 'click', function() {      
    ib.close();
    ib = new InfoBox(cardDisplay);                
    ib.open(flookMap, marker);
    alert('yes');

  });

In order to see everything in context I putting in my entire function here:

  var flookMap = {
  bounds: null,
  map: null
    };
  var geocoder;
  var centerChangedLast;
  var reverseGeocodedLast;
  var currentReverseGeocodeResponse;
  blockLocate = false;
  var markersArray = [];
  var point;
  ib = new InfoBox();


    // get the results XML back and draw it on the map
    loadCards = function(filename) {
        setStatus("Waiting for response");
      $.get(filename, function(xml){
        var results = $(xml).find("card").length;
        setStatus("Server gave me " +results+ " cards");
        if (results == 0){
            setStatus("I got no cards for you dude");
            }
        else {
        $(xml).find("card").each(function(){
          var name = $(this).find('name').text();
          var address = $(this).find('placename').text();
          var imageUrl = $(this).find('imageUrl').text();
          // create a new LatLng point for the marker
          var lat = $(this).find('lat').text();
          var lng = $(this).find('lng').text();
          var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));

          // extend the bounds to include the new point
          //flookMap.fitBounds(results[0].geometry.viewport);
          flookMap.bounds.extend(point);


    var labelText = "test";

    var flookLabel = {
                     content: labelText
                    ,boxStyle: {
                       border: "5px solid black"
                      ,textAlign: "center"
                      ,fontSize: "8pt"
                      ,width: "50px"
                     }
                    ,disableAutoPan: true
                    ,pixelOffset: new google.maps.Size(-25, 0)                      
                    ,position: point
                    ,closeBoxURL: ""
                    ,isHidden: false
                    ,pane: "mapPane"
                    ,enableEventPropagation: true
            };

            var marker = new InfoBox(flookLabel);           
            marker.open(flookMap);
            markersArray.push(marker);


    /*       add the marker itself 
          var marker = new google.maps.Marker({
            position: point,
            map: flookMap
          });
          setStatus('Drawing pin' + point);
          markersArray.push(marker);
    */
          // create the tooltip and its text
            var boxText = document.createElement("div");
            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: rgba(0,0,0,0.5); padding: 5px; -webkit-box-shadow: 0px 3px 4px rgba(0,0,0,0.2); -webkit-border-radius: 8px;";
            boxText.innerHTML = '<p>'+name+'</p><br />'+address+'<br /><img width="460" height="300" src="'+imageUrl+'" />';
            var cardDisplay = {
                     content: boxText
                    ,disableAutoPan: false
                    ,maxWidth: 0
                    ,pixelOffset: new google.maps.Size(-250, -400)                     
                    ,zIndex: null
                    ,boxStyle: { 
                      // background: "url('http://www.garylittle.ca/map/artwork/tipbox.gif') no-repeat"
                      opacity: 1
                      ,width: "500px"
                      ,height: "400px"
                     }
                    ,closeBoxMargin: "10px 2px 2px 2px"
                    ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                    ,infoBoxClearance: new google.maps.Size(1, 1)
                    ,isHidden: false
                    ,pane: "floatPane"
                    ,enableEventPropagation: false
            };

          // add a listener to open the tooltip when a user clicks on one of the markers
          google.maps.event.addListener(marker, 'click', function() {      
            ib.close();
            ib = new InfoBox(cardDisplay);                
            ib.open(flookMap, marker);
            alert('yes');

          });
        });

        // Fit the map around the markers we added:
        flookMap.fitBounds(flookMap.bounds);
        setStatus("Zooming map to new bounds:" +flookMap.bounds);

        }
      });
    }

Answer 1

I think I had a similar problem. AFAIR I've solded it like this:

• the event listener function was encapsulating another function:
• infobox was initialized, but not shown,

than when marker is created, I'm adding the listener:

google.maps.event.addListener(marker, "click", function(e){ 
   loadTooltipContent(id, marker);
});

and than:

loadTooltipContent = function(id, marker){
  infobox.setContent('<div>Loading...</div>');
  infobox.open(map,marker);
    // than the ajax request... etc.
}