Marker detached from cluster does not fire click event in MarkerClustererPlus

StackOverflow https://stackoverflow.com/questions/23152836

Question

Markers that become detached from a cluster after zooming in are not always firing the click event.

This is the code I've been using:

<html>
<head>
    <style>
        #map {
            width: 500px;
            height: 400px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZWqW7aJrwxQ4MeN10zXxap5a3lHl4iAI&sensor=true"></script>
    <script src="https://google-maps-utility-library-v3.googlecode.com/svn-history/r354/trunk/markerclustererplus/src/markerclusterer_packed.js"></script>
    <script>
        jQuery(document).ready(function () {
            var map;
            var locations = [
                {
                    'lat': 51.3333,
                    'lng': 3.2833
                },
                {
                    'lat': 51.209348,
                    'lng': 3.2246995000000425
                },
                {
                    'lat': 51.209348,
                    'lng': 3.2246995000000425
                },
                {
                    'lat': 51.2070168,
                    'lng': 3.222604400000023
                }
            ];
            var centerPosition = new google.maps.LatLng(50.944282, 3.647766);
            var markers = [];

            var options = {
                zoom: 5,
                center: centerPosition,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map($('#map')[0], options);

            for (loc in locations) {
                var latLng = new google.maps.LatLng(locations[loc].lat, locations[loc].lng);
                var marker = new google.maps.Marker({
                    position: latLng
                });
                markers.push(marker);
            }
            var markerCluster = new MarkerClusterer(map, markers, {
                averageCenter: true
            });

            google.maps.event.addListener(markerCluster, "click", function (cluster) {
                console.log("Cluster click");
            });

            google.maps.event.addListener(marker, "click", function (cluster) {
                console.log("Marker click");
            });

        });
    </script>
</head>
<body>
<div id="map">

</div>
</body>
</html>

Now click on the cluster (containing 4 markers). The map will be zoomed in, and you'll now see a cluster of 3 and a single marker. Clicking on the single marker doesn't do anything (event is not fired).

But!

Click on the cluster of 3, and the map will be zoomed in even further. Now there is a cluster of 2 and again a detached marker. Clicking on that marker will fire the click event.

Is this a bug, or is there something wrong with my setup?

You can find the jsfiddle here.

Was it helpful?

Solution

You created marker event listener

        google.maps.event.addListener(marker, "click", function (cluster) {
            console.log("Marker click");
        });

outside of for loop. So, the last marker created has event listener, others no.

This should work:

        for (loc in locations) {
            var latLng = new google.maps.LatLng(locations[loc].lat, locations[loc].lng);
            var marker = new google.maps.Marker({
                position: latLng
            });
            markers.push(marker);

            google.maps.event.addListener(marker, "click", function (cluster) {
                console.log("Marker click");
            });
        }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top