Multiple infoBubbles in google maps api shows just last added

Question

I have problem with infoBubble in google maps api v3. I load markers from db and add infoBubbles for that markers. But work just infoBubble from last added marker. Can u see the problem please?

 var gmarkers = [];
 var map;

 function load() {

     var defaultLocation = new google.maps.LatLng(49.8248188, 15.4684482);

     var map = new google.maps.Map(document.getElementById("map"), {
         center: defaultLocation,
         zoom: 8,
         mapTypeId: 'roadmap'
     });

     downloadUrl("generatexml.php", function (data) {
         var xml = data.responseXML;
         var markers = xml.documentElement.getElementsByTagName("marker");
         for (var i = 0; i < markers.length; i++) {
             var id = markers[i].getAttribute("id");
             var name = markers[i].getAttribute("name");
             var point = new google.maps.LatLng(
             parseFloat(markers[i].getAttribute("lat")),
             parseFloat(markers[i].getAttribute("lng")));
             var marker = new google.maps.Marker({
                 map: map,
                 position: point
             });

             var infoBubble = new InfoBubble({
                 content: '<div' + name + '</div',
                 boxClass: 'info-box',
                 alignBottom: true,
                 pixelOffset: new google.maps.Size(-150, -40),
                 maxWidth: 300,
                 disableAutoPan: false,
                 hideCloseButton: false,
             });

             google.maps.event.addListener(marker, 'click', function () {
                 infoBubble.open(map, marker);
                 console.log(infoBubble.content);
             });

             gmarkers.push(marker);

         }
     });
 }

This looks like a closure problem - checkout this answer http://stackoverflow.com/a/7054057/1370442 — Luke Baughan, Nov 21 '14 at 16:21
Many identical questions on this site. Please search. Further to that, you should be looking at creating a single `infoWindow` object and setting its content dynamically. Just a hint. — MrUpsidown, Nov 21 '14 at 16:42
Oh thx I used infoBubble so I didn't care about infoWindow. Thank you — Kasta, Nov 21 '14 at 16:44
Sorry I didn't see that. The same applies with `infoBubble`. It must have a `setContent` method if I remember well. This applies, of course, if you don't need multiple bubbles opened at the same time. — MrUpsidown, Nov 21 '14 at 16:48
Possibly relevant question [Close open InfoBubble when open a new (gMap v3)](http://stackoverflow.com/questions/11910227/close-open-infobubble-when-open-a-new-gmap-v3/11911206#11911206) — geocodezip, Nov 21 '14 at 22:49

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

I found it, just replace:

google.maps.event.addListener(marker, 'click', function () {
            infoBubble.open(map, marker);
            console.log(infoBubble.content);

        });

with:

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

                   infoBubble.setContent(this.content);
                   infoBubble.open(map, this);

         });

Thank you for help.

Multiple infoBubbles in google maps api shows just last added

1 Answers1