Hide InfoBox When Marker is in Cluster

476 Views Asked by At

I've come to notice that a infobox does not seem to disappear when the marker goes into a cluster. Is there any already made way to make infoboxes disappear when the marker goes into a cluster then? If not, any suggestions on how I would do this? I was trying to find out how to get all current markers that are clustered, but I've had no luck.

Each marker has an info box made specifically for that marker.

Thanks for any help you can give in advance!

Locations array example:

var locations = [
    ['<div class="infomarkerdiv"><a href="index.php?p=JTLgRad15x8=&d=20150616041300"><div class="profile-pic-find" style="background-image: url(/bin/images/cars/2-1.jpg);"></div><div class="name"> Honda Civic</div></a></div>', 39.11342293092857, -77.8597175, 1, 2],
];

Some of my main code:

var marker, i;
var markers = new Array();

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: theMap
    });

    markers.push(marker);



    var myOptions = {
        content: locations[i][0],
        boxClass: 'infobox',
        closeBoxURL: "",
        pane: "floatPane"
    };

    var ib = new InfoBox(myOptions);

    ib.open(theMap, marker);



}


var markers = markers; //some array;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
    bounds.extend(markers[i].getPosition());
}

theMap.fitBounds(bounds);

google.maps.event.addListener(marker, 'map_changed', function() {
    //console.log(MarkerClusterer(getTotalMarkers()));
});


google.maps.event.addListener(marker, "click", function(e) {
    ib.open(theMap, this);
});

var clusterStyles = [{
    textColor: 'white',
    url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
    height: 55,
    width: 53
}, {
    textColor: 'white',
    url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
    height: 55,
    width: 53
}, {
    textColor: 'white',
    url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
    height: 55,
    width: 53
}];
var markerCluster = new MarkerClusterer(theMap, markers, mcOptions);
0

There are 0 best solutions below