Identify which photos is in the specific clusterer

Question

Right now I have 8 photos as markers on the map and when I click on this clusterer the map will dim and all the photos which is in this clusterer is being shown.

If I close this dim and return to the map and zoom in so it will be 2 clusterers which have 4 markers and 2 markers in them and clicking on the clusterer with 2 photos, it will dim the map and show 8 photos. This is wrong!

When I click on a cluster that have for example 8 photos, it will show 8 photos which is in that clusterer. If I click on a cluster that have 4 photos, it will show 4 photos which is in that clusterer. How can I accomplish this?

var markerCluster = new MarkerClusterer(gm_map, [], options_markerclusterer);

google.maps.event.addListener(markerCluster, 'clusterclick', function() {
    $('#toggle-photolist').fadeIn();
    $('#close-overlay').fadeIn();
    $('#view-multiblephotos').show();
    $('#view-singlephoto').hide();


    var array = [];
    var num = 0;
    for(i = 0; i < locations.length; i++) {
        num++;

        array.push(locations[i][0]);
    }

    $('#count-photos').text(num);
    $('#list-photos').html(array.join(''));
});

jsFiddle demo

Thanks in advance.

Answer 1

Thanks to my brother, I got this to work! Here's the working code (the code on jsFiddle has also been updated).

function initialize() {
    var marker, i;
    var clusterMarkers = [
        new google.maps.Marker({
            position: new google.maps.LatLng(59.381059,13.504026),
            map: gm_map,
            title:"P1220214 1.JPG"             
        }),

        new google.maps.Marker({
            position: new google.maps.LatLng(59.338683,13.492057),
            map: gm_map,
            title:"P1220214 2.JPG"             
        }),

        new google.maps.Marker({
            position: new google.maps.LatLng(59.340715,13.49631),
            map: gm_map,
            title:"P1220214 3.JPG"             
        }),

        new google.maps.Marker({
            position: new google.maps.LatLng(59.327232,13.487384),
            map: gm_map,
            title:"P1220214 4.JPG"             
        }),

        new google.maps.Marker({
            position: new google.maps.LatLng(59.379034,13.516566),
            map: gm_map,
            title:"P1220214 5.JPG"             
        }),

        new google.maps.Marker({
            position: new google.maps.LatLng(59.328631,13.485688),
            map: gm_map,
            title:"P1220214 6.JPG"             
        }),

        new google.maps.Marker({
            position: new google.maps.LatLng(59.328657,13.485591),
            map: gm_map,
            title:"P1220214 7.JPG"             
        }),

        new google.maps.Marker({
            position: new google.maps.LatLng(59.328501,13.485782),
            map: gm_map,
            title:"P1220214 8.JPG"             
        })
        ]

    var options_googlemaps = {
        minZoom: 4,
        maxZoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false
    }

    gm_map = new google.maps.Map(document.getElementById('google-maps'), options_googlemaps);


    var options_markerclusterer = {
        gridSize: 20,
        maxZoom: 18,
        zoomOnClick: false
    };



    var markerCluster = new MarkerClusterer(gm_map, clusterMarkers, options_markerclusterer);

    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
        $('#toggle-photolist').fadeIn();
        $('#close-overlay').fadeIn();
        $('#view-multiblephotos').show();
        $('#view-singlephoto').hide();

        var markers = cluster.getMarkers();

        var array = [];
        var num = 0;

        for(i = 0; i < markers.length; i++) {

            num++;
            array.push(markers[i].getTitle() + '<br>');
        }

        $('#count-photos').text(num);
        $('#list-photos').show().html(array.join(''));

    });



    for(i = 0; i < clusterMarkers.length; i++) {
       var marker = clusterMarkers[i];

        google.maps.event.addListener(marker, 'click', (function(marker) {
            return function() {
                $('#toggle-photolist').fadeIn();
                $('#close-overlay').fadeIn();
                $('#view-multiblephotos').hide();
                $('#list-photos').hide();
                $('#view-singlephoto').show().html(marker.getTitle());
            }
        })(marker));

    }
}