Google Map V3: markerCluster onclick display all the infoboxes for the markers inside the cluster in one infobox list style.

Question

Am retrieving pin or marker details from json response, What I need is to retrieve the particular marker details which are clustered,

For example from the screenshot consider the clusterer with 3 marker count, now am able to retrieve only 3 marker details from the start of the array, I need to retrieve the particular three marker details clustered.

Following method is used to retrieve and display marker detail in infoWindow,

    function displayClusterInfo(cluster,info,pins,infowindow)
{
var text="";

var markers = cluster.getMarkers();

   for(var i=0; i<markers.length; i++)
       {
        text += "" + pins[i].Date + "</br>" + "<b>Fire Type : </b>" + pins[i].Inc_Code_descr + "</br>";


       }



    infowindow.close(map, info);
    infowindow.setContent(text); //set infowindow content
    infowindow.open(map, info);
 }

mouse event action on marker and cluster are performed by the following code:

function displayPins(pins) {
infowindow = new google.maps.InfoWindow({
    content: "holding..."
});
var markers = [];
var boxList = [];
var pinList = [];


latLng = [];
$.each(pins, function(i, pin) {

    var pinText = document.createElement("div");
    pinText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    pinText.innerHTML = "" + pin.Date + "</br>" + "<b>Fire Type : </b>" + pin.Inc_Code_descr + "</br>";
    var pinOptions = {
        content: pinText,
        boxStyle: {
            opacity: 0.75,
            width: "220px"
        },
        enableEventPropagation: false,
        closeBoxMargin: "12px 4px 2px 2px"
    };
    var ip = new InfoBox(pinOptions);
    pinList.push(ip);



    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    boxText.innerHTML = "" + pin.Date + "</br>" + pin.Address + "</br><b>Incident No : </b><a class=no_image href=./info/?id=" + pin.Div_id + ">" + pin.Incident_no + "</a><br/>" + "</br><b>Fire Type : </b>" + pin.Inc_Code_descr + "</br><b>Casuality : </b>" + pin.Casualty + "</br><b>Property Damage : </b>" + pin.Prop_loss + "</br><b>Fire cause : </b>" + pin.Cause_Code_descr + "</br><b>GRANULARITY: </b>" + pin.granularity + "</br><b>COLOUR: </b>" + pin.colour + "</br><b><p class='red'>CONFIDENCES: </b>" + pin.confidence + "'</P>";
    var myOptions = {
        content: boxText,
        boxStyle: {
            opacity: 0.75,
            width: "280px"
        },
        enableEventPropagation: false,
        closeBoxMargin: "12px 4px 2px 2px"
    };
    latLng = new google.maps.LatLng(pin.Latitude, pin.Longitude);
    var marker = new google.maps.Marker({'position': latLng
                , map: map,
        draggable: true,
        optimized: false,
        visible: true});
    markers.push(marker);
    var ib = new InfoBox(myOptions);
    boxList.push(ib);

    google.maps.event.addListener(marker, 'mouseover', function(markers, i) {
        return function() {
            hoverInfoBox = pinList[i];
            if (clickInfoBox) {
                if ((clickInfoBox.getMap()) == null)
                {
                    clickInfoBox = null;
                    hoverInfoBox.open(map, this);
                } else
                {
                    console.log(" Click infobox not closed");
                }



            } else
            {

                clickInfoBox = null;
                hoverInfoBox.open(map, this);
            }

        }
    }(markers, i));
    google.maps.event.addListener(marker, 'click', function(boxList, i) {
        return function() {
            if (clickInfoBox) {
                clickInfoBox.close(map, this);
            }
            clickInfoBox = boxList[i];
            if (clickInfoBox) {
                hoverInfoBox.close(map, this);
                clickInfoBox.open(map, this);
            }

        }
    }(boxList, i));

    google.maps.event.addListener(marker, 'mouseout', function(markers, i) {
        return function() {

            if (clickInfoBox) {

                if ((clickInfoBox.getMap()) == null)
                {

                    hoverInfoBox.close(map, this);
                } else
                {
                    console.log(" Click infobox not closed");
                }

            } else
            {

                hoverInfoBox.close(map, this);
            }

        }
    }(markers, i));
});



var infowindow = new google.maps.InfoWindow();
var clusterOptions = {zoomOnClick: false, styles: [{height: 53, width: 53, url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png"}]}
var markerCluster = new MarkerClusterer(map, markers, clusterOptions);


var infoList = new google.maps.InfoWindow();
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {


    var content = '';

displayClusterInfo(cluster,info,pins,infowindow);

    });


}

Answer 1

You have add your data to the marker object . so cluster.getMarker() will give the marker which are clustered in that pin. create a attribute in marker and access it whenever you need.

var marker = new google.maps.Marker({'position': latLng
                , map: map,myData: boxText.innnerHtml
        draggable: true,
        optimized: false,
        visible: true});

And in displayClusterInfo method

for(var i=0; i<markers.length; i++)
       {
        text += markers[i].myData;


       }