markerclusterer info windows

Question

Let me say I am still fairly new to google maps and javascript. i\'ve been mixing together the google store locator tutorial with some other stuff. So far, I am using mark

Answer 1

Below is how I solved that with Google Maps API v3 and Marker Clusterer. I've also addes some offset for the infoWindow so that it doesn't open in the center of the cluster, but little bit above of it.

// Define map variables
var map = new google.maps.Map(document.getElementById('mymap', {
  zoom: 9,
  center: {lat: 50, lng: 10}
});
var infoWindow = new google.maps.InfoWindow();
var markerCluster = new MarkerClusterer(map, markers, {zoomOnClick: false});

// Add listener for clusterclick event
markerCluster.addListener('clusterclick', function(cluster) {
  // Optional: Set some offset for latitude,
  // so that the InfoWindow opens a bit above the cluster
  var offset = 0.1 / Math.pow(2, map.getZoom());
  infoWindow.setContent('<div>Some content</div>');
  infoWindow.setPosition({
    lat: cluster.center_.lat() * (1 + offset),
    lng: cluster.center_.lng()
  });
  infoWindow.open(map);
});

Answer 2

Raphael Isidro's solution didn't work for me. Oddly enough, the marker text was empty and it was being positioned at grid (0,0) of my screen.

This worked perfectly for me:

var markerCluster = new MarkerClusterer(map, my_markers ,{zoomOnClick: false});
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
  var content = '';
  // Convert lat/long from cluster object to a usable MVCObject
  var info = new google.maps.MVCObject;
  info.set('position', cluster.center_);
  iw.close();
  iw.setContent('<h1>Hi this is my Info Window</h1>');
  iw.open(map, info);
});

Working example here: See http://krisarnold.com/2010/10/15/adding-info-windows-to-map-clusters-with-google-maps-api-v3/

Answer 3

infoWindow.Open has two overloads

 infoWindow.Open(map, marker)
 infoWindow.Open(map)

Since you wanto to add it to a cluster (not a marker) you should use the second one

You must set the position getting the center of the cluster

google.maps.event.addListener(markerCluster, "mouseover", function (mCluster) {    
    infowindow.content += "<div>Something<\/div>";
    infowindow.setPosition(mCluster.getCenter());
    infowindow.open(map);
});

I know it works because I just did it

google maps api v3 + infoBubble in markerClusterer

Answer 4

you've got infowindow.open(map,marker); but I don't see where you create marker (apart from the local variable in your createMarkers function, which you can't really access at this point). Shouldn't that be infowindow.open(map,markerCluster);

Another suggestion. The second parameter is where the infowindow gets anchored to. However, you don't need it. When you create your infowindow, you can set a position property (i.e. use the same lat/lng as the marker has). Then you can just call infowindow.open(map);