Reputation: 465
I just looked at the following post: markerclusterer info windows
There's a thing I need in this post, the mouseover event for the markerclusterer. I need to change the icon when the mouse is hovered over the icon.
I got the following code:
var clusterOptions = {
zoomOnClick: false,
styles: [{
url: 'images/template/cluster.png',
height: 68,
width: 57,
textColor: '#FFF'
}]
}
var markerClusterer = new MarkerClusterer(map, markers, clusterOptions);
google.maps.event.addListener(markerClusterer, "mouseover", function(cluster) {
console.log('test');
});
// Listen for a cluster to be clicked
google.maps.event.addListener(markerClusterer, 'clusterclick', function(cluster) {
var markers = cluster.getMarkers();
var content = '';
$.each(markers, function () {
content += this.get('content');
});
// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
var infowindow = new google.maps.InfoWindow();
infowindow.close();
infowindow.setContent(content);
infowindow.open(map, info);
});
The clusterer works fine and also the infowindow shows up nice. It combines all the infowindows from the markers in the cluster.
What am I doing wrong in the mouseover event? I don't even see the console.log!
Thanks in advance
Upvotes: 3
Views: 7026
Reputation:
My solution was using markerclustererplus rather than markerclusterer.
Just replace your script src
.
Here is an example.
Upvotes: 4
Reputation: 10305
You should use the following library:
https://github.com/googlemaps/v3-utility-library/tree/master/markerclustererplus
it has mouseover handlers http://htmlpreview.github.io/?https://github.com/googlemaps/v3-utility-library/blob/master/markerclustererplus/docs/reference.html
Upvotes: 0