Markerclusterer Plus for google maps as a polymer web-component

Polymer, web-components
bower install google-map-markerclusterer



Port of Markerclusterer-Plus as a Web Component using Polymer.



Check it live.


Install the component using Bower:

$ bower install google-map-markerclusterer --save

Or download as ZIP.


  1. Import Web Components' polyfill:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  1. Import Custom Element:
<link rel="import" href="bower_components/google-map-markerclusterer/google-map-markerclusterer.html">
  1. Start using it!
<template is="dom-bind" id="app">
    <google-map-markerclusterer map="{{map}}"></google-map-markerclusterer>
    <google-map map="{{map}}"></google-map>


or using javascript:

var gmap = document.querySelector('google-map');
gmap.addEventListener('google-map-ready', function(e) {
  document.querySelector('google-map-markerclusterer').map =;


See the component page for more information.

##Custom markers

Instead of the default markers <google-map-marker> also custom markers can be used by implementing the behavior: Markerclusterer.GoogleMapOverlayViewMarkerBehavior

##Custom cluster markers

There are 2 ways to have custom cluster markers:

Using the styles attribute

Pass an array of objects to the styles property of the <google-map-markerclusterer>:

var styles = [{
    url: '',
    width: "30px",
    height: "27px",
    anchorText: ["-3px", "0px"],
    anchorIcon: ["27px", "28px"],
    textColor: '#ff00ff',
    textSize: "10px"
}, {
    url: '',
    width: "40px",
    height: "36px",
    anchorText: ["-4px", "0px"],
    anchorIcon: ["36px", "37px"],
    textColor: '#ff0000',
    textSize: "11px"
}, {
    url: '',
    width: "50px",
    height: "45px",
    anchorText: ["-5px", "0px"],
    anchorIcon: ["45px", "46px"],
    textColor: '#0000ff',
    textSize: "12px"
<google-map-markerclusterer styles="{{styles}}"></google-map-markerclusterer>

or using javascript:

var markerclusterer = document.querySelector("google-map-markerclusterer");
markerclusterer.styles = styles;

###Wrapping a custom element

If the use-case is more advanced than just what the styles attribute provides, it's possible to specify a custom element as a replacement for the default cluster marker. Create a custom element (i.e <my-element>) that implements the Markerclusterer.ClusterIconBehavior behavior and add it to the google-map-markerclusterer. Important: Make sure to add a cluster-icon classname to your custom cluster icon element.

   <my-element class="cluster-icon" />

The various customizations can be viewed on the demo page page.

Browser Support

IE Chrome Firefox Opera Safari
IE 10+ ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D


Check Release list.


MIT License © Ümit Seren