Infowindows with tabs (Infobubble) only displaying content from last marker added (via PHP/Mysql))

Question

Ok I've been trying to implement Infobubbles with tabs on a map populated with many markers, recovered from a Mysql database with an ajax call (built with this tutorial from Google ).

The click event is reacting well with every marker, but the problem is that every infobubble is displaying the same html content in the tabs, from the last marker added I guess... There must be a closure problem, but I feel quite useless for the moment, this is driving me crazy ! Thx for any help you could provide...

function init() {

    var mapCenter = new google.maps.LatLng(48.204612, 7.419058);
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 9,
      center: mapCenter,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infoBubble = new InfoBubble({
        map: map,
        maxWidth: 300,
        disableAnimation: true
    });

    // Get markers and info from the database
downloadUrl("phpsqlajax_genxml3.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var description = markers[i].getAttribute("description");
        var type = markers[i].getAttribute("type");
        var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
        var html = "<b>" + name + "</b> <br/>" + address;
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
        map: map,
        title: name,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow,
        });

        google.maps.event.addListener(marker, 'click', function() {
        if (!infoBubble.isOpen()) {
        infoBubble.open(map, this); 
        }
        });

        google.maps.event.addListener(map, "click", function(){
        infoBubble.close();
        });
    }

infoBubble.addTab('Tab1', html);
infoBubble.addTab('Tab2', description);

});
}

score 0 · Accepted Answer · answered Nov 05 '12 at 14:30

0

Because your infoWindow is created once, and only at the begin of the execution of the code. You need to put the initialization of the infoWindow inside the click event or use the method setContent to modify the content on marker clicked

answered Nov 05 '12 at 14:30

Thanh Trung

3,566
3
31
42

1

Thanks for your answer ! While I was scratching my head on this problem I eventually decided to use a combination of the Infobox plugin and Jquery UI tabs instead, which turned out to be a lot more customizable than Infobubble. – rafa1986 Nov 27 '12 at 22:13

Infowindows with tabs (Infobubble) only displaying content from last marker added (via PHP/Mysql))

1 Answers1