Google Maps MarkerClusterer Not Clustering

Question

Sorry, I've search high and low and can't seem to figure this one out. I have a map working fine, but I'm trying to add MarkerClusterer and markers aren't clustering. The locations in New Jersey should be in a cluster. Can anyone offer some hints?

This is my page: http://vbarbershop.com/location-finder/

I'm getting these javascript errors, which may be the cause? I'm somewhat unexperienced with Google Maps: Uncaught TypeError: undefined is not a function markerclusterer.js:660 Uncaught TypeError: undefined is not a function markerclusterer.js:660

This is my code:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" ></script>

<div id="mymap" style="width: 100%; height: 350px;"></div>

<script type="text/javascript">
    var infos = [];

    var locations = [               
          ['Bellingham Bakerview Square', 'http://vbarbershop.com/locations/bellingham-bakerview-square/', 48.790003, -122.494667, 4],
          ['River Oaks Houston', 'http://vbarbershop.com/locations/river-oaks-houston/', 29.753660, -95.410269, 4],
          ['Winston-Salem', 'http://vbarbershop.com/locations/winston-salem/', 36.090435, -80.286798, 4],
          ['Cary', 'http://vbarbershop.com/locations/cary/', 35.739575, -78.778319, 4],
          ['Jersey City', 'http://vbarbershop.com/locations/jersey-city/', 40.721704, -74.036919, 4],
          ['Hoboken', 'http://vbarbershop.com/locations/hoboken/', 40.750605, -74.027217, 4],
    ];

    var map = new google.maps.Map(document.getElementById('mymap'), {
      zoom: 4,
      center: new google.maps.LatLng(39.183608, -96.571669),
      scrollwheel: false,
      scaleControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var iconBase = 'http://vbarbershop.com/wp-content/themes/vbarbershop/library/images/';

    for (i = 0; i < locations.length; i++) {

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][2], locations[i][3]),
            draggable: false,
            icon: iconBase + 'ico-marker.png',
            map: map
        });

        var content = '<a href="' + locations[i][1] +  '" class="maplink">' + locations[i][0] + '</a>'

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

        google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
            return function() {
                /* close the previous info-window */
                closeInfos();
                infowindow.setContent(content);
                infowindow.open(map,marker);
                /* keep the handle, in order to close it on next click event */
                infos[0]=infowindow;
            };
        })(marker,content,infowindow)); 
    }

    function closeInfos(){
       if(infos.length > 0){
          /* detach the info-window from the marker ... undocumented in the API docs */
          infos[0].set('marker', null);
          /* and close it */
          infos[0].close();
          /* blank the array */
          infos.length = 0;
       }
    }

    var markerCluster = new MarkerClusterer(map, locations);

</script>

Thank you!

Answer 1

The MarkerClusterer manages an array of google.maps.Marker objects. The locations array is not the correct type.

Create an array of markers when you add them to the map, use that array as the argument to the MarkerClusterer constructor.

var map = new google.maps.Map(document.getElementById('mymap'), {
  zoom: 4,
  center: new google.maps.LatLng(39.183608, -96.571669),
  scrollwheel: false,
  scaleControl: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var iconBase = 'http://vbarbershop.com/wp-content/themes/vbarbershop/library/images/';

    var gmarkers = [];
for (i = 0; i < locations.length; i++) {

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
        draggable: false,
        icon: iconBase + 'ico-marker.png',
        map: map
    });

    var content = '<a href="' + locations[i][1] +  '" class="maplink">' + locations[i][0] + '</a>'

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

    google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
        return function() {
            /* close the previous info-window */
            closeInfos();
            infowindow.setContent(content);
            infowindow.open(map,marker);
            /* keep the handle, in order to close it on next click event */
            infos[0]=infowindow;
        };
    })(marker,content,infowindow));
    gmarkers.push(marker);
}

function closeInfos(){
   if(infos.length > 0){
      /* detach the info-window from the marker ... undocumented in the API docs */
      infos[0].set('marker', null);
      /* and close it */
      infos[0].close();
      /* blank the array */
      infos.length = 0;
   }
}

var markerCluster = new MarkerClusterer(map, gmarkers);

working fiddle