Multiple infoBubbles (combined with markerclusterer)

[OscarWilde]

Hi all,

I've set up a map with multiple markers and the makercluster and that
works fine so far. I can also open up the infoWindow for each marker.

Here is an example: http://test.fiverdeal.de/test.html

On the live site, the map is much smaler and the standard infoWindow
is to big, so I decided to use infoBubble (http://google-maps-utility-
library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html)
instead of the infoWindow. And here is my problem: I'm not able to set
up multiple infoBubbles for each marker.

This is my sourcecode to place the markers:

function initialize_headermap() {

var myOptions = {
zoom: 5,
navigationControl: true,
mapTypeControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
markers = [];

var germany = new google.maps.LatLng(51, 11.6); // Default location
map.setCenter(germany);

setMarkers();
}
function setMarkers() {
// data comes via ajax in json format
for (var i = 0; i < data.length; i++) {
var point = new google.maps.LatLng(
parseFloat(data[i]['lat']),
parseFloat(data[i]['lng'])
);
var html = data[i]['fulltitle'];
var icon = customIcons[ data[i]['type'] ] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});

infoBubbles = new InfoBubble({
map: map,
content: '<div class="phoneytext">Test</div>',
shadowStyle: 1,
padding: 2,
backgroundColor: 'rgb(57,57,57)',
borderRadius: 4,
arrowSize: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: true,
arrowPosition: 30,
backgroundClassName: '',
arrowStyle: 2
});
google.maps.event.addListener(marker, 'click', function() {
if (!infoBubbles.isOpen()) {
infoBubbles.open(map, marker);
}
});

markers.push(marker);
}
var mcOptions = {gridSize: 18, maxZoom: 7, styles: styles};
markerCluster = new MarkerClusterer(map, markers, mcOptions);

}

Can anyone help me to init multiple infoBubbles?

Thanks a lot!

Frank

[OscarWilde]

I found a solution! Here is what I did:

I've created an Array with the infoBubble Objects and created a
function in the global namespce to open the correct infoBubble.

infoBubbles[i] = new InfoBubble({
map: map,
content: '<div style="padding-right: 16px;">' + html + '</
div>',
shadowStyle: 1,
padding: 5,
backgroundColor: 'rgb(169,218,88)',
borderRadius: 6,
arrowSize: 10,
borderWidth: 1,
maxWidth: 220,
borderColor: '#2c2c2c',
disableAutoPan: false,
hideCloseButton: false,
arrowPosition: 30,
backgroundClassName: '',
arrowStyle: 0
});

google.maps.event.addListener(marker, 'click',
handleMarkerClick(marker, i));

And here is the function:

function handleMarkerClick(marker,index) {
return function() {
if (!infoBubbles[index].isOpen()) {
infoBubbles[index].open(map, marker);
}
}
}

[Riccardo Magliocchetti]

I think you can avoid the array and change your original code like:

google.maps.event.addListener(marker, 'click', function() {
          if (!infoBubbles.isOpen()) {

            infoBubbles.open(map, this);
                                              ^------------ use this instead of marker
          }
});

Funny enough i've just posted a request to update the documentation to use this instead of marker :)

[OscarWilde]

That doesn't work for my. Only one infoBubble can be opened this way.

On 26 Jan., 10:48, Riccardo Magliocchetti

> Funny enough i've just posted a request to update the documentation to use *
> this* instead of *marker* :)

[Aditya Upadhyay]

Worked For Me !!! thanks Oscar Wilde