CODEWITHSUNDEEP
google-maps-api-3google-maps-markersmouseovermouseoutmarkerclusterer
johntrepreneur
johntrepreneur

Reputation: 4694

How come the mouseover and mouseout events for MarkerClustererPlus.js are not firing for my cluster?

The mouseover and mouseout events are not firing for the MarkerCluster class as per the MarkerClustererPlus documentation. I even tried stuffing it in the clusteringend event as I noticed you need to wait for this before doing anything else with the clusters, but no luck.

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(arrLocLatLng[0], arrLocLatLng[1]),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var arrMarkers = [
    new google.maps.Marker({
        position: new google.maps.LatLng(myLat1, myLng1)
    }),
    new google.maps.Marker({
        position: new google.maps.LatLng(myLat2, myLng2)
    })
];

var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, arrMarkers, mcOptions);

// need to wait for clusteringend, otherwise clusters may not be in DOM
google.maps.event.addListener(mc, 'clusteringend', function () {

    var arrClusters = mc.getClusters(); // will just be one

    // THIS IS NOT FIRING
    // Event name: mouseout
    // Event args: c:Cluster
    // Event Desc: This event is fired when the mouse moves out of a cluster marker.
    google.maps.event.addListener(arrClusters[0], 'mouseover', function ()
    {
        alert('mouseover event triggered on this particular cluster);
    });

    // ALSO NOT FIRING
    // Event name: mouseover
    // Event args: c:Cluster
    // Event Desc: This event is fired when the mouse moves over a cluster marker.
    google.maps.event.addListener(arrClusters[0], 'mouseout', function ()
    {
        alert('mouseout event triggered on this particular cluster);
    });
});

Upvotes: 2

Views: 3120

Answers (1)

johntrepreneur
johntrepreneur

Reputation: 4694

Found it. There's a bug in the markerclusterer.js file version 2.0.15 as of 1/29/13.

In the MarkerClusterer.js file (non-packed version), change this:

google.maps.event.addDomListener(this.div_, "mouseover", function () {
    var mc = cClusterIcon.cluster_.getMarkerClusterer();
    /**
     * This event is fired when the mouse moves over a cluster marker.
     * @name MarkerClusterer#mouseover
     * @param {Cluster} c The cluster that the mouse moved over.
     * @event
     */
    google.maps.event.trigger(mc, "mouseover", cClusterIcon.cluster_);
});

google.maps.event.addDomListener(this.div_, "mouseout", function () {
    var mc = cClusterIcon.cluster_.getMarkerClusterer();
    /**
     * This event is fired when the mouse moves out of a cluster marker.
     * @name MarkerClusterer#mouseout
     * @param {Cluster} c The cluster that the mouse moved out of.
     * @event
     */
    google.maps.event.trigger(mc, "mouseout", cClusterIcon.cluster_);
});

};

to this:

google.maps.event.addDomListener(this.div_, "mouseover", function () {
    var c = cClusterIcon.cluster_;
    /**
     * This event is fired when the mouse moves over a cluster marker.
     * @name MarkerClusterer#mouseover
     * @param {Cluster} c The cluster that the mouse moved over.
     * @event
     */
    google.maps.event.trigger(c, "mouseover", cClusterIcon.cluster_);
});

google.maps.event.addDomListener(this.div_, "mouseout", function () {
    var c = cClusterIcon.cluster_;
    /**
     * This event is fired when the mouse moves out of a cluster marker.
     * @name MarkerClusterer#mouseout
     * @param {Cluster} c The cluster that the mouse moved out of.
     * @event
     */
    google.maps.event.trigger(c, "mouseout", cClusterIcon.cluster_);
});

... and it will work.

Upvotes: 3

Related Questions