Question

I’ve read the documentation, but my script skills aren’t great, so I’m struggling to implement clustering in my Google Map.

The code I have works fine – taking an array of locations and plotting them onto a map. However, I have several hundred points on the map now, so I need to crudely cluster these just so the map is cleaner. The code I have is like this:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/scripts/google-maps-marker-cluster.js"></script>

<script type="text/javascript">
    var infowindow = null;

    $(document).ready(function () { initialize(); });

    function initialize() {
        var centerMap = new google.maps.LatLng(54.5753459, -3.9550781);
        var myOptions = {
            zoom: 6,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        setMarkers(map, sites);
        infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });
        var markerCluster = new MarkerClusterer(map,sites);
    }

    var sites = [     
        ['AAA', 57.340558, -2.324553, 1, '<h2>Organisation AAA</h2><address>The address</address>'],
        ['ZZZ', 50.827138, -0.139432, 1, '<h2>Organisation ZZZ</h2><address>The address</address>']
    ];


    function setMarkers(map, markers) {
        var image = new google.maps.MarkerImage('/css/img/icon.png',
            new google.maps.Size(16, 16),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 32)
        );
        var shadow = new google.maps.MarkerImage('/css/img/shadow.png',
            new google.maps.Size(37, 14),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 32)
        );
        var shape = {
            coord: [1, 1, 1, 20, 18, 20, 18 , 1],
            type: 'poly'
        };

        for (var i = 0; i < markers.length; i++) {
            var sites = markers[i];
            var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                shape: shape,
                title: sites[0],
                zIndex: sites[3],
                html: sites[4]
            });
            var contentString = "Some content";

            google.maps.event.addListener(marker, "click", function () {
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        }
    }
</script>

<div id="map_canvas"></div>  

Can anyone tell me the simplest way to cluster these markers? I’ve tried moving the var markerCluster = new MarkerClusterer(map); line around in several places, but nothing works.

Thanks for any pointers…

Answer 1

Here’s how I’m doing it in a Rails project. It’s pretty similar to yours except I’m looping a Rails variable and assigning that to the javascript to build the markers array.

The biggest difference here is that my markers are being scoped inside my initialize function.

function initialize() {
  var latlng = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 8,
    center: latlng,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var map = new google.maps.Map(document.getElementById("map"),
      myOptions);

  var latlnglist = []
  var markers = []
  var infowindow = new google.maps.InfoWindow({
    content: "Loading..."
  })

  <% @map.each do |artwork| %>
    <% unless artwork.location.blank? %>
      latlnglist.push(artwork_lat_lng = new google.maps.LatLng (<%= artwork.lat %>, <%= artwork.lng %>))
      markers.push(marker = new google.maps.Marker({ 
        position: artwork_lat_lng,
        title: "<%=raw escape_javascript(artwork.title) %>",
        html: "<%=raw escape_javascript("#{link_to image_fu(artwork.image, '315x120>', :size => '315x120',  :alt => artwork.title), map_url(artwork)} <h4>#{artwork.page_title}</h4>") %>"
        }))

      google.maps.event.addListener(marker, 'click', function() {  
        infowindow.close();
        infowindow.setContent(this.html);
        infowindow.open(map, this);
      })
    <% end %>
  <% end %>

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

  var bounds = new google.maps.LatLngBounds();
  for (var i = 0, len = latlnglist.length; i < len; i++) {
    bounds.extend(latlnglist[i]);
  }
  map.fitBounds(bounds);      
}
google.maps.event.addDomListener(window, 'load', initialize);