<google-map-markerclusterer>

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

Demo

Check it live.

Install

Install the component using Bower:

$ bower install google-map-markerclusterer --save

Or download as ZIP.

Usage

Import Web Components' polyfill:

<script src="bower_components/platform/platform.js"></script>

Import Custom Element:

<link rel="import" href="bower_components/google-map-markerclusterer/google-map-markerclusterer.html">

Start using it!

<polymer-element name="my-app">
  <template>
    <google-map-markerclusterer map="{{map}}"></google-map-markerclusterer>
    <google-map map="{{map}}"></google-map>
  </template>
</polymer-element>

<my-app></my-app>

or using javascript:

var gmap = document.querySelector('google-map');
gmap.addEventListener('api-load', function(e) {
  document.querySelector('google-map-markerclusterer').map = this.map;
});

Options

See the component page for more information.

Attribute	Options	Default	Description
`map`	google.maps.Map object	null	the google-maps object
`markers`	array (`<google-map-marker>` or `<google-map-overlayview-marker>`)	null	The markers to be clustered
`batchSize`	number	`2000`	BatchSize specifies the amount of markers that should be processed per run.
`ignoreHidden`	boolean	false	If set ignores hidden markers when creating the clusters.
`gridSize`	number	60	Specifies the size of the grid for each cluster in pixel.
`minimumClusterSize`	number	2	Sepcifies the minimum number of markers to show a cluster.
`averageCenter`	boolean	false	If set, the center of the cluster is set to the average of all locations of its containing markers.
`maxZoom`	number	null	Specifies the maximum zoom at which individual markers are shown.
`zoomOnClick`	boolean	true	If set, the map is zoomed far enough that all markers of the cluster fit inside the viewport.
`styles`	array of objects	null	Specifies the style (icon, offset) for the cluster markers.

Methods

Method	Parameters	Returns	Description
`clearMarkers()`	None.	Nothing.	Removes all clusters and markers from the map and also removes all markers managed by the clsuterer.

##Events

Event	Description
`clusteringbegin`	Triggers the google-map-markerclusterer begins clustering markers.
`clusterend`	Triggers when the google-map-markerclusterer stops clustering markers.
`clickcluster`	Triggers when a cluster is clicked.
`mouseovercluster`	Triggers when the mouse moves over a cluster.
`mouseoutcluster`	Triggers when the mouse moves out of a cluster.

##Custom markers

Instead of the default markers <google-map-marker> also custom markers can be used bei either

extending <google-map-overlayview-marker>
wrapping a custom-element (i.e <my-element> inside of a <google-map-overlayview-marker>)

See demo page for an example.

##Custom cluster markers

There are 2 ways to have custom cluster markers:

Using the styles attribute

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

var styles = [{
    url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/images/conv30.png',
    width: "30px",
    height: "27px",
    anchorText: ["-3px", "0px"],
    anchorIcon: ["27px", "28px"],
    textColor: '#ff00ff',
    textSize: "10px"
}, {
    url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/images/conv40.png',
    width: "40px",
    height: "36px",
    anchorText: ["-4px", "0px"],
    anchorIcon: ["36px", "37px"],
    textColor: '#ff0000',
    textSize: "11px"
}, {
    url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/images/conv50.png',
    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. There are two ways to do that:

extend <google-map-clustericon> element
wrapping a custom-element (i.e <my-element> inside of a <google-map-clustericon>)

<google-map-markerclusterer>
   <google-map-clustericon>
       <my-element />
   </google-map-clustericon>
</google-map-markerclusterer>

There is an example on the demo page.

Browser Support


IE 10+ ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Contributing

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

History

Check Release list.

itsNikolay / google-map-markerclusterer