Google Maps API v3: Group markers?

Question

I'm using Google Maps with API v3. I will add many markers, now got question, is there posibility to group markers? For example, by city? I'm using a small snippet to creating sidebar with markers buttons.

Here's the code:

/**  * map  */ var mapOpts = {   mapOpts: new google.maps.LatLng(60.28527,24.84864),   mapTypeId: google.maps.MapTypeId.ROADMAP,   scaleControl: true,   scrollwheel: false } var map = new google.maps.Map(document.getElementById("map"), mapOpts); //  We set zoom and center later by fitBounds()    /**  * makeMarker() ver 0.2  * creates Marker and InfoWindow on a Map() named 'map'  * creates sidebar row in a DIV 'sidebar'  * saves marker to markerArray and markerBounds  * @param options object for Marker, InfoWindow and SidebarItem  * @author Esa 2009  */ var infoWindow = new google.maps.InfoWindow(); var markerBounds = new google.maps.LatLngBounds(); var markerArray = [];  function makeMarker(options){   var pushPin = new google.maps.Marker({map:map});   pushPin.setOptions(options);   google.maps.event.addListener(pushPin, "click", function(){     infoWindow.setOptions(options);     infoWindow.open(map, pushPin);     if(this.sidebarButton)this.sidebarButton.button.focus();   });   var idleIcon = pushPin.getIcon();   if(options.sidebarItem){     pushPin.sidebarButton = new SidebarItem(pushPin, options);     pushPin.sidebarButton.addIn("sidebar");   }   markerBounds.extend(options.position);   markerArray.push(pushPin);   return pushPin; }  google.maps.event.addListener(map, "click", function(){   infoWindow.close(); });   /**  * Creates a sidebar item   * @constructor  * @author Esa 2009  * @param marker  * @param options object Supported properties: sidebarItem, sidebarItemClassName, sidebarItemWidth,  */ function SidebarItem(marker, opts){   var tag = opts.sidebarItemType || "button";   var row = document.createElement(tag);   row.innerHTML = opts.sidebarItem;   row.className = opts.sidebarItemClassName || "sidebar_item";     row.style.display = "block";   row.style.width = opts.sidebarItemWidth || "120px";   row.onclick = function(){     google.maps.event.trigger(marker, 'click');   }   row.onmouseover = function(){     google.maps.event.trigger(marker, 'mouseover');   }   row.onmouseout = function(){     google.maps.event.trigger(marker, 'mouseout');   }   this.button = row; } // adds a sidebar item to a <div> SidebarItem.prototype.addIn = function(block){   if(block && block.nodeType == 1)this.div = block;   else     this.div = document.getElementById(block)     || document.getElementById("sidebar")     || document.getElementsByTagName("body")[0];   this.div.appendChild(this.button); } // deletes a sidebar item SidebarItem.prototype.remove = function(){   if(!this.div) return false;   this.div.removeChild(this.button);   return true; }  /**  * markers and info window contents  */ makeMarker({   position: new google.maps.LatLng(60.28527,24.84864),   title: "Vantaankoski",   sidebarItem: "Vantaankoski",   content: "Vantaankoski" });    makeMarker({   position: new google.maps.LatLng(60.27805,24.85281),   title: "Martinlaakso",   sidebarItem: "Martinlaakso",   content: "Martinlaakso" });   makeMarker({   position: new google.maps.LatLng(60.27049,24.85366),   title: "Louhela",   sidebarItem: "Louhela",   content: "Louhela" });  makeMarker({   position: new google.maps.LatLng(60.26139,24.85478),   title: "Myyrmäki",   sidebarItem: "Myyrmäki",   content: "Myyrmäki" });    makeMarker({   position: new google.maps.LatLng(60.24929,24.86128),   title: "Malminkartano",   sidebarItem: "Malminkartano",   content: "Malminkartano" });   makeMarker({   position: new google.maps.LatLng(60.23963,24.87694),   title: "Kannelmäki",   sidebarItem: "Kannelmäki",   content: "Kannelmäki" });  makeMarker({   position: new google.maps.LatLng(60.23031,24.88353),   title: "Pohjois-Haaga",   sidebarItem: "Pohjois<br>Haaga",   content: "Pohjois-Haaga" });    makeMarker({   position: new google.maps.LatLng(60.21831,24.89354),   title: "Huopalahti",   sidebarItem: "Huopalahti",   content: "Huopalahti" });    makeMarker({   position: new google.maps.LatLng(60.20803,24.92039),   title: "Ilmala",   sidebarItem: "Ilmala",   content: "Ilmala" });     makeMarker({   position: new google.maps.LatLng(60.19899,24.93269),   title: "Pasila",   sidebarItem: "Pasila",   content: "Pasila" });   makeMarker({   position: new google.maps.LatLng(60.17295,24.93981),   title: "Helsinki",   sidebarItem: "Helsinki",   content: "Helsinki" });         /**  *   fit viewport to markers  */ map.fitBounds(markerBounds); 

Answer 1

Here's the v3 version:

Marker Clusterer

...The library creates and manages per-zoom-level clusters for large amounts of markers. This is a V3 implementation of the V2 MarkerClusterer.

Browse Released Versions or Development Versions...

Answer 2

Better yet, use MarkerClustererPlus. Many enhancements and it incorporates plenty of bug fixes for problems found in the original MarkerClusterer.