...depending on where I put the line

var mc = new markerclusterer(map);

If it goes where the examples seem to suggest - right after "var map" is introduced - all the markers disappear (example running here).

A version without the mc variable runs with all markers visible.

When the mc variable is introduced after the google.maps.event.addListener function as shown here, it seems also to cancel its effect and markers are shown.

The locations variable is an array containing geolocation data and ready-formatted HTML (produced in a spreadsheet) for all points on the map, which is passed to the markers to place them.

I think the issue may be that to be used with the markerclusterer the array is referring to the geolocation data, when it should refer to markers? I've seen other people using a variable markerarray, but I'm worried if I mess with it I'll break the html and geolocation extraction part of the code.

Can anyone help explain why var mc is failing? I've loaded .js in the header, so it should work and I can't see any syntax errors in my code.

This is the first thing I've made with JS and it's great but I just want to finish it off with the marker clusters now ! Help would be much appreciated.

EDIT: I also tried playing with this but like I say the array here is two-fold to my understanding, so I couldn't get it to work:

The suggestion:

...
var infowindow = new google.maps.InfoWindow();

var marker, i;
map.markers = []; // ADD THIS LINE
for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
    });
    map.markers.push(marker); // ADD THIS LINE
...

Snippet of my code:

...
var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
...

...depending on where I put the line

var mc = new markerclusterer(map);

If it goes where the examples seem to suggest - right after "var map" is introduced - all the markers disappear (example running here).

A version without the mc variable runs with all markers visible.

When the mc variable is introduced after the google.maps.event.addListener function as shown here, it seems also to cancel its effect and markers are shown.

The locations variable is an array containing geolocation data and ready-formatted HTML (produced in a spreadsheet) for all points on the map, which is passed to the markers to place them.

I think the issue may be that to be used with the markerclusterer the array is referring to the geolocation data, when it should refer to markers? I've seen other people using a variable markerarray, but I'm worried if I mess with it I'll break the html and geolocation extraction part of the code.

Can anyone help explain why var mc is failing? I've loaded http://google-maps-utility-library-v3.googlecode./svn/trunk/markerclusterer/src/markerclusterer.js in the header, so it should work and I can't see any syntax errors in my code.

This is the first thing I've made with JS and it's great but I just want to finish it off with the marker clusters now ! Help would be much appreciated.

EDIT: I also tried playing with this but like I say the array here is two-fold to my understanding, so I couldn't get it to work:

The suggestion:

...
var infowindow = new google.maps.InfoWindow();

var marker, i;
map.markers = []; // ADD THIS LINE
for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
    });
    map.markers.push(marker); // ADD THIS LINE
...

Snippet of my code:

...
var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
...

• javascript
• google-maps
• google-maps-api-3

• working example with MarkerClusterer, working example with MarkerClusterer (cluster markers from KML) – geocodezip Commented Sep 22, 2013 at 15:20

2 Answers 2

You have 2 problems.

1. you never add your markers to the MarkerClusterer

   var markers=[];
   for (var i = 0; i < locations.length; i++) {
     var marker = new google.maps.Marker({
       position: new google.maps.LatLng(locations[i][1], locations[i][2]),
       map: map
     });
   
     google.maps.event.addListener(marker, 'click', (function(marker, i) {
       return function() {
         infowindow.setContent(locations[i][0]);
         infowindow.open(map, marker);
       }
     })(marker, i));
     markers.push(marker);
   }
   var mc = new MarkerClusterer(map, markers);
   

2. markerclusterer has the incorrect case (javascript is case sensitive), it should be MarkerClusterer.

working example

markerclusterer is not the correct casing.

the object is "MarkerClusterer" JavaScript is case sensitive!

The samples also look slightly different then your code:

markerClusterer = new MarkerClusterer(map, markers, {
      maxZoom: zoom,
      gridSize: size,
      styles: styles[style]
    });

for example