how to simulate the user clicking on a google maps cluster that contains a specific marker

Question

I got an app where a user searches for property listings present around a certain address, and the result is rendered as

1. markers on a map, some will be clustered
2. a div that contains the search results in a list format..

there isn't a 1:1 relationship between each individual listing in the div and the markers.. b/c some of the markers are included within a cluster.

the use case i'm trying to implement is the user clicking on a listing on the div, which would then automatically

• pan the map over to the listing
• show an info box for the listing.

this works fine for markers that already exist . However for markers that are hidden behind a cluster.. this doesn't work.

I tried setting an event listener for when the map zooms like so:

google.maps.event.addListener(map, 'zoom_changed', function() {
   // assume that the the cluster broke up and the marker got rendered by now
   ..
});

but this didn't work..this could also be due to the fact that the zoom level isn't enough to break up a cluster.. but in that case how can i determine what that level is? what i'm basically trying to do is simulate a user clicking on a cluster that the listing they're interested in belongs to, which would result in the cluster breaking up, the map zooming in, and the marker showing up.

Answer 1

I'm doing something similar. I display a table and when a row is clicked on the map pans to the matching marker. I would suggest that you employ the clusteroptions attribute on your markers directive. Mine looks like this:

 clusteroptions="{ averageCenter: true, minimumClusterSize: 8, gridSize: 30, maxZoom: 14 }

Then when you click on a row:

        $scope.zoomToSelectedOrder = function(orderNumber) {
        var matchingMarker = $scope.filteredMarkers.filter(function(matchingMarker) {
            return matchingMarker.orderNumber === orderNumber;
        })[0];

        $scope.map.center = { latitude: matchingMarker.latitude, longitude: matchingMarker.longitude };
        $scope.map.zoom = 22;
    };

by setting the maps zoom to 22 (any number higher than the maxZoom of the clusteroptions) you would ensure that the clusters are broken up.

Here is an example showing the 0th array element of some randomly generated markers being zoomed to and its window being shown when a button is clicked:

http://plnkr.co/edit/PkHAP9m3UAoiQE422jUo?p=preview