title: Google Maps API v3: Group markers?
body: <p>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.</p>
  
  <p>Here's the code:</p>
  
  <pre><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 &lt;div&gt;
  SidebarItem.prototype.addIn = function(block){
    if(block &amp;&amp; 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&lt;br&gt;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);
  </code></pre>