CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-markers
Vishwanath
Vishwanath

Reputation: 6004

infoWindow on MarkerClusterer in google maps

I need infoWindow to be opened instead of zooming in map, when clicking on the ClusterMarker. I am using Gmaps util library MarkerClusterer for creating cluster of markers. I tried changing following line in markerclusterer.js 

ClusterMarker_.prototype = new GOverlay();

with

ClusterMarker_.prototype = new GMarker();

so that I can get the openInfoWindow() function in the clustermarker, but that didnt worked out. Got some error. If possible, Please suggest solution so that this can be done with MarkerClusterer. Or else any other library which will be able to do this. Any help will be appreciated.

Upvotes: 1

Views: 5138

Answers (2)

Raphael Isidro
Raphael Isidro

Reputation: 932

For MarkerCluster v3 there is a custom event named 'clusterclick', which return the markerCluster object, then you can get its center and assign it to an infoWindow, something like this:

google.maps.event.addListener(mc, 'clusterclick', function (mCluster) {
     //infowindow must be declared before in your code
     infowindow.setContent("your info");
     var myLatlng = new google.maps.LatLng(mCluster.getCenter().ya, mCluster.getCenter().za);
     infowindow.setPosition(myLatlng);
     infowindow.open(map);
});

Also you have to set the zoomOnClick option on false:

var mcoptions = { zoomOnClick: false, showText: true, averageCenter: true}
var mc = new MarkerClusterer(map, markersArray, mcoptions);

Upvotes: 6

Mark
Mark

Reputation: 5609

You are probably better off modifying the click event for the marker in markerclusterer.js starting on line 672.

Currently:

  GEvent.addDomListener(div, "click", function () {
    var pos = map.fromLatLngToDivPixel(latlng);
    var sw = new GPoint(pos.x - padding, pos.y + padding);
    sw = map.fromDivPixelToLatLng(sw);
    var ne = new GPoint(pos.x + padding, pos.y - padding);
    ne = map.fromDivPixelToLatLng(ne);
    var zoom = map.getBoundsZoomLevel(new GLatLngBounds(sw, ne), map.getSize());
    map.setCenter(latlng, zoom);
  });

Change to something like:

  GEvent.addDomListener(div, "click", function () {
    map.openInfoWindowHtml(latlng, "Put your infowindow content here");
  });

Obviously, depending on how much you want to abstract things, you could do a couple of things:

  • Add configuration options to MarkerClusterer to specify whether to do zoom in functionality or infowindow functionality
  • Define a callback function setup where you specify what function MarkerClusterer will call when a cluster is clicked.

Upvotes: 1

Related Questions