GoogleMaps - gmaps.js with clustering and multiple cluster solution

Question

So am I am using gmaps.js and the gmaps.js along with marker clusterer. In my case I may have multiple markers with the exact same location, but in reality represent different data. To overcome this I am trying to implement the solution found here on SO - in particular the solution by Nathan Colgate.

The idea is when max zoom has reached on a cluster it will execute the multiChoice function. I have this part working. What I cannot get to work is showing an infoWindow with that function.

My goal is to show an infoWindow on this cluster click to display information about each marker (particularly each marker's infoWindow content (this will have additional details specific to it).

JS :

//create the map
var map = new GMaps({
    el: '#map_canvas_main',
    lat: response.results[0].lat,
    lng: response.results[0].lng,
    zoom: 5,
    maxZoom: 15,
    panControl: false,
    markerClusterer: function(map) {
        markerCluster = new MarkerClusterer(map, [], {
            title: 'Location Cluster',
            maxZoom: 15
        });

        // onClick OVERRIDE
        markerCluster.onClick = function(clickedClusterIcon) { 
            return multiChoice(clickedClusterIcon.cluster_); 
        }

        return markerCluster;
    }
});

//loop through array
for(var i = 0; i < response.results.length; i++)
{
    //create marker image
    var markerLoc = {
        url: '/custom/plugins/gmaps/images/marker-red.png',
        size: new google.maps.Size(24, 30), //size
        origin: new google.maps.Point(0, 0), //origin point
        anchor: google.maps.Point(9, 30) // offset point
    };

    //add marker
    map.addMarker({
        lat: response.results[i].lat,
        lng: response.results[i].lng,
        icon: markerLoc,
        title: response.results[i].ip_address,
        infoWindow: {
          content: '<p>'+response.results[i].ip_address+'</p>'
          //add more details later
        }
    }); 
}

//cluster function to do stuff
function multiChoice(clickedCluster)
{
    //clusters markers      
    var markers = clickedCluster.getMarkers();

    //console check
    console.log(clickedCluster);
    console.log(markers);

    if (markers.length > 1)
    {           
        //content of info window
        var infowindow = new google.maps.InfoWindow({
            content: ''+
                '<p>'+markers.length+' = length</p>'+
                '<p>testing blah blah</p>'
        });

        //show the window
        //infowindow.open(??????????);

        return false;
    }
    return true;
};

score 0 · Accepted Answer · answered Sep 30 '14 at 18:10

Finally figured this out playing around with it some more... it makes sense now, but didn't before. Here is the new 'display' function to be replaced by the one in the OP. Of course, there are a few other change needed yet... showing all clustered marker data in the new info window for example, but this is the gist of getting the window to work.

//cluster function to do stuff function multiChoice(clickedCluster) { //clusters markers
var markers = clickedCluster.getMarkers();

if (markers.length > 1)
{
    //create the info window
    var infoWindow = new google.maps.InfoWindow({
        content: ''+
            '<p>'+markers.length+' = length</p>'+
            '<p>testing blah blah</p>',
        position: clickedCluster.center_
    });

    //display the infowindow
    infoWindow.open(clickedCluster.map_);

    return false;
}
return true;

};

GoogleMaps - gmaps.js with clustering and multiple cluster solution

1 Answers1