DevelopmentWeb

gmap3 – getting markers that are inside clusters

By September 4, 2013 No Comments

We’ve used the jQuery plugin gmap3 for a few projects here at CookiesHQ.  While it is useful as a wrapper to the Google Maps API,  it also adds some of it’s own features.

I couldn’t find a clear explanation of events for clusters in the gmap3 documentation and as it isn’t a feature of Google Maps there isn’t anything in the API docs either.  Thought I’d make this post to clarify a few things and show what you can (and can’t) do with clusters.

Firstly, a cluster can take the same options and events that a marker can.  Meaning you can bind to any of the events you can see on the Google Maps API.  To do this add an events hash to your cluster definition like so.

$('#map').gmap3({
  marker:{
    values: list,
    cluster:{
      radius: 40, 
      // This style will be used for clusters with more than 0 markers
      0: {
        content: '<div class="cluster cluster-1">CLUSTER_COUNT</div>',
        width: 53,
        height: 52
      },
      events: {
        click: clickOnCluster,
        rightclick: function(overlay, event, context){ doSomething }
      }
    }
  }
});

Your function is passed 3 arguments.  In the above example, event contains information about the trigger event, useful if you want to know the position of the mouse on the screen etc.  What’s probably more useful to you is the 3rd arg, context.  This contains the latitude/longitude of the cluster as well as all the markers inside the cluster, respectively: context.data.latLng and context.data.markers.

This allows us to display information about the markers inside the cluster, perhaps a preview on mouseover or an info window on click.

function clickOnCluster(overlay, event, context) {
  $(this).gmap3({
    infowindow:{
      latLng: context.data.latLng,
      options:{
        content: $.map(context.data.markers, function(marker){return marker.tag}).join("<br>")
      }
    }
  });
}

This example takes all of the markers tags (a custom attribute that’s set when you make a marker) and puts them into an info window.

You can see an example of this here and the the full code is on github.

What you can’t do is customise the cluster marker depending on what markers are inside of it.. yet.  I’m toying with a fork of gmap3 that will let you provide a function when defining the clusters content.  This will be given the cluster (and markers) so you can build the html depending on that.