Adding simple marker clusterer to google map

Question

I'm having problems with adding marker clusterer functionality to my map. What I want is to use custom icon for my markers and every marker has its own info window which I want to be able to edit.

I did accomplish that, but now I have problems adding marker clusterer library functionality. I read something about adding markers to array, but I'm not sure what would it exactly mean. Besides, all of the examples with array I have found, don't have info windows and searching through the code I didn't find appropriate way to add them.

Here is my code (mostly from Geocodezip.com):

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
    <style type="text/css">
    html, body { height: 100%; } 
    </style>
<script type="text/javascript"> 
//<![CDATA[
var map = null;
function initialize() {
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(43.907787,-79.359741),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, [], mcOptions);

      google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
            });

      // Add markers to the map
      // Set up three markers with info windows 

          var point = new google.maps.LatLng(43.65654,-79.90138); 
          var marker1 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.91892,-78.89231);
          var marker2 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.82589,-79.10040);
          var marker3 = createMarker(point,'Abc');

          var markerArray = new Array(marker1, marker2, marker3);
          mc.addMarkers(markerArray, true);


}

var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

function createMarker(latlng, html) {
    var image = '/321.png';
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: image,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
}

//]]>
</script> 

Solution

Here is the working jsfiddle demo

Once you create a marker cluster, you will want to add markers to it. MarkerClusterer supports adding markers using the addMarker() and addMarkers() method or by providing a array of markers to the constructor:

When they say add marker to constructor by providing a array of markers it's similar to doing this:

var markers = [];  //create a global array where you store your markers
for (var i = 0; i < 100; i++) {
  var latLng = new google.maps.LatLng(data.photos[i].latitude,
      data.photos[i].longitude);
  var marker = new google.maps.Marker({'position': latLng});
  markers.push(marker);  //push individual marker onto global array
}
var markerCluster = new MarkerClusterer(map, markers);  //create clusterer and push the global array of markers into it.

To add it using addMarker() you basically add it to the cluster like the following:

var markerCluster //cluster object created on global scope

//do your marker creation and add it like this:
markerCluster.addMarker(newMarker, true); //if specify true it'll redraw the map

or if you want to add an array:

var markerCLuster //cluster object created on global scope

//do your marker creation and push onto array of markers:
markerCluster.addMarkers(newMarkers, true); //if specify true it'll redraw the map

Here is the reference to MarkerClusterer and Simple Examples

Based on snippet of your code you would want to do something like this:

    var mcOptions = {gridSize: 50, maxZoom: 15};
     var mc = new MarkerClusterer(map, [], mcOptions);

      google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
            });

      // Add markers to the map
      // Set up three markers with info windows 

          var point = new google.maps.LatLng(43.65654,-79.90138); 
          var marker1 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.91892,-78.89231);
          var marker2 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.82589,-79.10040);
          var marker3 = createMarker(point,'Abc');

          var markerArray = new Array(marker1, marker2, marker3);
          mc.addMarkers(markerArray, true);

You aren't creating your makers correctly by naming all your marker to the same var marker so you are actually creating three markers and it gets over written when you store it in the var marker every time. So i went on and rename your markers. I then created an array to store them and pass on to the MarkerClusterer.

UPDATE: to your createMarker function, you didn't return the marker and then, there's no marker to cluster:

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

    return marker;
}

Comments

[take2]

@kjy112 Thank you for your answer. I changed my code as you recommended, but still there are only 3 custom icons visible. When I zoom out, nothing changes, there is no cluster icon. I updated my question with current code.

[KJYe.Name]

@take2 how are you setting the cluster?

[take2]

@kjy112 I'm not sure what you mean. With var mcOptions = {gridSize: 50, maxZoom: 15}; var mc = new MarkerClusterer(map, [], mcOptions); var markerArray = new Array(marker1, marker2, marker3); mc.addMarkers(markerArray, true);

[KJYe.Name]

@take2 there's an issue with your creatMarker function...no marker was returned. i got it to work please take a look at my jsfiddle and also the answer. please upvote and accept the answer if it answers your question please.

[take2]

@kjy112 Ok, but I can't find a link to your jsfiddle. Can you paste it here?

[take2]

@kjy112 When I'm looking at that example, only markers are displayed. When zooming out it doesn't turn into cluster icon with number 3 inside of it.

[KJYe.Name]

@take2 because you aren't zooming out enough, and cluster is based off distance between two points i believe.

[take2]

@kjy112 I zoomed out as far as it's possible :) I don't get it how it's visible to you and not for me. I'm using Firefox 3.6.15 if that has anything to do with it.

[KJYe.Name]

@take2 hehehe i know why. you don't have firebug enabled, and i have console.log in the script try this link now jsfiddle.net/rD8U6/6

[take2]

@kjy112 Sry for waiting, I was away for a while. Yes, it works now, thank you! I marked this as a correct answer, but can't upvote it, since I don't have enought reputation. I have 2 additional questions: What does this part mean: "zIndex: Math.round(latlng.lat() * -100000) << 5" and how to determine when will I see final markers (how much do I have to zoom in to see 'ordinary' markers)?

[KJYe.Name]

@take2 actually i know it's setting zindex which is the parameter use to treat overlapping markers, but not sure exactly what it does. i thinke the zoom is based off var mcOptions = {gridSize: 50, maxZoom: 15};. these are really good questions you should post it

[KJYe.Name]

@take2 actually zIndex: Math.round(latlng.lat()*-10000) << 5 is a bitshift operation: Shifts a in binary representation b (< 32) bits to the left, shifting in zeros from the right.

[take2]

@kjy112 Yes, gridSize determines grouping of markers. If you increase it, there will be less cluster icons displayed (markers from the larger area are grouped together). If you decrease it, there are more cluster icons, obviously. Is there a way to avoid naming every marker in markerArray? I have this situation "var markerArray = new Array(marker1, marker2, marker3, marker4, marker5, marker6, marker7, marker8, marker9, marker10, marker11, marker12...);" There will be hundreds of them. Can I tell Maps to use markers 1-100 for that array or something similar?

[KJYe.Name]

@take2 you should create another question =P. but yes, you can either do markers 1-100 with a forloop OR you can just push it onto the global markerArray within createMarker and just use local scope's var marker i prefer later because it's cleaner coding and more readable

[take2]

@kjy112 I created a new question here: stackoverflow.com/questions/5266352/… I tried with your suggestions, but it's obviously beyond my knowledge of Javascript and Google Maps API :)

[Mohit Bumb]

Thanks Man I'm searching this from an hour

[KJYe.Name]

@NowI'monFBalso np hope this helps