Skip to content

timeu/google-map-markerclusterer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

<google-map-markerclusterer>

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

Markerclusterer-Plus

Demo

Check it live.

Install

Install the component using Bower:

$ bower install google-map-markerclusterer --save

Or download as ZIP.

Usage

  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">
  <template>
    <google-map-markerclusterer map="{{map}}"></google-map-markerclusterer>
    <google-map map="{{map}}"></google-map>
  </template>
</template>

<my-app></my-app>

or using javascript:

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

Options

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: '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. 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.

<google-map-markerclusterer>
   <my-element class="cluster-icon" />
</google-map-markerclusterer>

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

Versions & Branches

Polymer version Branch Release
1.x 1.x 1.x
2.x 2.x 2.x
3.x 3.x 3.x
lit-element master 4.x

Contributing

  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

History

Check Release list.

License

MIT License © Ümit Seren