Adding a simple cluster marker to a google map

Question

I am having problems adding marker cluster functionality to my map. I want to use a custom icon for my markers, and each marker has its own info window that I want to edit.

I did this, but now I have problems adding cluster marker library functions. I read something about adding markers to an array, but I'm not sure what that would exactly mean. In addition, all the examples with the array that I found do not have info windows and code search, I did not find a suitable 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> 

Answer 1

Here is a working jsfiddle demo

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

When they say add a marker to the constructor by providing an array of markers, it will look like 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, as shown below:

 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 a link to MarkerClusterer and Simple Examples

Based on the code snippet, you would like 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 do not create your creators correctly by calling all your markers the same var marker , so that you actually create three markers, and it is overwritten when you save it in the var mark every time. So I continued and renamed the markers. Then I created an array to store them and moved on to MarkerClusterer.

UPDATE : you did not return the marker to your createMarker function, and then the cluster did not put:

 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; }