├── .gitignore
├── LICENSE
├── README.md
├── analysis.json
├── bower.json
├── demo
    ├── data.json
    ├── index.html
    ├── markerclusterer-container.html
    ├── my-css-pie.html
    ├── my-custom-clustericon.html
    ├── my-custom-marker.html
    └── simple.html
├── google-map-defaulticon.html
├── google-map-markercluster-icon-behavior.html
├── google-map-markercluster.html
├── google-map-markerclusterer.html
├── google-map-overlayview-behavior.html
├── google-map-overlayview-marker-behavior.html
├── google-map-overlayview.html
├── index.html
├── preview.gif
└── preview.png


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License
 2 | 
 3 | Copyright (c) 2010-2016 Google, Inc. http://angularjs.org
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # <google-map-markerclusterer>
  2 | 
  3 | > Port of [Markerclusterer-Plus](http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/docs/reference.html) as a Web Component using Polymer.
  4 | 
  5 | ![Markerclusterer-Plus](https://raw.githubusercontent.com/timeu/google-map-markerclusterer/master/preview.gif "google-map-markerclusterer")
  6 | 
  7 | ## Demo
  8 | > [Check it live](http://timeu.github.io/google-map-markerclusterer/components/google-map-markerclusterer/demo/index.html).
  9 | 
 10 | ## Install
 11 | 
 12 | Install the component using [Bower](http://bower.io/):
 13 | 
 14 | ```sh
 15 | $ bower install google-map-markerclusterer --save
 16 | ```
 17 | 
 18 | Or [download as ZIP](https://github.com/timeu/google-map-markerclusterer/archive/master.zip).
 19 | 
 20 | ## Usage
 21 | 
 22 | 1. Import Web Components' polyfill:
 23 | 
 24 |   ```html
 25 | <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
 26 |   ```
 27 | 
 28 | 2. Import Custom Element:
 29 | 
 30 |   ```html
 31 | <link rel="import" href="bower_components/google-map-markerclusterer/google-map-markerclusterer.html">
 32 |   ```
 33 | 
 34 | 3. Start using it!
 35 | 
 36 |   ```html
 37 |   <template is="dom-bind" id="app">
 38 |     <template>
 39 |       <google-map-markerclusterer map="{{map}}"></google-map-markerclusterer>
 40 |       <google-map map="{{map}}"></google-map>
 41 |     </template>
 42 |   </template>
 43 | 
 44 |   <my-app></my-app>
 45 |   ```
 46 | 
 47 |   or using javascript:
 48 | 
 49 |   ```javascript
 50 |   var gmap = document.querySelector('google-map');
 51 |   gmap.addEventListener('google-map-ready', function(e) {
 52 |     document.querySelector('google-map-markerclusterer').map = this.map;
 53 |   });
 54 |   ```
 55 | 
 56 | 
 57 | ## Options
 58 | 
 59 | See the [component page](http://timeu.github.io/google-map-markerclusterer) for more information.
 60 | 
 61 | 
 62 | ## Custom markers
 63 | 
 64 | Instead of the default markers `<google-map-marker>` also custom markers can be used by implementing the behavior: `Markerclusterer.GoogleMapOverlayViewMarkerBehavior`
 65 | 
 66 | ## Custom cluster markers
 67 | 
 68 | There are 2 ways to have custom cluster markers:
 69 | 
 70 | ### Using the styles attribute
 71 | 
 72 | Pass an array of objects to the styles property of the `<google-map-markerclusterer>`:
 73 | 
 74 | ```Javascript
 75 | var styles = [{
 76 |     url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/images/conv30.png',
 77 |     width: "30px",
 78 |     height: "27px",
 79 |     anchorText: ["-3px", "0px"],
 80 |     anchorIcon: ["27px", "28px"],
 81 |     textColor: '#ff00ff',
 82 |     textSize: "10px"
 83 | }, {
 84 |     url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/images/conv40.png',
 85 |     width: "40px",
 86 |     height: "36px",
 87 |     anchorText: ["-4px", "0px"],
 88 |     anchorIcon: ["36px", "37px"],
 89 |     textColor: '#ff0000',
 90 |     textSize: "11px"
 91 | }, {
 92 |     url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/images/conv50.png',
 93 |     width: "50px",
 94 |     height: "45px",
 95 |     anchorText: ["-5px", "0px"],
 96 |     anchorIcon: ["45px", "46px"],
 97 |     textColor: '#0000ff',
 98 |     textSize: "12px"
 99 | }]
100 | ```
101 | 
102 | ```Html
103 | <google-map-markerclusterer styles="{{styles}}"></google-map-markerclusterer>
104 | ```
105 | or using javascript:
106 | 
107 | ```Javascript
108 | var markerclusterer = document.querySelector("google-map-markerclusterer");
109 | markerclusterer.styles = styles;
110 | ```
111 | 
112 | ## Wrapping a custom element
113 | 
114 | 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`.
115 | **Important:** Make sure to add a *cluster-icon* classname to your custom cluster icon element.
116 | 
117 | 
118 | ```Html
119 | <google-map-markerclusterer>
120 |    <my-element class="cluster-icon" />
121 | </google-map-markerclusterer>
122 | ```
123 | 
124 | The various customizations can be viewed on the [demo page](http://timeu.github.io/google-map-markerclusterer/components/google-map-markerclusterer/demo/) page.
125 | 
126 | ## Versions & Branches
127 | 
128 | | Polymer version | Branch | Release |
129 | |  :----   |  :----  | :---     |
130 | |  1.x    |  [1.x](https://github.com/timeu/google-map-markerclusterer/tree/1.x) | 1.x |
131 | |  2.x    |  [2.x](https://github.com/timeu/google-map-markerclusterer/tree/2.x) | 2.x |
132 | |  3.x    |  [3.x](https://github.com/timeu/google-map-markerclusterer/tree/3.x) | 3.x |
133 | |  lit-element | [master](https://github.com/timeu/google-map-markerclusterer/tree/master) | 4.x|
134 | 
135 | ## Contributing
136 | 
137 | 1. Fork it!
138 | 2. Create your feature branch: `git checkout -b my-new-feature`
139 | 3. Commit your changes: `git commit -m 'Add some feature'`
140 | 4. Push to the branch: `git push origin my-new-feature`
141 | 5. Submit a pull request :D
142 | 
143 | ## History
144 | 
145 | Check [Release](https://github.com/timeu/google-map-markerclusterer/releases) list.
146 | 
147 | ## License
148 | 
149 | [MIT License](http://timeu.mit-license.org/) © Ümit Seren
150 | 


--------------------------------------------------------------------------------
/analysis.json:
--------------------------------------------------------------------------------
   1 | {
   2 |   "schema_version": "1.0.0",
   3 |   "elements": [
   4 |     {
   5 |       "description": "The `google-map-markercluster` is an internal element that is used by `google-map-markerclusterer`. By default it wraps a `<google-map-defaulticon>` element",
   6 |       "summary": "",
   7 |       "path": "google-map-markercluster.html",
   8 |       "properties": [
   9 |         {
  10 |           "name": "center",
  11 |           "type": "Object | null | undefined",
  12 |           "description": "The center position of the cluster element (lat,lon)",
  13 |           "privacy": "public",
  14 |           "sourceRange": {
  15 |             "start": {
  16 |               "line": 47,
  17 |               "column": 10
  18 |             },
  19 |             "end": {
  20 |               "line": 51,
  21 |               "column": 11
  22 |             }
  23 |           },
  24 |           "metadata": {
  25 |             "polymer": {
  26 |               "notify": true,
  27 |               "attributeType": "Object"
  28 |             }
  29 |           },
  30 |           "defaultValue": "null"
  31 |         },
  32 |         {
  33 |           "name": "hidden",
  34 |           "type": "boolean | null | undefined",
  35 |           "description": "When set the cluster icon is hidden",
  36 |           "privacy": "public",
  37 |           "sourceRange": {
  38 |             "start": {
  39 |               "line": 55,
  40 |               "column": 10
  41 |             },
  42 |             "end": {
  43 |               "line": 58,
  44 |               "column": 11
  45 |             }
  46 |           },
  47 |           "metadata": {
  48 |             "polymer": {
  49 |               "attributeType": "Boolean"
  50 |             }
  51 |           },
  52 |           "defaultValue": "false"
  53 |         }
  54 |       ],
  55 |       "methods": [
  56 |         {
  57 |           "name": "connectedCallback",
  58 |           "description": "",
  59 |           "privacy": "public",
  60 |           "sourceRange": {
  61 |             "start": {
  62 |               "line": 62,
  63 |               "column": 6
  64 |             },
  65 |             "end": {
  66 |               "line": 66,
  67 |               "column": 7
  68 |             }
  69 |           },
  70 |           "metadata": {},
  71 |           "params": [],
  72 |           "return": {
  73 |             "type": "void"
  74 |           }
  75 |         },
  76 |         {
  77 |           "name": "_initClusterSubIcon",
  78 |           "description": "",
  79 |           "privacy": "protected",
  80 |           "sourceRange": {
  81 |             "start": {
  82 |               "line": 68,
  83 |               "column": 6
  84 |             },
  85 |             "end": {
  86 |               "line": 74,
  87 |               "column": 7
  88 |             }
  89 |           },
  90 |           "metadata": {},
  91 |           "params": [],
  92 |           "return": {
  93 |             "type": "void"
  94 |           }
  95 |         },
  96 |         {
  97 |           "name": "disconnectedCallback",
  98 |           "description": "",
  99 |           "privacy": "public",
 100 |           "sourceRange": {
 101 |             "start": {
 102 |               "line": 76,
 103 |               "column": 6
 104 |             },
 105 |             "end": {
 106 |               "line": 78,
 107 |               "column": 7
 108 |             }
 109 |           },
 110 |           "metadata": {},
 111 |           "params": [],
 112 |           "return": {
 113 |             "type": "void"
 114 |           }
 115 |         },
 116 |         {
 117 |           "name": "draw",
 118 |           "description": "draw callback when the cluster is drawn.",
 119 |           "privacy": "public",
 120 |           "sourceRange": {
 121 |             "start": {
 122 |               "line": 83,
 123 |               "column": 6
 124 |             },
 125 |             "end": {
 126 |               "line": 89,
 127 |               "column": 7
 128 |             }
 129 |           },
 130 |           "metadata": {},
 131 |           "params": [],
 132 |           "return": {
 133 |             "type": "void"
 134 |           }
 135 |         },
 136 |         {
 137 |           "name": "_updateIcon",
 138 |           "description": "Update the icon when a marker is added",
 139 |           "privacy": "protected",
 140 |           "sourceRange": {
 141 |             "start": {
 142 |               "line": 94,
 143 |               "column": 6
 144 |             },
 145 |             "end": {
 146 |               "line": 110,
 147 |               "column": 7
 148 |             }
 149 |           },
 150 |           "metadata": {},
 151 |           "params": [],
 152 |           "return": {
 153 |             "type": "void"
 154 |           }
 155 |         },
 156 |         {
 157 |           "name": "_isMarkerAlreadyAdded",
 158 |           "description": "Check if the marker was already added",
 159 |           "privacy": "protected",
 160 |           "sourceRange": {
 161 |             "start": {
 162 |               "line": 115,
 163 |               "column": 6
 164 |             },
 165 |             "end": {
 166 |               "line": 127,
 167 |               "column": 7
 168 |             }
 169 |           },
 170 |           "metadata": {},
 171 |           "params": [
 172 |             {
 173 |               "name": "marker"
 174 |             }
 175 |           ]
 176 |         },
 177 |         {
 178 |           "name": "_calculateBounds",
 179 |           "description": "Calculates the extended bounds that is given by the contained markers.",
 180 |           "privacy": "protected",
 181 |           "sourceRange": {
 182 |             "start": {
 183 |               "line": 132,
 184 |               "column": 6
 185 |             },
 186 |             "end": {
 187 |               "line": 135,
 188 |               "column": 7
 189 |             }
 190 |           },
 191 |           "metadata": {},
 192 |           "params": [],
 193 |           "return": {
 194 |             "type": "void"
 195 |           }
 196 |         },
 197 |         {
 198 |           "name": "isMarkerInClusterBounds",
 199 |           "description": "Check if marker is inside the extended bounds.",
 200 |           "privacy": "public",
 201 |           "sourceRange": {
 202 |             "start": {
 203 |               "line": 140,
 204 |               "column": 6
 205 |             },
 206 |             "end": {
 207 |               "line": 142,
 208 |               "column": 7
 209 |             }
 210 |           },
 211 |           "metadata": {},
 212 |           "params": [
 213 |             {
 214 |               "name": "marker"
 215 |             }
 216 |           ]
 217 |         },
 218 |         {
 219 |           "name": "_getBounds",
 220 |           "description": "Calculates the bounds that is given by the contained markers.",
 221 |           "privacy": "protected",
 222 |           "sourceRange": {
 223 |             "start": {
 224 |               "line": 147,
 225 |               "column": 6
 226 |             },
 227 |             "end": {
 228 |               "line": 154,
 229 |               "column": 7
 230 |             }
 231 |           },
 232 |           "metadata": {},
 233 |           "params": []
 234 |         },
 235 |         {
 236 |           "name": "addMarker",
 237 |           "description": "Adds a marker to the cluster and updates the cluster icon",
 238 |           "privacy": "public",
 239 |           "sourceRange": {
 240 |             "start": {
 241 |               "line": 159,
 242 |               "column": 6
 243 |             },
 244 |             "end": {
 245 |               "line": 204,
 246 |               "column": 7
 247 |             }
 248 |           },
 249 |           "metadata": {},
 250 |           "params": [
 251 |             {
 252 |               "name": "marker"
 253 |             }
 254 |           ]
 255 |         },
 256 |         {
 257 |           "name": "onRemove",
 258 |           "description": "onRemove callback when the cluster is removed.\nClears the event listeners.",
 259 |           "privacy": "public",
 260 |           "sourceRange": {
 261 |             "start": {
 262 |               "line": 210,
 263 |               "column": 6
 264 |             },
 265 |             "end": {
 266 |               "line": 221,
 267 |               "column": 7
 268 |             }
 269 |           },
 270 |           "metadata": {},
 271 |           "params": [],
 272 |           "return": {
 273 |             "type": "void"
 274 |           }
 275 |         },
 276 |         {
 277 |           "name": "onAdd",
 278 |           "description": "onAdd callback when the cluster is added.\nEvent listeners for various events are setup.",
 279 |           "privacy": "public",
 280 |           "sourceRange": {
 281 |             "start": {
 282 |               "line": 227,
 283 |               "column": 6
 284 |             },
 285 |             "end": {
 286 |               "line": 278,
 287 |               "column": 7
 288 |             }
 289 |           },
 290 |           "metadata": {},
 291 |           "params": [],
 292 |           "return": {
 293 |             "type": "void"
 294 |           }
 295 |         },
 296 |         {
 297 |           "name": "_forwardEvent",
 298 |           "description": "",
 299 |           "privacy": "protected",
 300 |           "sourceRange": {
 301 |             "start": {
 302 |               "line": 279,
 303 |               "column": 6
 304 |             },
 305 |             "end": {
 306 |               "line": 283,
 307 |               "column": 7
 308 |             }
 309 |           },
 310 |           "metadata": {},
 311 |           "params": [
 312 |             {
 313 |               "name": "name"
 314 |             }
 315 |           ],
 316 |           "return": {
 317 |             "type": "void"
 318 |           }
 319 |         },
 320 |         {
 321 |           "name": "_clearListener",
 322 |           "description": "",
 323 |           "privacy": "protected",
 324 |           "sourceRange": {
 325 |             "start": {
 326 |               "line": 285,
 327 |               "column": 6
 328 |             },
 329 |             "end": {
 330 |               "line": 290,
 331 |               "column": 7
 332 |             }
 333 |           },
 334 |           "metadata": {},
 335 |           "params": [
 336 |             {
 337 |               "name": "name"
 338 |             }
 339 |           ],
 340 |           "return": {
 341 |             "type": "void"
 342 |           }
 343 |         }
 344 |       ],
 345 |       "staticMethods": [],
 346 |       "demos": [],
 347 |       "metadata": {},
 348 |       "sourceRange": {
 349 |         "start": {
 350 |           "line": 15,
 351 |           "column": 4
 352 |         },
 353 |         "end": {
 354 |           "line": 291,
 355 |           "column": 5
 356 |         }
 357 |       },
 358 |       "privacy": "public",
 359 |       "superclass": "HTMLElement",
 360 |       "name": "GoogleMapMarkerCluster",
 361 |       "attributes": [
 362 |         {
 363 |           "name": "center",
 364 |           "description": "The center position of the cluster element (lat,lon)",
 365 |           "sourceRange": {
 366 |             "start": {
 367 |               "line": 47,
 368 |               "column": 10
 369 |             },
 370 |             "end": {
 371 |               "line": 51,
 372 |               "column": 11
 373 |             }
 374 |           },
 375 |           "metadata": {},
 376 |           "type": "Object | null | undefined"
 377 |         },
 378 |         {
 379 |           "name": "hidden",
 380 |           "description": "When set the cluster icon is hidden",
 381 |           "sourceRange": {
 382 |             "start": {
 383 |               "line": 55,
 384 |               "column": 10
 385 |             },
 386 |             "end": {
 387 |               "line": 58,
 388 |               "column": 11
 389 |             }
 390 |           },
 391 |           "metadata": {},
 392 |           "type": "boolean | null | undefined"
 393 |         }
 394 |       ],
 395 |       "events": [
 396 |         {
 397 |           "type": "CustomEvent",
 398 |           "name": "google-map-markercluster-click",
 399 |           "description": "Fired when the cluster was clicked.",
 400 |           "metadata": {}
 401 |         },
 402 |         {
 403 |           "type": "CustomEvent",
 404 |           "name": "google-map-markercluster-mouseout",
 405 |           "description": "Fired when the mouse leaves the area of the cluster.",
 406 |           "metadata": {}
 407 |         },
 408 |         {
 409 |           "type": "CustomEvent",
 410 |           "name": "google-map-markercluster-mouseover",
 411 |           "description": "Fired when the mouse enters the area of the cluster.",
 412 |           "metadata": {}
 413 |         },
 414 |         {
 415 |           "type": "CustomEvent",
 416 |           "name": "center-changed",
 417 |           "description": "Fired when the `center` property changes.",
 418 |           "metadata": {}
 419 |         }
 420 |       ],
 421 |       "styling": {
 422 |         "cssVariables": [],
 423 |         "selectors": []
 424 |       },
 425 |       "slots": [
 426 |         {
 427 |           "description": "",
 428 |           "name": "",
 429 |           "range": {
 430 |             "start": {
 431 |               "line": 6,
 432 |               "column": 6
 433 |             },
 434 |             "end": {
 435 |               "line": 6,
 436 |               "column": 39
 437 |             }
 438 |           }
 439 |         }
 440 |       ],
 441 |       "tagname": "google-map-markercluster"
 442 |     },
 443 |     {
 444 |       "description": "The `google-map-defaulticon` element is displayed by default when the user does not provide a custom cluster icon.",
 445 |       "summary": "",
 446 |       "path": "google-map-defaulticon.html",
 447 |       "properties": [
 448 |         {
 449 |           "name": "styles",
 450 |           "type": "Array | null | undefined",
 451 |           "description": "The list of styles that should be applied to the cluster icon for the various\ncluster levels. If not set, the default styles will be used.\nMust be of object with following keys `{url,width,height,textColor,textSize}`",
 452 |           "privacy": "public",
 453 |           "sourceRange": {
 454 |             "start": {
 455 |               "line": 84,
 456 |               "column": 10
 457 |             },
 458 |             "end": {
 459 |               "line": 87,
 460 |               "column": 11
 461 |             }
 462 |           },
 463 |           "metadata": {
 464 |             "polymer": {
 465 |               "attributeType": "Array"
 466 |             }
 467 |           }
 468 |         },
 469 |         {
 470 |           "name": "_iconStyle",
 471 |           "type": "Object | null | undefined",
 472 |           "description": "The active style for the current cluster level",
 473 |           "privacy": "protected",
 474 |           "sourceRange": {
 475 |             "start": {
 476 |               "line": 91,
 477 |               "column": 10
 478 |             },
 479 |             "end": {
 480 |               "line": 94,
 481 |               "column": 11
 482 |             }
 483 |           },
 484 |           "metadata": {
 485 |             "polymer": {
 486 |               "attributeType": "Object"
 487 |             }
 488 |           },
 489 |           "defaultValue": "{}"
 490 |         }
 491 |       ],
 492 |       "methods": [
 493 |         {
 494 |           "name": "_calcActiveStyleIndex",
 495 |           "description": "Calculates the index of the active style that should be displayed for the current cluster.",
 496 |           "privacy": "protected",
 497 |           "sourceRange": {
 498 |             "start": {
 499 |               "line": 107,
 500 |               "column": 6
 501 |             },
 502 |             "end": {
 503 |               "line": 115,
 504 |               "column": 7
 505 |             }
 506 |           },
 507 |           "metadata": {},
 508 |           "params": [
 509 |             {
 510 |               "name": "markerLength"
 511 |             },
 512 |             {
 513 |               "name": "numStyles"
 514 |             }
 515 |           ]
 516 |         },
 517 |         {
 518 |           "name": "_computeText",
 519 |           "description": "Returns the text that should be displayed",
 520 |           "privacy": "protected",
 521 |           "sourceRange": {
 522 |             "start": {
 523 |               "line": 120,
 524 |               "column": 6
 525 |             },
 526 |             "end": {
 527 |               "line": 122,
 528 |               "column": 7
 529 |             }
 530 |           },
 531 |           "metadata": {},
 532 |           "params": [
 533 |             {
 534 |               "name": "markers"
 535 |             }
 536 |           ]
 537 |         },
 538 |         {
 539 |           "name": "_updateCustom",
 540 |           "description": "Observer function that is called when either the `markers` or `styles` is changed.",
 541 |           "privacy": "protected",
 542 |           "sourceRange": {
 543 |             "start": {
 544 |               "line": 127,
 545 |               "column": 6
 546 |             },
 547 |             "end": {
 548 |               "line": 146,
 549 |               "column": 7
 550 |             }
 551 |           },
 552 |           "metadata": {},
 553 |           "params": [
 554 |             {
 555 |               "name": "markers"
 556 |             },
 557 |             {
 558 |               "name": "styles"
 559 |             }
 560 |           ],
 561 |           "return": {
 562 |             "type": "void"
 563 |           }
 564 |         }
 565 |       ],
 566 |       "staticMethods": [],
 567 |       "demos": [],
 568 |       "metadata": {},
 569 |       "sourceRange": {
 570 |         "start": {
 571 |           "line": 74,
 572 |           "column": 4
 573 |         },
 574 |         "end": {
 575 |           "line": 147,
 576 |           "column": 5
 577 |         }
 578 |       },
 579 |       "privacy": "public",
 580 |       "superclass": "HTMLElement",
 581 |       "name": "GoogleMapDefaultIcon",
 582 |       "attributes": [
 583 |         {
 584 |           "name": "styles",
 585 |           "description": "The list of styles that should be applied to the cluster icon for the various\ncluster levels. If not set, the default styles will be used.\nMust be of object with following keys `{url,width,height,textColor,textSize}`",
 586 |           "sourceRange": {
 587 |             "start": {
 588 |               "line": 84,
 589 |               "column": 10
 590 |             },
 591 |             "end": {
 592 |               "line": 87,
 593 |               "column": 11
 594 |             }
 595 |           },
 596 |           "metadata": {},
 597 |           "type": "Array | null | undefined"
 598 |         }
 599 |       ],
 600 |       "events": [],
 601 |       "styling": {
 602 |         "cssVariables": [],
 603 |         "selectors": []
 604 |       },
 605 |       "slots": [],
 606 |       "tagname": "google-map-defaulticon"
 607 |     },
 608 |     {
 609 |       "description": "The `google-map-markerclusterer` element is a port of markercluster-plus to polymer.\nIt helps to cluster markers on a google-map together\n##### Example\n    <google-map-markerclusterer></google-map-markerclusterer>\n\n##### Example -  custom cluster marker\n\n    <google-map-markerclusterer>\n      <my-custom-clustericon class=\"cluster-icon\"></my-custom-clustericon>\n    </google-map-markerclusterer>",
 610 |       "summary": "",
 611 |       "path": "google-map-markerclusterer.html",
 612 |       "properties": [
 613 |         {
 614 |           "name": "markers",
 615 |           "type": "Array | null | undefined",
 616 |           "description": "Markers that should be clustered.",
 617 |           "privacy": "public",
 618 |           "sourceRange": {
 619 |             "start": {
 620 |               "line": 69,
 621 |               "column": 12
 622 |             },
 623 |             "end": {
 624 |               "line": 73,
 625 |               "column": 13
 626 |             }
 627 |           },
 628 |           "metadata": {
 629 |             "polymer": {
 630 |               "observer": "\"_markersChanged\"",
 631 |               "attributeType": "Array"
 632 |             }
 633 |           },
 634 |           "defaultValue": "[]"
 635 |         },
 636 |         {
 637 |           "name": "fitToMarkers",
 638 |           "type": "boolean | null | undefined",
 639 |           "description": "If set, the zoom level is set such that all markers (google-map-marker children) are brought into view.",
 640 |           "privacy": "public",
 641 |           "sourceRange": {
 642 |             "start": {
 643 |               "line": 78,
 644 |               "column": 12
 645 |             },
 646 |             "end": {
 647 |               "line": 82,
 648 |               "column": 13
 649 |             }
 650 |           },
 651 |           "metadata": {
 652 |             "polymer": {
 653 |               "observer": "\"_fitToMarkersChanged\"",
 654 |               "attributeType": "Boolean"
 655 |             }
 656 |           },
 657 |           "defaultValue": "false"
 658 |         },
 659 |         {
 660 |           "name": "batchSize",
 661 |           "type": "number | null | undefined",
 662 |           "description": "BatchSize specifies the amount of markers that should be processed per run.",
 663 |           "privacy": "public",
 664 |           "sourceRange": {
 665 |             "start": {
 666 |               "line": 87,
 667 |               "column": 12
 668 |             },
 669 |             "end": {
 670 |               "line": 90,
 671 |               "column": 13
 672 |             }
 673 |           },
 674 |           "metadata": {
 675 |             "polymer": {
 676 |               "attributeType": "Number"
 677 |             }
 678 |           },
 679 |           "defaultValue": "2000"
 680 |         },
 681 |         {
 682 |           "name": "ignoreHidden",
 683 |           "type": "boolean | null | undefined",
 684 |           "description": "If set ignores hidden markers when creating the clusters.",
 685 |           "privacy": "public",
 686 |           "sourceRange": {
 687 |             "start": {
 688 |               "line": 95,
 689 |               "column": 12
 690 |             },
 691 |             "end": {
 692 |               "line": 98,
 693 |               "column": 13
 694 |             }
 695 |           },
 696 |           "metadata": {
 697 |             "polymer": {
 698 |               "attributeType": "Boolean"
 699 |             }
 700 |           },
 701 |           "defaultValue": "false"
 702 |         },
 703 |         {
 704 |           "name": "gridSize",
 705 |           "type": "number | null | undefined",
 706 |           "description": "Specifies the size of the grid for each cluster in pixel.",
 707 |           "privacy": "public",
 708 |           "sourceRange": {
 709 |             "start": {
 710 |               "line": 103,
 711 |               "column": 12
 712 |             },
 713 |             "end": {
 714 |               "line": 106,
 715 |               "column": 13
 716 |             }
 717 |           },
 718 |           "metadata": {
 719 |             "polymer": {
 720 |               "attributeType": "Number"
 721 |             }
 722 |           },
 723 |           "defaultValue": "60"
 724 |         },
 725 |         {
 726 |           "name": "minimumClusterSize",
 727 |           "type": "number | null | undefined",
 728 |           "description": "Sepcifies the minimum number of markers to be clustered.",
 729 |           "privacy": "public",
 730 |           "sourceRange": {
 731 |             "start": {
 732 |               "line": 111,
 733 |               "column": 12
 734 |             },
 735 |             "end": {
 736 |               "line": 114,
 737 |               "column": 13
 738 |             }
 739 |           },
 740 |           "metadata": {
 741 |             "polymer": {
 742 |               "attributeType": "Number"
 743 |             }
 744 |           },
 745 |           "defaultValue": "2"
 746 |         },
 747 |         {
 748 |           "name": "averageCenter",
 749 |           "type": "boolean | null | undefined",
 750 |           "description": "If set, the center of the cluster is set to the average of all locations of its containing markers.\nOtherwise the cluster center will be the one of the first marker added to it.",
 751 |           "privacy": "public",
 752 |           "sourceRange": {
 753 |             "start": {
 754 |               "line": 120,
 755 |               "column": 12
 756 |             },
 757 |             "end": {
 758 |               "line": 123,
 759 |               "column": 13
 760 |             }
 761 |           },
 762 |           "metadata": {
 763 |             "polymer": {
 764 |               "attributeType": "Boolean"
 765 |             }
 766 |           },
 767 |           "defaultValue": "false"
 768 |         },
 769 |         {
 770 |           "name": "maxZoom",
 771 |           "type": "number | null | undefined",
 772 |           "description": "Specifies the maximum zoom at which individual markers are shown.\nBy default no maxZoom is set.",
 773 |           "privacy": "public",
 774 |           "sourceRange": {
 775 |             "start": {
 776 |               "line": 129,
 777 |               "column": 12
 778 |             },
 779 |             "end": {
 780 |               "line": 132,
 781 |               "column": 13
 782 |             }
 783 |           },
 784 |           "metadata": {
 785 |             "polymer": {
 786 |               "attributeType": "Number"
 787 |             }
 788 |           },
 789 |           "defaultValue": "null"
 790 |         },
 791 |         {
 792 |           "name": "zoomOnClick",
 793 |           "type": "boolean | null | undefined",
 794 |           "description": "If set, the map is zoomed far enough that all markers of the cluster fit inside the viewport (Default: true).",
 795 |           "privacy": "public",
 796 |           "sourceRange": {
 797 |             "start": {
 798 |               "line": 137,
 799 |               "column": 12
 800 |             },
 801 |             "end": {
 802 |               "line": 140,
 803 |               "column": 13
 804 |             }
 805 |           },
 806 |           "metadata": {
 807 |             "polymer": {
 808 |               "attributeType": "Boolean"
 809 |             }
 810 |           },
 811 |           "defaultValue": "true"
 812 |         },
 813 |         {
 814 |           "name": "styles",
 815 |           "type": "Array | null | undefined",
 816 |           "description": "Styles for the google-map-defaulticon element.",
 817 |           "privacy": "public",
 818 |           "sourceRange": {
 819 |             "start": {
 820 |               "line": 144,
 821 |               "column": 12
 822 |             },
 823 |             "end": {
 824 |               "line": 148,
 825 |               "column": 13
 826 |             }
 827 |           },
 828 |           "metadata": {
 829 |             "polymer": {
 830 |               "observer": "\"_changeStyles\"",
 831 |               "attributeType": "Array"
 832 |             }
 833 |           },
 834 |           "defaultValue": "null"
 835 |         }
 836 |       ],
 837 |       "methods": [
 838 |         {
 839 |           "name": "connectedCallback",
 840 |           "description": "",
 841 |           "privacy": "public",
 842 |           "sourceRange": {
 843 |             "start": {
 844 |               "line": 167,
 845 |               "column": 8
 846 |             },
 847 |             "end": {
 848 |               "line": 171,
 849 |               "column": 9
 850 |             }
 851 |           },
 852 |           "metadata": {},
 853 |           "params": [],
 854 |           "return": {
 855 |             "type": "void"
 856 |           }
 857 |         },
 858 |         {
 859 |           "name": "_initClusterIconTemplate",
 860 |           "description": "",
 861 |           "privacy": "protected",
 862 |           "sourceRange": {
 863 |             "start": {
 864 |               "line": 173,
 865 |               "column": 8
 866 |             },
 867 |             "end": {
 868 |               "line": 183,
 869 |               "column": 9
 870 |             }
 871 |           },
 872 |           "metadata": {},
 873 |           "params": [],
 874 |           "return": {
 875 |             "type": "void"
 876 |           }
 877 |         },
 878 |         {
 879 |           "name": "_distanceBetweenPoints",
 880 |           "description": "Calculates the distance between two latlng locations in km.",
 881 |           "privacy": "protected",
 882 |           "sourceRange": {
 883 |             "start": {
 884 |               "line": 193,
 885 |               "column": 8
 886 |             },
 887 |             "end": {
 888 |               "line": 203,
 889 |               "column": 9
 890 |             }
 891 |           },
 892 |           "metadata": {},
 893 |           "params": [
 894 |             {
 895 |               "name": "p1",
 896 |               "type": "google.maps.LatLng",
 897 |               "description": "The first lat lng point."
 898 |             },
 899 |             {
 900 |               "name": "p2",
 901 |               "type": "google.maps.LatLng",
 902 |               "description": "The second lat lng point."
 903 |             }
 904 |           ],
 905 |           "return": {
 906 |             "type": "number",
 907 |             "desc": "The distance between the two points in km."
 908 |           }
 909 |         },
 910 |         {
 911 |           "name": "_isMarkerInBounds",
 912 |           "description": "Returns if the marker is inside the specified bounds",
 913 |           "privacy": "protected",
 914 |           "sourceRange": {
 915 |             "start": {
 916 |               "line": 208,
 917 |               "column": 8
 918 |             },
 919 |             "end": {
 920 |               "line": 210,
 921 |               "column": 9
 922 |             }
 923 |           },
 924 |           "metadata": {},
 925 |           "params": [
 926 |             {
 927 |               "name": "marker"
 928 |             },
 929 |             {
 930 |               "name": "bounds"
 931 |             }
 932 |           ]
 933 |         },
 934 |         {
 935 |           "name": "onAdd",
 936 |           "description": "Called when the markerclusterer is added to the map.\nEvents are initialized.",
 937 |           "privacy": "public",
 938 |           "sourceRange": {
 939 |             "start": {
 940 |               "line": 216,
 941 |               "column": 8
 942 |             },
 943 |             "end": {
 944 |               "line": 238,
 945 |               "column": 9
 946 |             }
 947 |           },
 948 |           "metadata": {},
 949 |           "params": [],
 950 |           "return": {
 951 |             "type": "void"
 952 |           }
 953 |         },
 954 |         {
 955 |           "name": "_addToClosestCluster",
 956 |           "description": "Adds a marker to a cluster, or creates a new cluster.",
 957 |           "privacy": "protected",
 958 |           "sourceRange": {
 959 |             "start": {
 960 |               "line": 243,
 961 |               "column": 8
 962 |             },
 963 |             "end": {
 964 |               "line": 282,
 965 |               "column": 9
 966 |             }
 967 |           },
 968 |           "metadata": {},
 969 |           "params": [
 970 |             {
 971 |               "name": "marker"
 972 |             }
 973 |           ],
 974 |           "return": {
 975 |             "type": "void"
 976 |           }
 977 |         },
 978 |         {
 979 |           "name": "_computeClusters",
 980 |           "description": "Creates the clusters. This is done in batches to avoid timeout errors\n in some browsers when there is a huge number of markers.",
 981 |           "privacy": "protected",
 982 |           "sourceRange": {
 983 |             "start": {
 984 |               "line": 291,
 985 |               "column": 8
 986 |             },
 987 |             "end": {
 988 |               "line": 340,
 989 |               "column": 9
 990 |             }
 991 |           },
 992 |           "metadata": {},
 993 |           "params": [
 994 |             {
 995 |               "name": "iFirst",
 996 |               "type": "number",
 997 |               "description": "The index of the first marker in the batch of\n markers to be added to clusters."
 998 |             }
 999 |           ],
1000 |           "return": {
1001 |             "type": "void"
1002 |           }
1003 |         },
1004 |         {
1005 |           "name": "onRemove",
1006 |           "description": "Callback that is called when the markerclusterer is removed from the map.\nThis will put all clustered markers back on the map",
1007 |           "privacy": "public",
1008 |           "sourceRange": {
1009 |             "start": {
1010 |               "line": 346,
1011 |               "column": 8
1012 |             },
1013 |             "end": {
1014 |               "line": 353,
1015 |               "column": 9
1016 |             }
1017 |           },
1018 |           "metadata": {},
1019 |           "params": [],
1020 |           "return": {
1021 |             "type": "void"
1022 |           }
1023 |         },
1024 |         {
1025 |           "name": "_fitToMarkersChanged",
1026 |           "description": "Observer function that is called when `fitToMarkers` is changed.",
1027 |           "privacy": "protected",
1028 |           "sourceRange": {
1029 |             "start": {
1030 |               "line": 358,
1031 |               "column": 8
1032 |             },
1033 |             "end": {
1034 |               "line": 373,
1035 |               "column": 9
1036 |             }
1037 |           },
1038 |           "metadata": {},
1039 |           "params": [],
1040 |           "return": {
1041 |             "type": "void"
1042 |           }
1043 |         },
1044 |         {
1045 |           "name": "_optionChanged",
1046 |           "description": "Observer function that is called if one of the options is changed.\nDebounce calls to `repaint`",
1047 |           "privacy": "protected",
1048 |           "sourceRange": {
1049 |             "start": {
1050 |               "line": 379,
1051 |               "column": 8
1052 |             },
1053 |             "end": {
1054 |               "line": 381,
1055 |               "column": 9
1056 |             }
1057 |           },
1058 |           "metadata": {},
1059 |           "params": [
1060 |             {
1061 |               "name": "markers"
1062 |             },
1063 |             {
1064 |               "name": "gridSize"
1065 |             },
1066 |             {
1067 |               "name": "averageCenter"
1068 |             },
1069 |             {
1070 |               "name": "minimumClusterSize"
1071 |             },
1072 |             {
1073 |               "name": "maxZoom"
1074 |             }
1075 |           ],
1076 |           "return": {
1077 |             "type": "void"
1078 |           }
1079 |         },
1080 |         {
1081 |           "name": "repaint",
1082 |           "description": "Repaint will re-create and re-draw the clusters.",
1083 |           "privacy": "public",
1084 |           "sourceRange": {
1085 |             "start": {
1086 |               "line": 386,
1087 |               "column": 9
1088 |             },
1089 |             "end": {
1090 |               "line": 389,
1091 |               "column": 9
1092 |             }
1093 |           },
1094 |           "metadata": {},
1095 |           "params": [],
1096 |           "return": {
1097 |             "type": "void"
1098 |           }
1099 |         },
1100 |         {
1101 |           "name": "_resetClusters",
1102 |           "description": "Removes the clusters and resets the markers.",
1103 |           "privacy": "protected",
1104 |           "sourceRange": {
1105 |             "start": {
1106 |               "line": 394,
1107 |               "column": 8
1108 |             },
1109 |             "end": {
1110 |               "line": 401,
1111 |               "column": 9
1112 |             }
1113 |           },
1114 |           "metadata": {},
1115 |           "params": [],
1116 |           "return": {
1117 |             "type": "void"
1118 |           }
1119 |         },
1120 |         {
1121 |           "name": "_initMarkers",
1122 |           "description": "Initializes the markers and setups dragend event if markers is draggable.",
1123 |           "privacy": "protected",
1124 |           "sourceRange": {
1125 |             "start": {
1126 |               "line": 406,
1127 |               "column": 8
1128 |             },
1129 |             "end": {
1130 |               "line": 421,
1131 |               "column": 9
1132 |             }
1133 |           },
1134 |           "metadata": {},
1135 |           "params": [
1136 |             {
1137 |               "name": "markers"
1138 |             }
1139 |           ],
1140 |           "return": {
1141 |             "type": "void"
1142 |           }
1143 |         },
1144 |         {
1145 |           "name": "_resetMarkers",
1146 |           "description": "this will reset the marker.",
1147 |           "privacy": "protected",
1148 |           "sourceRange": {
1149 |             "start": {
1150 |               "line": 428,
1151 |               "column": 8
1152 |             },
1153 |             "end": {
1154 |               "line": 439,
1155 |               "column": 9
1156 |             }
1157 |           },
1158 |           "metadata": {},
1159 |           "params": [
1160 |             {
1161 |               "name": "optHide"
1162 |             },
1163 |             {
1164 |               "name": "markers",
1165 |               "type": "Array",
1166 |               "description": "the markers that should be reset"
1167 |             }
1168 |           ],
1169 |           "return": {
1170 |             "type": "void"
1171 |           }
1172 |         },
1173 |         {
1174 |           "name": "_markersChanged",
1175 |           "description": "Observer function that is called when the `markers` Array is changed.\nWill reset the current markers and debounce call to `repaint`",
1176 |           "privacy": "protected",
1177 |           "sourceRange": {
1178 |             "start": {
1179 |               "line": 444,
1180 |               "column": 8
1181 |             },
1182 |             "end": {
1183 |               "line": 451,
1184 |               "column": 9
1185 |             }
1186 |           },
1187 |           "metadata": {},
1188 |           "params": [
1189 |             {
1190 |               "name": "newMarkers"
1191 |             },
1192 |             {
1193 |               "name": "oldMarkers"
1194 |             }
1195 |           ],
1196 |           "return": {
1197 |             "type": "void"
1198 |           }
1199 |         },
1200 |         {
1201 |           "name": "_changeStyles",
1202 |           "description": "Observer function that is called when the styles are changed.\nOnly used when the `google-map-defaulticon` is used.",
1203 |           "privacy": "protected",
1204 |           "sourceRange": {
1205 |             "start": {
1206 |               "line": 457,
1207 |               "column": 8
1208 |             },
1209 |             "end": {
1210 |               "line": 468,
1211 |               "column": 9
1212 |             }
1213 |           },
1214 |           "metadata": {},
1215 |           "params": [
1216 |             {
1217 |               "name": "styles"
1218 |             }
1219 |           ],
1220 |           "return": {
1221 |             "type": "void"
1222 |           }
1223 |         }
1224 |       ],
1225 |       "staticMethods": [],
1226 |       "demos": [
1227 |         {
1228 |           "url": "demo/index.html",
1229 |           "description": ""
1230 |         },
1231 |         {
1232 |           "url": "demo/simple.html",
1233 |           "description": ""
1234 |         }
1235 |       ],
1236 |       "metadata": {},
1237 |       "sourceRange": {
1238 |         "start": {
1239 |           "line": 33,
1240 |           "column": 6
1241 |         },
1242 |         "end": {
1243 |           "line": 469,
1244 |           "column": 7
1245 |         }
1246 |       },
1247 |       "privacy": "public",
1248 |       "superclass": "HTMLElement",
1249 |       "name": "GoogleMapMarkerclusterer",
1250 |       "attributes": [
1251 |         {
1252 |           "name": "markers",
1253 |           "description": "Markers that should be clustered.",
1254 |           "sourceRange": {
1255 |             "start": {
1256 |               "line": 69,
1257 |               "column": 12
1258 |             },
1259 |             "end": {
1260 |               "line": 73,
1261 |               "column": 13
1262 |             }
1263 |           },
1264 |           "metadata": {},
1265 |           "type": "Array | null | undefined"
1266 |         },
1267 |         {
1268 |           "name": "fit-to-markers",
1269 |           "description": "If set, the zoom level is set such that all markers (google-map-marker children) are brought into view.",
1270 |           "sourceRange": {
1271 |             "start": {
1272 |               "line": 78,
1273 |               "column": 12
1274 |             },
1275 |             "end": {
1276 |               "line": 82,
1277 |               "column": 13
1278 |             }
1279 |           },
1280 |           "metadata": {},
1281 |           "type": "boolean | null | undefined"
1282 |         },
1283 |         {
1284 |           "name": "batch-size",
1285 |           "description": "BatchSize specifies the amount of markers that should be processed per run.",
1286 |           "sourceRange": {
1287 |             "start": {
1288 |               "line": 87,
1289 |               "column": 12
1290 |             },
1291 |             "end": {
1292 |               "line": 90,
1293 |               "column": 13
1294 |             }
1295 |           },
1296 |           "metadata": {},
1297 |           "type": "number | null | undefined"
1298 |         },
1299 |         {
1300 |           "name": "ignore-hidden",
1301 |           "description": "If set ignores hidden markers when creating the clusters.",
1302 |           "sourceRange": {
1303 |             "start": {
1304 |               "line": 95,
1305 |               "column": 12
1306 |             },
1307 |             "end": {
1308 |               "line": 98,
1309 |               "column": 13
1310 |             }
1311 |           },
1312 |           "metadata": {},
1313 |           "type": "boolean | null | undefined"
1314 |         },
1315 |         {
1316 |           "name": "grid-size",
1317 |           "description": "Specifies the size of the grid for each cluster in pixel.",
1318 |           "sourceRange": {
1319 |             "start": {
1320 |               "line": 103,
1321 |               "column": 12
1322 |             },
1323 |             "end": {
1324 |               "line": 106,
1325 |               "column": 13
1326 |             }
1327 |           },
1328 |           "metadata": {},
1329 |           "type": "number | null | undefined"
1330 |         },
1331 |         {
1332 |           "name": "minimum-cluster-size",
1333 |           "description": "Sepcifies the minimum number of markers to be clustered.",
1334 |           "sourceRange": {
1335 |             "start": {
1336 |               "line": 111,
1337 |               "column": 12
1338 |             },
1339 |             "end": {
1340 |               "line": 114,
1341 |               "column": 13
1342 |             }
1343 |           },
1344 |           "metadata": {},
1345 |           "type": "number | null | undefined"
1346 |         },
1347 |         {
1348 |           "name": "average-center",
1349 |           "description": "If set, the center of the cluster is set to the average of all locations of its containing markers.\nOtherwise the cluster center will be the one of the first marker added to it.",
1350 |           "sourceRange": {
1351 |             "start": {
1352 |               "line": 120,
1353 |               "column": 12
1354 |             },
1355 |             "end": {
1356 |               "line": 123,
1357 |               "column": 13
1358 |             }
1359 |           },
1360 |           "metadata": {},
1361 |           "type": "boolean | null | undefined"
1362 |         },
1363 |         {
1364 |           "name": "max-zoom",
1365 |           "description": "Specifies the maximum zoom at which individual markers are shown.\nBy default no maxZoom is set.",
1366 |           "sourceRange": {
1367 |             "start": {
1368 |               "line": 129,
1369 |               "column": 12
1370 |             },
1371 |             "end": {
1372 |               "line": 132,
1373 |               "column": 13
1374 |             }
1375 |           },
1376 |           "metadata": {},
1377 |           "type": "number | null | undefined"
1378 |         },
1379 |         {
1380 |           "name": "zoom-on-click",
1381 |           "description": "If set, the map is zoomed far enough that all markers of the cluster fit inside the viewport (Default: true).",
1382 |           "sourceRange": {
1383 |             "start": {
1384 |               "line": 137,
1385 |               "column": 12
1386 |             },
1387 |             "end": {
1388 |               "line": 140,
1389 |               "column": 13
1390 |             }
1391 |           },
1392 |           "metadata": {},
1393 |           "type": "boolean | null | undefined"
1394 |         },
1395 |         {
1396 |           "name": "styles",
1397 |           "description": "Styles for the google-map-defaulticon element.",
1398 |           "sourceRange": {
1399 |             "start": {
1400 |               "line": 144,
1401 |               "column": 12
1402 |             },
1403 |             "end": {
1404 |               "line": 148,
1405 |               "column": 13
1406 |             }
1407 |           },
1408 |           "metadata": {},
1409 |           "type": "Array | null | undefined"
1410 |         }
1411 |       ],
1412 |       "events": [
1413 |         {
1414 |           "type": "CustomEvent",
1415 |           "name": "google-map-markercluster-click",
1416 |           "description": "Fired when the cluster was clicked.",
1417 |           "metadata": {}
1418 |         },
1419 |         {
1420 |           "type": "CustomEvent",
1421 |           "name": "google-map-markercluster-clustering-end",
1422 |           "description": "Fired when the clustering of the markers ends.",
1423 |           "metadata": {}
1424 |         },
1425 |         {
1426 |           "type": "CustomEvent",
1427 |           "name": "google-map-markercluster-clustering-start",
1428 |           "description": "Fired when the clustering of the markers starts.",
1429 |           "metadata": {}
1430 |         },
1431 |         {
1432 |           "type": "CustomEvent",
1433 |           "name": "google-map-markercluster-mouseout",
1434 |           "description": "Fired when the mouse leaves the area of the cluster.",
1435 |           "metadata": {}
1436 |         },
1437 |         {
1438 |           "type": "CustomEvent",
1439 |           "name": "google-map-markercluster-mouseover",
1440 |           "description": "Fired when the mouse enters the area of the cluster.",
1441 |           "metadata": {}
1442 |         }
1443 |       ],
1444 |       "styling": {
1445 |         "cssVariables": [],
1446 |         "selectors": []
1447 |       },
1448 |       "slots": [
1449 |         {
1450 |           "description": "",
1451 |           "name": "cluster-icon",
1452 |           "range": {
1453 |             "start": {
1454 |               "line": 8,
1455 |               "column": 11
1456 |             },
1457 |             "end": {
1458 |               "line": 8,
1459 |               "column": 69
1460 |             }
1461 |           }
1462 |         }
1463 |       ],
1464 |       "tagname": "google-map-markerclusterer"
1465 |     },
1466 |     {
1467 |       "description": "The `google-map-overlayview` element is a generic overlay container element.\nIt maps to the OverlayView of google maps v3.\n<b>Example</b>:\n    <google-map-overlayview><some-element /></google-map-overlayview>\n\nFor example to embed a simple `<img>` element into a overlay use this code:\n\n    <google-map-overlayview><img src=\"URL\" /></google-map-overlayview>\n\nIt is also possible to embed another `custom element` inside a `<google-map-overlayview>`",
1468 |       "summary": "",
1469 |       "path": "google-map-overlayview.html",
1470 |       "properties": [],
1471 |       "methods": [],
1472 |       "staticMethods": [],
1473 |       "demos": [],
1474 |       "metadata": {},
1475 |       "sourceRange": {
1476 |         "start": {
1477 |           "line": 24,
1478 |           "column": 4
1479 |         },
1480 |         "end": {
1481 |           "line": 26,
1482 |           "column": 5
1483 |         }
1484 |       },
1485 |       "privacy": "public",
1486 |       "superclass": "HTMLElement",
1487 |       "name": "GoogleMapOverlayView",
1488 |       "attributes": [],
1489 |       "events": [],
1490 |       "styling": {
1491 |         "cssVariables": [],
1492 |         "selectors": []
1493 |       },
1494 |       "slots": [
1495 |         {
1496 |           "description": "",
1497 |           "name": "",
1498 |           "range": {
1499 |             "start": {
1500 |               "line": 6,
1501 |               "column": 8
1502 |             },
1503 |             "end": {
1504 |               "line": 6,
1505 |               "column": 41
1506 |             }
1507 |           }
1508 |         }
1509 |       ],
1510 |       "tagname": "google-map-overlayview"
1511 |     }
1512 |   ],
1513 |   "mixins": [
1514 |     {
1515 |       "description": "Use `GoogleMapOverlayViewBehavior` to implement elements that should be displayed on a `google-map` using an overlayview",
1516 |       "summary": "",
1517 |       "path": "google-map-overlayview-behavior.html",
1518 |       "properties": [
1519 |         {
1520 |           "name": "map",
1521 |           "type": "Object | null | undefined",
1522 |           "description": "A Maps API object.",
1523 |           "privacy": "public",
1524 |           "sourceRange": {
1525 |             "start": {
1526 |               "line": 13,
1527 |               "column": 10
1528 |             },
1529 |             "end": {
1530 |               "line": 17,
1531 |               "column": 11
1532 |             }
1533 |           },
1534 |           "metadata": {
1535 |             "polymer": {
1536 |               "observer": "\"_mapChanged\"",
1537 |               "attributeType": "Object"
1538 |             }
1539 |           },
1540 |           "defaultValue": "null"
1541 |         },
1542 |         {
1543 |           "name": "visible",
1544 |           "type": "boolean | null | undefined",
1545 |           "description": "A boolean flag to set the visiblity",
1546 |           "privacy": "public",
1547 |           "sourceRange": {
1548 |             "start": {
1549 |               "line": 22,
1550 |               "column": 10
1551 |             },
1552 |             "end": {
1553 |               "line": 25,
1554 |               "column": 11
1555 |             }
1556 |           },
1557 |           "metadata": {
1558 |             "polymer": {
1559 |               "attributeType": "Boolean"
1560 |             }
1561 |           },
1562 |           "defaultValue": "true"
1563 |         }
1564 |       ],
1565 |       "methods": [
1566 |         {
1567 |           "name": "ready",
1568 |           "description": "",
1569 |           "privacy": "protected",
1570 |           "sourceRange": {
1571 |             "start": {
1572 |               "line": 29,
1573 |               "column": 6
1574 |             },
1575 |             "end": {
1576 |               "line": 32,
1577 |               "column": 7
1578 |             }
1579 |           },
1580 |           "metadata": {},
1581 |           "params": [],
1582 |           "return": {
1583 |             "type": "void"
1584 |           }
1585 |         },
1586 |         {
1587 |           "name": "_initOverlay",
1588 |           "description": "Initializes the overlay if the Google Maps API was properly loaded.\nSets the callbacks (onAdd, draw and onRemove) to the current instance",
1589 |           "privacy": "protected",
1590 |           "sourceRange": {
1591 |             "start": {
1592 |               "line": 37,
1593 |               "column": 6
1594 |             },
1595 |             "end": {
1596 |               "line": 48,
1597 |               "column": 7
1598 |             }
1599 |           },
1600 |           "metadata": {},
1601 |           "params": [],
1602 |           "return": {
1603 |             "type": "void"
1604 |           }
1605 |         },
1606 |         {
1607 |           "name": "_overlayView",
1608 |           "description": "OverlayView object constructor.",
1609 |           "privacy": "protected",
1610 |           "sourceRange": {
1611 |             "start": {
1612 |               "line": 52,
1613 |               "column": 6
1614 |             },
1615 |             "end": {
1616 |               "line": 56,
1617 |               "column": 7
1618 |             }
1619 |           },
1620 |           "metadata": {},
1621 |           "params": [
1622 |             {
1623 |               "name": "map"
1624 |             }
1625 |           ],
1626 |           "return": {
1627 |             "type": "void"
1628 |           }
1629 |         },
1630 |         {
1631 |           "name": "_mapChanged",
1632 |           "description": "Callback when the map is changed. By default this will call `setMap` on the `OverlayView`",
1633 |           "privacy": "protected",
1634 |           "sourceRange": {
1635 |             "start": {
1636 |               "line": 61,
1637 |               "column": 6
1638 |             },
1639 |             "end": {
1640 |               "line": 66,
1641 |               "column": 7
1642 |             }
1643 |           },
1644 |           "metadata": {},
1645 |           "params": [
1646 |             {
1647 |               "name": "map"
1648 |             }
1649 |           ],
1650 |           "return": {
1651 |             "type": "void"
1652 |           }
1653 |         },
1654 |         {
1655 |           "name": "draw",
1656 |           "description": "draw callback when the overlayview is drawn",
1657 |           "privacy": "public",
1658 |           "sourceRange": {
1659 |             "start": {
1660 |               "line": 71,
1661 |               "column": 6
1662 |             },
1663 |             "end": {
1664 |               "line": 71,
1665 |               "column": 15
1666 |             }
1667 |           },
1668 |           "metadata": {},
1669 |           "params": [],
1670 |           "return": {
1671 |             "type": "void"
1672 |           }
1673 |         },
1674 |         {
1675 |           "name": "onAdd",
1676 |           "description": "onAdd callback when the overlayview is added to the map.",
1677 |           "privacy": "public",
1678 |           "sourceRange": {
1679 |             "start": {
1680 |               "line": 76,
1681 |               "column": 6
1682 |             },
1683 |             "end": {
1684 |               "line": 79,
1685 |               "column": 7
1686 |             }
1687 |           },
1688 |           "metadata": {},
1689 |           "params": [],
1690 |           "return": {
1691 |             "type": "void"
1692 |           }
1693 |         },
1694 |         {
1695 |           "name": "onRemove",
1696 |           "description": "onRemove callback when the overlayview is removed from the map.",
1697 |           "privacy": "public",
1698 |           "sourceRange": {
1699 |             "start": {
1700 |               "line": 84,
1701 |               "column": 6
1702 |             },
1703 |             "end": {
1704 |               "line": 86,
1705 |               "column": 7
1706 |             }
1707 |           },
1708 |           "metadata": {},
1709 |           "params": [],
1710 |           "return": {
1711 |             "type": "void"
1712 |           }
1713 |         },
1714 |         {
1715 |           "name": "getPosFromLatLng",
1716 |           "description": "Returns the position at which to place the DIV depending on the latlng.",
1717 |           "privacy": "public",
1718 |           "sourceRange": {
1719 |             "start": {
1720 |               "line": 94,
1721 |               "column": 6
1722 |             },
1723 |             "end": {
1724 |               "line": 99,
1725 |               "column": 9
1726 |             }
1727 |           },
1728 |           "metadata": {},
1729 |           "params": [
1730 |             {
1731 |               "name": "latlng",
1732 |               "type": "google.maps.LatLng",
1733 |               "description": "The position in latlng."
1734 |             }
1735 |           ],
1736 |           "return": {
1737 |             "type": "google.maps.Point",
1738 |             "desc": "The position in pixels."
1739 |           }
1740 |         },
1741 |         {
1742 |           "name": "getExtendedBounds",
1743 |           "description": "Returns the current bounds extended by the grid size.",
1744 |           "privacy": "public",
1745 |           "sourceRange": {
1746 |             "start": {
1747 |               "line": 106,
1748 |               "column": 6
1749 |             },
1750 |             "end": {
1751 |               "line": 133,
1752 |               "column": 7
1753 |             }
1754 |           },
1755 |           "metadata": {},
1756 |           "params": [
1757 |             {
1758 |               "name": "bounds",
1759 |               "type": "google.maps.LatLngBounds",
1760 |               "description": "The bounds to extend."
1761 |             },
1762 |             {
1763 |               "name": "size"
1764 |             }
1765 |           ],
1766 |           "return": {
1767 |             "type": "google.maps.LatLngBounds",
1768 |             "desc": "The extended bounds."
1769 |           }
1770 |         }
1771 |       ],
1772 |       "staticMethods": [],
1773 |       "demos": [],
1774 |       "metadata": {},
1775 |       "sourceRange": {
1776 |         "start": {
1777 |           "line": 6,
1778 |           "column": 2
1779 |         },
1780 |         "end": {
1781 |           "line": 135,
1782 |           "column": 3
1783 |         }
1784 |       },
1785 |       "privacy": "public",
1786 |       "name": "GoogleMapOverlayViewBehavior",
1787 |       "attributes": [
1788 |         {
1789 |           "name": "map",
1790 |           "description": "A Maps API object.",
1791 |           "sourceRange": {
1792 |             "start": {
1793 |               "line": 13,
1794 |               "column": 10
1795 |             },
1796 |             "end": {
1797 |               "line": 17,
1798 |               "column": 11
1799 |             }
1800 |           },
1801 |           "metadata": {},
1802 |           "type": "Object | null | undefined"
1803 |         },
1804 |         {
1805 |           "name": "visible",
1806 |           "description": "A boolean flag to set the visiblity",
1807 |           "sourceRange": {
1808 |             "start": {
1809 |               "line": 22,
1810 |               "column": 10
1811 |             },
1812 |             "end": {
1813 |               "line": 25,
1814 |               "column": 11
1815 |             }
1816 |           },
1817 |           "metadata": {},
1818 |           "type": "boolean | null | undefined"
1819 |         }
1820 |       ],
1821 |       "events": [],
1822 |       "styling": {
1823 |         "cssVariables": [],
1824 |         "selectors": []
1825 |       },
1826 |       "slots": []
1827 |     },
1828 |     {
1829 |       "description": "Use `ClusterIconBehavior` to implement elements that should display a custom cluster icon.\nUsers should implement the `updateMarkers` function if they need to customize based on the markers that are contained * in the cluster.",
1830 |       "summary": "",
1831 |       "path": "google-map-markercluster-icon-behavior.html",
1832 |       "properties": [
1833 |         {
1834 |           "name": "markers",
1835 |           "type": "Array | null | undefined",
1836 |           "description": "The markers that are contained in the cluster.",
1837 |           "privacy": "public",
1838 |           "sourceRange": {
1839 |             "start": {
1840 |               "line": 14,
1841 |               "column": 10
1842 |             },
1843 |             "end": {
1844 |               "line": 17,
1845 |               "column": 11
1846 |             }
1847 |           },
1848 |           "metadata": {
1849 |             "polymer": {
1850 |               "observer": "\"updateMarkers\"",
1851 |               "attributeType": "Array"
1852 |             }
1853 |           }
1854 |         }
1855 |       ],
1856 |       "methods": [
1857 |         {
1858 |           "name": "updateMarkers",
1859 |           "description": "Observer function that is called when the `markers` Array is changed.",
1860 |           "privacy": "public",
1861 |           "sourceRange": {
1862 |             "start": {
1863 |               "line": 23,
1864 |               "column": 6
1865 |             },
1866 |             "end": {
1867 |               "line": 25,
1868 |               "column": 7
1869 |             }
1870 |           },
1871 |           "metadata": {},
1872 |           "params": [
1873 |             {
1874 |               "name": "markers"
1875 |             }
1876 |           ],
1877 |           "return": {
1878 |             "type": "void"
1879 |           }
1880 |         }
1881 |       ],
1882 |       "staticMethods": [],
1883 |       "demos": [],
1884 |       "metadata": {},
1885 |       "sourceRange": {
1886 |         "start": {
1887 |           "line": 7,
1888 |           "column": 2
1889 |         },
1890 |         "end": {
1891 |           "line": 27,
1892 |           "column": 3
1893 |         }
1894 |       },
1895 |       "privacy": "public",
1896 |       "name": "ClusterIconBehavior",
1897 |       "attributes": [
1898 |         {
1899 |           "name": "markers",
1900 |           "description": "The markers that are contained in the cluster.",
1901 |           "sourceRange": {
1902 |             "start": {
1903 |               "line": 14,
1904 |               "column": 10
1905 |             },
1906 |             "end": {
1907 |               "line": 17,
1908 |               "column": 11
1909 |             }
1910 |           },
1911 |           "metadata": {},
1912 |           "type": "Array | null | undefined"
1913 |         }
1914 |       ],
1915 |       "events": [],
1916 |       "styling": {
1917 |         "cssVariables": [],
1918 |         "selectors": []
1919 |       },
1920 |       "slots": []
1921 |     },
1922 |     {
1923 |       "description": "Use `GoogleMapOverlayViewMarkerBehavior` to implement elements that should be displayed as `Marker` on a `google-map` using an overlayview\nUsers should either override the `_update` if they need to customize the positioning.",
1924 |       "summary": "",
1925 |       "path": "google-map-overlayview-marker-behavior.html",
1926 |       "properties": [
1927 |         {
1928 |           "name": "position",
1929 |           "type": "Object | null | undefined",
1930 |           "description": "The position of the marker on the map",
1931 |           "privacy": "public",
1932 |           "sourceRange": {
1933 |             "start": {
1934 |               "line": 16,
1935 |               "column": 5
1936 |             },
1937 |             "end": {
1938 |               "line": 19,
1939 |               "column": 6
1940 |             }
1941 |           },
1942 |           "metadata": {
1943 |             "polymer": {
1944 |               "attributeType": "Object"
1945 |             }
1946 |           },
1947 |           "defaultValue": "null"
1948 |         },
1949 |         {
1950 |           "name": "size",
1951 |           "type": "number | null | undefined",
1952 |           "description": "The size of the marker",
1953 |           "privacy": "public",
1954 |           "sourceRange": {
1955 |             "start": {
1956 |               "line": 23,
1957 |               "column": 5
1958 |             },
1959 |             "end": {
1960 |               "line": 26,
1961 |               "column": 6
1962 |             }
1963 |           },
1964 |           "metadata": {
1965 |             "polymer": {
1966 |               "attributeType": "Number"
1967 |             }
1968 |           },
1969 |           "defaultValue": "25"
1970 |         },
1971 |         {
1972 |           "name": "draggable",
1973 |           "type": "boolean | null | undefined",
1974 |           "description": "Set to true if the marker should be draggable",
1975 |           "privacy": "public",
1976 |           "sourceRange": {
1977 |             "start": {
1978 |               "line": 30,
1979 |               "column": 5
1980 |             },
1981 |             "end": {
1982 |               "line": 33,
1983 |               "column": 6
1984 |             }
1985 |           },
1986 |           "metadata": {
1987 |             "polymer": {
1988 |               "attributeType": "Boolean"
1989 |             }
1990 |           },
1991 |           "defaultValue": "false"
1992 |         }
1993 |       ],
1994 |       "methods": [
1995 |         {
1996 |           "name": "ready",
1997 |           "description": "",
1998 |           "privacy": "protected",
1999 |           "sourceRange": {
2000 |             "start": {
2001 |               "line": 36,
2002 |               "column": 3
2003 |             },
2004 |             "end": {
2005 |               "line": 39,
2006 |               "column": 4
2007 |             }
2008 |           },
2009 |           "metadata": {},
2010 |           "params": [],
2011 |           "return": {
2012 |             "type": "void"
2013 |           }
2014 |         },
2015 |         {
2016 |           "name": "getPosition",
2017 |           "description": "Returns the position of the marker",
2018 |           "privacy": "public",
2019 |           "sourceRange": {
2020 |             "start": {
2021 |               "line": 44,
2022 |               "column": 3
2023 |             },
2024 |             "end": {
2025 |               "line": 46,
2026 |               "column": 4
2027 |             }
2028 |           },
2029 |           "metadata": {},
2030 |           "params": []
2031 |         },
2032 |         {
2033 |           "name": "getDraggable",
2034 |           "description": "Returns whether marker is draggable.",
2035 |           "privacy": "public",
2036 |           "sourceRange": {
2037 |             "start": {
2038 |               "line": 51,
2039 |               "column": 3
2040 |             },
2041 |             "end": {
2042 |               "line": 53,
2043 |               "column": 4
2044 |             }
2045 |           },
2046 |           "metadata": {},
2047 |           "params": []
2048 |         },
2049 |         {
2050 |           "name": "getMap",
2051 |           "description": "Returns the map instance.",
2052 |           "privacy": "public",
2053 |           "sourceRange": {
2054 |             "start": {
2055 |               "line": 58,
2056 |               "column": 3
2057 |             },
2058 |             "end": {
2059 |               "line": 63,
2060 |               "column": 4
2061 |             }
2062 |           },
2063 |           "metadata": {},
2064 |           "params": []
2065 |         },
2066 |         {
2067 |           "name": "setMap",
2068 |           "description": "Sets the map instance",
2069 |           "privacy": "public",
2070 |           "sourceRange": {
2071 |             "start": {
2072 |               "line": 67,
2073 |               "column": 3
2074 |             },
2075 |             "end": {
2076 |               "line": 71,
2077 |               "column": 4
2078 |             }
2079 |           },
2080 |           "metadata": {},
2081 |           "params": [
2082 |             {
2083 |               "name": "map"
2084 |             }
2085 |           ],
2086 |           "return": {
2087 |             "type": "void"
2088 |           }
2089 |         },
2090 |         {
2091 |           "name": "drawfunction",
2092 |           "description": "Draw callback forwarded to the function `update`.",
2093 |           "privacy": "public",
2094 |           "sourceRange": {
2095 |             "start": {
2096 |               "line": 76,
2097 |               "column": 3
2098 |             },
2099 |             "end": {
2100 |               "line": 78,
2101 |               "column": 4
2102 |             }
2103 |           },
2104 |           "metadata": {},
2105 |           "params": [],
2106 |           "return": {
2107 |             "type": "void"
2108 |           }
2109 |         },
2110 |         {
2111 |           "name": "update",
2112 |           "description": "Override this function to implement custom positioning.\nBy default will `left` and `top` CSS settings are used to position the element.",
2113 |           "privacy": "public",
2114 |           "sourceRange": {
2115 |             "start": {
2116 |               "line": 83,
2117 |               "column": 3
2118 |             },
2119 |             "end": {
2120 |               "line": 88,
2121 |               "column": 4
2122 |             }
2123 |           },
2124 |           "metadata": {},
2125 |           "params": [
2126 |             {
2127 |               "name": "position"
2128 |             },
2129 |             {
2130 |               "name": "size"
2131 |             }
2132 |           ],
2133 |           "return": {
2134 |             "type": "void"
2135 |           }
2136 |         }
2137 |       ],
2138 |       "staticMethods": [],
2139 |       "demos": [],
2140 |       "metadata": {},
2141 |       "sourceRange": {
2142 |         "start": {
2143 |           "line": 9,
2144 |           "column": 1
2145 |         },
2146 |         "end": {
2147 |           "line": 90,
2148 |           "column": 2
2149 |         }
2150 |       },
2151 |       "privacy": "public",
2152 |       "name": "GoogleMapOverlayViewMarkerBehavior",
2153 |       "attributes": [
2154 |         {
2155 |           "name": "position",
2156 |           "description": "The position of the marker on the map",
2157 |           "sourceRange": {
2158 |             "start": {
2159 |               "line": 16,
2160 |               "column": 5
2161 |             },
2162 |             "end": {
2163 |               "line": 19,
2164 |               "column": 6
2165 |             }
2166 |           },
2167 |           "metadata": {},
2168 |           "type": "Object | null | undefined"
2169 |         },
2170 |         {
2171 |           "name": "size",
2172 |           "description": "The size of the marker",
2173 |           "sourceRange": {
2174 |             "start": {
2175 |               "line": 23,
2176 |               "column": 5
2177 |             },
2178 |             "end": {
2179 |               "line": 26,
2180 |               "column": 6
2181 |             }
2182 |           },
2183 |           "metadata": {},
2184 |           "type": "number | null | undefined"
2185 |         },
2186 |         {
2187 |           "name": "draggable",
2188 |           "description": "Set to true if the marker should be draggable",
2189 |           "sourceRange": {
2190 |             "start": {
2191 |               "line": 30,
2192 |               "column": 5
2193 |             },
2194 |             "end": {
2195 |               "line": 33,
2196 |               "column": 6
2197 |             }
2198 |           },
2199 |           "metadata": {},
2200 |           "type": "boolean | null | undefined"
2201 |         }
2202 |       ],
2203 |       "events": [],
2204 |       "styling": {
2205 |         "cssVariables": [],
2206 |         "selectors": []
2207 |       },
2208 |       "slots": []
2209 |     }
2210 |   ]
2211 | }
2212 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "google-map-markerclusterer",
 3 |   "version": "2.0.0",
 4 |   "authors": [
 5 |     "Ümit Seren <uemit.seren@gmail.com>"
 6 |   ],
 7 |   "description": "Markerclusterer Plus for google maps as a polymer web-component",
 8 |   "keywords": [
 9 |     "Polymer",
10 |     "web-components"
11 |   ],
12 |   "main": "google-map-markerclusterer.html",
13 |   "license": "MIT",
14 |   "homepage": "https://github.com/timeu/google-map-markerclusterer",
15 |   "ignore": [
16 |     "/.*",
17 |     "/test/",
18 |     "/demo/"
19 |   ]
20 |   ,
21 |   "dependencies": {
22 |     "polymer": "Polymer/polymer#^2.0.0",
23 |     "google-map": "GoogleWebComponents/google-map#^2.0.5"
24 |   },
25 |   "devDependencies": {
26 |     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
27 |     "web-component-tester": "Polymer/web-component-tester#^6.0.0",
28 |     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
29 |     "iron-component-page": "^3.0.1"
30 |   },
31 |   "resolutions": {
32 |     "polymer": "^2.0.0"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  6 | 
  7 |     <title>google-map-clustermarker Demo</title>
  8 | 
  9 |     <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
 10 | 
 11 |     <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
 12 |     <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
 13 | 
 14 |     <script src="data.json" type="text/javascript"></script>
 15 |     <link rel="import" href="../../google-map/google-map.html">
 16 |     <link rel="import" href="markerclusterer-container.html">
 17 |     <link rel="import" href="my-custom-marker.html">
 18 |     <link rel="import" href="my-custom-clustericon.html">
 19 |     <style>
 20 |       body {
 21 |         margin: 0;
 22 |         height: 100%;
 23 |         padding: 10px 20px 20px;
 24 |         font-family: Arial;
 25 |         font-size: 16px;
 26 |       }
 27 |     </style>
 28 | 
 29 |     <script>
 30 |       function getMarkers() {
 31 |         var markers = [];
 32 | 
 33 |         var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
 34 |           'chco=FFFFFF,008CFF,000000&ext=.png';
 35 |         var markerImage = new google.maps.MarkerImage(imageUrl,
 36 |           new google.maps.Size(24, 32));
 37 | 
 38 |         for (var i = 0; i < 1000; ++i) {
 39 |           var latLng = new google.maps.LatLng(data.photos[i].latitude,
 40 |               data.photos[i].longitude)
 41 |           var marker = new google.maps.Marker({
 42 |             position: latLng,
 43 |             icon: markerImage
 44 |           });
 45 |           markers.push(marker);
 46 |         }
 47 |         return markers;
 48 |       };
 49 | 
 50 |       function getCustomMarkers() {
 51 |         var markers = [];
 52 | 
 53 |         for (var i = 0; i < 1000; ++i) {
 54 |           var latLng = new google.maps.LatLng(data.photos[i].latitude,data.photos[i].longitude)
 55 |           var marker = document.createElement("my-custom-marker");
 56 |           marker._enableProperties();
 57 |           marker.position = latLng;
 58 |           markers.push(marker);
 59 |         }
 60 |         return markers;
 61 |       };
 62 | 
 63 |         function refreshMap() {
 64 |           markers = getMarkers();
 65 | 
 66 | 
 67 |         };
 68 |     </script>
 69 |   </head>
 70 |   <body>
 71 | 
 72 |     <h3>An example of `google-map-clustermarker':</h3>
 73 |     <markerclusterer-container  id="default_markers"></markerclusterer-container>
 74 | 
 75 |     <h3>Custom markers:</h3>
 76 | 
 77 |     <markerclusterer-container id="custom_markers"></markerclusterer-container>
 78 | 
 79 |     <h3>Custom markers and custom cluster:</h3>
 80 |     <markerclusterer-container id="custom_cluster">
 81 |       <my-custom-clustericon slot="clustericon"></my-custom-clustericon>
 82 |     </markerclusterer-container>
 83 | 
 84 |     <script>
 85 |         var markerClusterer = document.querySelector('#default_markers');
 86 |         var markerClustererCustom = document.querySelector('#custom_markers');
 87 |         var markerClustererCustom2 = document.querySelector('#custom_cluster');
 88 |         markerClusterer.addEventListener('google-map-ready', function(e) {
 89 |           this.markers = getMarkers();
 90 |         });
 91 |         markerClustererCustom.addEventListener('google-map-ready', function(e) {
 92 |           this.markers = getCustomMarkers();
 93 |         });
 94 |         markerClustererCustom2.addEventListener('google-map-ready', function(e) {
 95 |           this.markers = getCustomMarkers();
 96 |         });
 97 |     </script>
 98 |   </body>
 99 | </html>
100 | 


--------------------------------------------------------------------------------
/demo/markerclusterer-container.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../polymer/polymer-element.html">
  2 | <link rel="import" href="../google-map-markerclusterer.html">
  3 | 
  4 | <dom-module id="markerclusterer-container">
  5 |   <template>
  6 |     <style>
  7 |       #map {
  8 |         width:800px;
  9 |         height:400px;
 10 |       }
 11 |       #map-container {
 12 |         padding: 6px;
 13 |         border-width: 1px;
 14 |         border-style: solid;
 15 |         border-color: #ccc #ccc #999 #ccc;
 16 |         -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
 17 |         -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
 18 |         box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
 19 |         width: 800px;
 20 |         height:400px;
 21 |       }
 22 |       #minimumClusterSize {
 23 |         width:50px;
 24 |       }
 25 |       google-map {
 26 |         display: block;
 27 |         height: 100%;
 28 |       }
 29 |     </style>
 30 |     <div id="map-container">
 31 |       <google-map latitude="39.91" map="{{map}}" id="mapelement" longitude="116.38" zoom="2"></google-map>
 32 |       <google-map-markerclusterer map="{{map}}" max-zoom="{{maxZoom}}" minimum-cluster-size="{{minimumClusterSize}}" grid-size="{{gridSize}}" markers="{{markersToDisplay}}" average-center="{{averageCenter}}" styles="{{styles}}">
 33 |         <slot slot="cluster-icon" id="custom_cluster_icon" name="clustericon"></slot>
 34 |       </google-map-markerclusterer>
 35 |     </div>
 36 |     <div id="inline-actions">
 37 |       <span>Max zoom level:
 38 |         <select id="zoom" value="{{maxZoom::change}}">
 39 |           <option value="null">No limit</option>
 40 |           <option value="7">7</option>
 41 |           <option value="8">8</option>
 42 |           <option value="9">9</option>
 43 |           <option value="10">10</option>
 44 |           <option value="11">11</option>
 45 |           <option value="12">12</option>
 46 |           <option value="13">13</option>
 47 |           <option value="14">14</option>
 48 |         </select>
 49 |       </span>
 50 |       <span>Minimum clustersize:
 51 |         <input id="minimumClusterSize" value-as-number="{{minimumClusterSize::change}}" type="number" />
 52 |       </span>
 53 |       <span class="item">Cluster size:
 54 |         <select id="size" value="{{gridSize::change}}">
 55 |           <option value="40">40</option>
 56 |           <option value="50">50</option>
 57 |           <option value="60">60</option>
 58 |           <option value="70">70</option>
 59 |           <option value="80">80</option>
 60 |         </select>
 61 |       </span>
 62 |       <span class="item" id="styleContainer" hidden$={{_isStyleVisible}}>Cluster style:
 63 |         <select id="style" value="{{activeStyle::change}}">
 64 |           <option value="-1">Default</option>
 65 |           <option value="0">People</option>
 66 |           <option value="1">Conversation</option>
 67 |           <option value="2">Heart</option>
 68 |         </select>
 69 |       </span>
 70 |       <span class="item">Average center
 71 |         <input type="checkbox" checked="{{averageCenter::change}}" />
 72 |       </span>
 73 |       <input id="refresh" type="button" value="Refresh Map" class="item" on-click="refresh">
 74 |       <input id="clear" type="button" value="Clear" on-click="clickClear">
 75 |     </div>
 76 |   </template>
 77 |   <script>
 78 |     (function() {
 79 |         var BASE_IMAGE_URL = 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/';
 80 |         var _STYLES = [[{
 81 |             url: BASE_IMAGE_URL + 'people35.png',
 82 |             width: "35px",
 83 |             height: "35px",
 84 |             textColor: '#ff00ff',
 85 |             textSize: "10px"
 86 |         }, {
 87 |             url: BASE_IMAGE_URL + 'people45.png',
 88 |             width: "45px",
 89 |             height: "45px",
 90 |             textColor: '#ff0000',
 91 |             textSize: "11px"
 92 |         }, {
 93 |             url: BASE_IMAGE_URL + 'people55.png',
 94 |             width: "55px",
 95 |             height: "55px",
 96 |             textColor: '#ffffff',
 97 |             textSize: "12px"
 98 |         }], [{
 99 |             url: BASE_IMAGE_URL + 'conv30.png',
100 |             width: "30px",
101 |             height: "27px",
102 |             anchorText: ["-3px", "0px"],
103 |             anchorIcon: ["27px", "28px"],
104 |             textColor: '#ff00ff',
105 |             textSize: "10px"
106 |         }, {
107 |             url: BASE_IMAGE_URL + 'conv40.png',
108 |             width: "40px",
109 |             height: "36px",
110 |             anchorText: ["-4px", "0px"],
111 |             anchorIcon: ["36px", "37px"],
112 |             textColor: '#ff0000',
113 |             textSize: "11px"
114 |         }, {
115 |             url: BASE_IMAGE_URL + 'conv50.png',
116 |             width: "50px",
117 |             height: "45px",
118 |             anchorText: ["-5px", "0px"],
119 |             anchorIcon: ["45px", "46px"],
120 |             textColor: '#0000ff',
121 |             textSize: "12px"
122 |         }], [{
123 |             url: BASE_IMAGE_URL + 'heart30.png',
124 |             width: "30px",
125 |             height: "26px",
126 |             anchorIcon: ["26px", "15px"],
127 |             textColor: '#ff00ff',
128 |             textSize: "10px"
129 |         }, {
130 |             url: BASE_IMAGE_URL + 'heart40.png',
131 |             width: "40px",
132 |             height: "35px",
133 |             anchorIcon: ["35px", "20px"],
134 |             textColor: '#ff0000',
135 |             textSize: "11px"
136 |         }, {
137 |           url: BASE_IMAGE_URL + 'heart50.png',
138 |             width: "50px",
139 |             height: "44px",
140 |             anchorIcon: ["44px", "25px"],
141 |             textSize: "12px"
142 |         }]];
143 |         class MarkerclustererContainer extends Polymer.Element {
144 |           static get is() { return 'markerclusterer-container'; }
145 |           static get properties() {
146 |             return {
147 |               markers: {
148 |                 type: Array,
149 |                 value: function() {return [];},
150 |                 observer: 'markersChanged'
151 |               },
152 |               markersToDisplay : {
153 |                 type:Array,
154 |                 value: function() {return [];}
155 |               },
156 |               selectedStyle:{
157 |                 type:Number,
158 |                 value:0
159 |               },
160 |               maxZoom : {
161 |                 type:Number,
162 |                 value:null,
163 |               },
164 |               minimumClusterSize: {
165 |                 type:Number,
166 |                 value:2
167 |               },
168 |               gridSize: {
169 |                 type:Number,
170 |                 value:60,
171 |                 observer:'_changeGridSize'
172 |               },
173 |               averageCenter: {
174 |                 type: Boolean,
175 |                 value:false
176 | 
177 |             },
178 |               activeStyle : {
179 |                 type:Number,
180 |                 value:-1,
181 |                 observer:'_changeStyle'
182 |               },
183 |               map: {
184 |                 type:Object,
185 |                 value:null
186 |               }
187 |             }
188 |           }
189 | 
190 |           constructor() {
191 |             super();
192 |             this._isStyleVisible = true;
193 |           }
194 | 
195 |           ready() {
196 |             super.ready();
197 |             
198 |             setTimeout(function() {
199 |               if (this.$.custom_cluster_icon.assignedNodes().length > 0) {
200 |                 this._isStyleVisible = false;
201 |               }
202 |             }.bind(this));
203 |             
204 | 
205 |           }
206 | 
207 |           refresh()  {
208 |             this.markersToDisplay = this.markers;
209 |           }
210 |           markersChanged(newValue,oldValue) {
211 |             this.markersToDisplay = newValue;
212 |           }
213 | 
214 |           clickClear() {
215 |             this.markersToDisplay = [];
216 |           }
217 | 
218 |           _changeGridSize(gridSize) {
219 |             if(typeof gridSize == "string") {
220 |              this.gridSize = Number(gridSize);
221 |             }
222 |           }
223 | 
224 |           _changeStyle(newValue,oldValue) {
225 |             newValue = Number(newValue);
226 |             if (newValue == -1) {
227 |               this.styles = null;
228 |             }
229 |             else {
230 |               this.styles = _STYLES[newValue];
231 |             }
232 |           }
233 |         }
234 | 
235 |         customElements.define('markerclusterer-container', MarkerclustererContainer);
236 |       })();
237 |   </script>
238 | </dom-module>


--------------------------------------------------------------------------------
/demo/my-css-pie.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../polymer/polymer-element.html">
  2 | 
  3 | <dom-module id="my-css-pie">
  4 |   <template>
  5 |     <style>
  6 |       :host {
  7 |         display:block;
  8 |       }
  9 |       #background  {
 10 |         position:relative;
 11 |       }
 12 |       .slice {
 13 |         position:absolute;
 14 |         top:0px;
 15 |         left:0px;
 16 |       }
 17 |       .pie  {
 18 |         position:absolute;
 19 |         top:0px;
 20 |         left:0px;
 21 |       }
 22 |     </style>
 23 |     <div id="container">
 24 |        <div id="background" style$="{{_computeContainerStyle(size,baseColor)}}">
 25 |          <template is="dom-repeat" items={{_computeSlices(colors,data,size)}}>
 26 |            <div class="slice" style$="{{_computeOuterStyle(item,size)}}">
 27 |              <div class="pie" style$="{{_computeInnerStyle(item,size)}}">
 28 |              </div>
 29 |            </div>
 30 |            <template is="dom-if" if="{{item.isRight}}" restamp="true">
 31 |              <div class="slice" style$="{{_computeSecondOuterStyle(item,size,index)}}">
 32 |               <div class="pie" style$="{{_computeSecondInnerStyle(item,size,index)}}">
 33 |               </div>
 34 |             </div>
 35 |            </template>
 36 |         </template>
 37 |   </template>
 38 | </dom-module>
 39 | 
 40 | <script>
 41 |   (function() {
 42 |     var DEFAULT_COLORS20  =  ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"];
 43 |     var DEFAULT_COLORS10  =  ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
 44 | 
 45 |     class MyCssPie extends Polymer.Element {
 46 |       static get is() { return 'my-css-pie'; }
 47 | 
 48 |       static get properties() {
 49 |         return {
 50 |           /**
 51 |           * The `colors` attribute specifies the colors to be used for each slice.
 52 |           * If no colors are specified then the default-colors are used.
 53 |           *
 54 |           * @attribute colors
 55 |           */
 56 |           colors: {
 57 |             type:Array,
 58 |             value: function() { return []; }
 59 |           },
 60 | 
 61 |           /**
 62 |           * The `size` property specifies the size of the piechart (Default: 50).
 63 |           *
 64 |           * @attribute size
 65 |           */
 66 |           size: {
 67 |             type:Number,
 68 |             value:50
 69 |           },
 70 | 
 71 |           /**
 72 |           * The `data` property specifies the values for each slice.
 73 |           *
 74 |           * @attribute data
 75 |           */
 76 |           data : {
 77 |             type:Array,
 78 |             value: function() { return []; }
 79 |           },
 80 |           /**
 81 |           * The `baseColor` property specifies the base-color of the contaner.
 82 |           */
 83 |           baseColor : {
 84 |             type:String,
 85 |             value:'transparent'
 86 |           }
 87 |         }
 88 |       }
 89 |       _computeContainerStyle(size,baseColor) {
 90 |          return "width:"+size+"px;height:"+size+"px;border-radius:"+size+"px;background-color:"+baseColor+";";
 91 |       }
 92 |       _computeOuterStyle(slice,size) {
 93 |          if (slice.isRight) {
 94 |            return "-webkit-transform:rotate("+slice.beforeDegree+"deg);transform:rotate("+slice.beforeDegree+"deg);clip:rect(0px,"+size+"px,"+size+"px,"+(size-100)/2+"px);width:"+size+"px;height:"+size+"px;border-radius :"+size+"px";
 95 |          }
 96 |          return "-webkit-transform:rotate("+slice.beforeDegree+"deg);transform:rotate("+slice.beforeDegree+"deg);clip:rect(0px,"+size+"px,"+size+"px,"+size/2+"px);width:"+size+"px;height:"+size+"px;border-radius :"+size+"px;";
 97 | 
 98 |       }
 99 |       _computeSecondOuterStyle(slice,size,index)  {
100 |         var beforeDegree = 180+ (index == 0 ? slice.beforeDegree : (slice.beforeDegree -1));
101 |         return "-webkit-transform:rotate("+beforeDegree+"deg);transform:rotate("+beforeDegree+"deg);clip:rect(0px,"+size+"px,"+size+"px,"+size/2+"px);width:"+size+"px;height:"+size+"px;border-radius:"+size+"px;";
102 |       }
103 |       _computeSecondInnerStyle(slice,size,index) {
104 |         var degree = (index == 0 ? slice.degree : (slice.degree +1));
105 |         return "-webkit-transform:rotate("+degree+"deg);transform:rotate("+degree+"deg);clip:rect(0px,"+size/2+"px,"+size+"px,0px);background-color:"+slice.backgroundColor+";width:"+size+"px;height:"+size+"px;border-radius:"+size+"px;";
106 |       }
107 |       _computeInnerStyle(slice,size) {
108 |         if (slice.isRight) {
109 |           return "-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:"+slice.backgroundColor+";width:"+size+"px;height:"+size+"px;border-radius :"+size+"px;clip:rect(0px,"+size/2+"px,"+size+"px,0px)";
110 |         }
111 |         return "-webkit-transform:rotate("+slice.degree+"deg);transform:rotate("+slice.degree+"deg);clip:rect(0px,"+size/2+"px,"+size+"px,0px);background-color:"+slice.backgroundColor+";width:"+size+"px;height:"+size+"px;border-radius :"+size+"px;";
112 |       }
113 |       _getColors(colors) {
114 |         if (!colors || colors.length == 0) {
115 |           colors = this.data.length > 10  ? DEFAULT_COLORS20 : DEFAULT_COLORS10;
116 |         }
117 |         return colors;
118 |       }
119 |       _calculateTotal(data) {
120 |         var total = 0;
121 |         for (var i =0;i<data.length;i++) {
122 |           total += data[i];
123 |         }
124 |         return total;
125 |       }
126 |       _calculatePercentages(data) {
127 |        var percentages = [];
128 |        var total = this._calculateTotal(data);
129 |        for (var i=0;i<data.length;i++) {
130 |          percentages.push(100*data[i]/total);
131 |        }
132 |        return percentages;
133 |       }
134 |       _computeSlices(colors,data,size) {
135 |         var backGroundColors = this._getColors(colors);
136 |         var percentages = this._calculatePercentages(data);
137 |         var slices = [];
138 |         var beforeDegree = 0;
139 |         var degree = 0;
140 |         for (var i =0;i<percentages.length;i++) {
141 |           var piePercentage = percentages[i];
142 |           var slice = {percentage:piePercentage,size:size,backgroundColor:backGroundColors[i],isRight:false};
143 |           if(piePercentage<=50) {
144 |             degree = parseFloat((180*piePercentage)/50);
145 |             slice.beforeDegree = beforeDegree;
146 |             slice.degree = degree;
147 |             beforeDegree +=degree;
148 |           }
149 |           else {
150 |             degree = parseFloat(((piePercentage-50)*180)/50);
151 |             slice.beforeDegree =  beforeDegree;
152 |             slice.degree = degree;
153 |             beforeDegree += (180+degree);
154 |             slice.isRight = true;
155 |           }
156 |           slices.push(slice);
157 |         }
158 |         return slices;
159 |       }
160 |     }
161 |     customElements.define('my-css-pie', MyCssPie);
162 |   })();
163 | </script>


--------------------------------------------------------------------------------
/demo/my-custom-clustericon.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../polymer/polymer-element.html">
 2 | <link rel="import" href="../google-map-markercluster-icon-behavior.html">
 3 | <link rel="import" href="my-css-pie.html">
 4 | 
 5 | <dom-module id="my-custom-clustericon">
 6 |   <template>
 7 |     <style>
 8 |       :host {
 9 |         position:absolute;
10 |         top:-15px;
11 |         left:-15px;
12 |       }
13 |       .icon  {
14 |         position:absolute;
15 |         left:0;
16 |         top:0;
17 |       }
18 |       .text {
19 |         position:absolute;
20 |         text-align:center;
21 |         font-family: Arial,sans-serif;
22 |         font-weight: bold;
23 |         font-style: normal;
24 |         text-decoration: none;
25 |         font-size:16px;
26 |         width:30px;
27 |         line-height:30px;
28 |         color:black;
29 |         top:0;
30 |         left:0;
31 |       }
32 |     </style>
33 |     <div class="icon" id="icon"><my-css-pie id="pie" size="30"></my-css-pie></img>
34 |     <div class="text" id="text">{{text}}</div>
35 |   </template>
36 | </dom-module>
37 |   <script>
38 |     class MyCustomClusterIcon extends ClusterIconBehavior(Polymer.Element) {
39 |       static get is() { return 'my-custom-clustericon'; }
40 |       static get properties() {
41 |         return {
42 |           iconOffset: {
43 |             type:Array,
44 |             value: function()  {return ["15px","15px"]}
45 |           },
46 |           textOffset: {
47 |             type:Array,
48 |             value: function()  {return [0,0]}
49 |           }
50 |         }
51 |       }
52 | 
53 |       constructor() {
54 |         super();
55 |       }
56 |       ready() {
57 |         super.ready();
58 |       }
59 |       updateMarkers(markers) {
60 |         this.$.pie.data = [10,20,40,30];
61 |         this.text = markers.length;
62 |       }
63 |     }
64 | 
65 |     customElements.define('my-custom-clustericon', MyCustomClusterIcon);
66 |  </script>
67 | </polymer-element>


--------------------------------------------------------------------------------
/demo/my-custom-marker.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../polymer/polymer-element.html">
 2 | <link rel="import" href="../google-map-overlayview-marker-behavior.html">
 3 | <link rel="import" href="../google-map-overlayview-behavior.html">
 4 | <link rel="import" href="my-css-pie.html">
 5 | 
 6 | <dom-module id="my-custom-marker">
 7 |   <template>    
 8 |     <my-css-pie id="chart" data="{{data}}"></my-css-pie>
 9 |   </template>
10 |   <script>
11 |     class MyCustomMarker extends GoogleMapOverlayViewMarkerBehavior(Polymer.Element) {
12 |       static get is() { return 'my-custom-marker'; }
13 | 
14 |       constructor() {
15 |         super();        
16 |         this.infoWindow = null;
17 |         this.data = [10,20,40,30];
18 |       }
19 | 
20 |       ready() {
21 |         super.ready();        
22 |         this.addEventListener('click', function(event) {
23 |           this.onClickMarker();
24 |         }.bind(this));
25 |       }
26 | 
27 |       onAdd() {
28 |         this.style.cursor="pointer";                
29 |         //this.pieChart.data = this.data ;
30 |         this.$.chart.size = 25;
31 |         var panes = this.overlay.getPanes();
32 |         panes.overlayMouseTarget.appendChild(this);
33 |       }
34 |       onClickMarker() {
35 |         if (!this.infoWindow) {
36 |           this.infoWindow = new google.maps.InfoWindow();
37 |         }
38 |         var divContainer = document.createElement("div");
39 |         divContainer.style.width="150px";
40 |         divContainer.style.height="140px";
41 |         var pieChart = document.createElement('my-css-pie');
42 |         pieChart.data = this.data;
43 |         pieChart.size = 100;
44 |         divContainer.appendChild(pieChart);
45 |         this.infoWindow.setContent(divContainer);
46 |         this.infoWindow.setPosition(this.position);
47 |         this.infoWindow.open(this.overlay.getMap());
48 | 
49 |       }
50 |       onRemove() {
51 |           super.onRemove();
52 |           if (!this.pieChart)
53 |             return;
54 |           this.shadowRoot.removeChild(this.pieChart);
55 |           this.infoWindow = null;
56 |       }
57 |     }
58 | 
59 |     customElements.define('my-custom-marker', MyCustomMarker);
60 |  </script>
61 | </dom-module>
62 | 


--------------------------------------------------------------------------------
/demo/simple.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 6 | 
 7 |     <title>MarkerClusterer v3 Example</title>
 8 | 
 9 |     <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
10 | 
11 |     <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
12 |     <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
13 | 
14 | 
15 |     <script src="data.json" type="text/javascript"></script>
16 |     <link rel="import" href="../google-map-markerclusterer.html">
17 |     <link rel="import" href="../../google-map/google-map.html">
18 |     <style type="text/css">
19 |         body {
20 |           margin: 0;
21 |           padding: 10px 20px 20px;
22 |           font-family: Arial;
23 |           font-size: 16px;
24 |         }
25 | 
26 |         #map-container {
27 |           padding: 6px;
28 |           border-width: 1px;
29 |           border-style: solid;
30 |           border-color: #ccc #ccc #999 #ccc;
31 |           -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
32 |           -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
33 |           box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
34 |           width: 600px;
35 |           height:400px;
36 |         }
37 |         google-map {
38 |           display:block;
39 |           width:600px;
40 |           height:400px;
41 |         }
42 |       </style>
43 |       <script type="text/javascript">
44 | 
45 |         function initialize() {
46 |           var map = document.querySelector("#mapelement");
47 |           var clusterer = document.querySelector("google-map-markerclusterer");
48 |           var markers = [];
49 |           for (var i = 0; i < 100; i++) {
50 |             var dataPhoto = data.photos[i];
51 |             var latLng = new google.maps.LatLng(dataPhoto.latitude,
52 |                 dataPhoto.longitude);
53 |             var marker = new google.maps.Marker({
54 |               position: latLng
55 |             });
56 |             markers.push(marker);
57 |           }
58 |           clusterer.map = map.map;
59 |           clusterer.markers = markers;
60 |         }
61 |         window.addEventListener('WebComponentsReady', function(e) {
62 |           document.querySelector("#mapelement").addEventListener("google-map-ready",initialize);
63 |         });
64 |       </script>
65 |     </head>
66 |     <body>
67 |       <h3>A simple example of MarkerClusterer (100 markers)</h3>
68 |       <p>
69 |         &nbsp;
70 |       </p>
71 |       <div id="map-container">
72 |         <google-map latitude="37.4419" id="mapelement" longitude="-122.1419" zoom="3"></google-map>
73 |         <google-map-markerclusterer id="clusterer"></google-map-markerclusterer>
74 |       </div>
75 |       </div></div>
76 |     </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/google-map-defaulticon.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer-element.html">
  2 | <link rel="import" href="google-map-markercluster-icon-behavior.html">
  3 | 
  4 | <dom-module id="google-map-defaulticon">
  5 |   <template>
  6 |     <style>
  7 |         :host {
  8 |           position:absolute;
  9 |           user-select: none;
 10 |         }
 11 |         .icon  {
 12 |           position:absolute;
 13 |           left:0;
 14 |           top:0;
 15 |         }
 16 |         .text {
 17 |           position:absolute;
 18 |           text-align:center;
 19 |           font-family: Arial,sans-serif;
 20 |           font-weight: bold;
 21 |           font-style: normal;
 22 |           text-decoration: none;
 23 |         }
 24 |       </style>
 25 |     <img class="icon" id="icon" src$="{{_iconStyle.url}}"></img>
 26 |     <div class="text" id="text">{{_computeText(markers)}}</div>
 27 |   </template>
 28 | </dom-module>
 29 | <script>
 30 |   /* global Markerclusterer */
 31 |   (function() {
 32 |     var BASE_IMAGE_URL = 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/';
 33 |     var DEFAULT_STYLES = [
 34 |       {
 35 |         url: BASE_IMAGE_URL + 'm1.png',
 36 |         width: '53px',
 37 |         height: '52px',
 38 |         textColor: 'black',
 39 |         textSize: '11px'
 40 |       },
 41 |       {
 42 |         url: BASE_IMAGE_URL + 'm2.png',
 43 |         width: '56px',
 44 |         height: '56px',
 45 |         textColor: 'black',
 46 |         textSize: '11px'
 47 |       },
 48 |       {
 49 |         url: BASE_IMAGE_URL + 'm3.png',
 50 |         width: '66px',
 51 |         height: '66px',
 52 |         textColor: 'black',
 53 |         textSize: '12px'
 54 |       },
 55 |       {
 56 |         url: BASE_IMAGE_URL + 'm4.png',
 57 |         width: '78px',
 58 |         height: '78px',
 59 |         textColor: 'black',
 60 |         textSize: '13px'
 61 |       },
 62 |       {
 63 |         url: BASE_IMAGE_URL +'m5.png',
 64 |         width: '90px',
 65 |         height: '90px',
 66 |         textColor: 'black',
 67 |         textSize: '14px'
 68 |       }
 69 |     ];
 70 |     /*
 71 |      * The `google-map-defaulticon` element is displayed by default when the user does not provide a custom cluster icon.
 72 |      * @customElement
 73 |      * @polymer
 74 |      */
 75 |     class GoogleMapDefaultIcon extends ClusterIconBehavior(Polymer.Element) {
 76 |       static get is() { return 'google-map-defaulticon'; }
 77 | 
 78 |       static get properties() {
 79 |         return {
 80 |           /**
 81 |            * The list of styles that should be applied to the cluster icon for the various
 82 |            * cluster levels. If not set, the default styles will be used.
 83 |            * Must be of object with following keys `{url,width,height,textColor,textSize}`
 84 |            */
 85 |           styles :  {
 86 |             type:Array,
 87 |             value: function() {return DEFAULT_STYLES;}
 88 |           },
 89 |           /**
 90 |            * The active style for the current cluster level
 91 |            */
 92 |           _iconStyle : {
 93 |             type: Object,
 94 |             value: function() {return {};}
 95 |           }
 96 |         }
 97 |       }
 98 | 
 99 |       static get observers() {
100 |         return [
101 |           '_updateCustom(markers,styles)'
102 |         ]
103 |       }
104 | 
105 |       /**
106 |        * Calculates the index of the active style that should be displayed for the current cluster.
107 |        */
108 |       _calcActiveStyleIndex(markerLength,numStyles) {
109 |         var index = 0;
110 |         var dv = markerLength;
111 |         while (dv !== 0) {
112 |           dv = parseInt(dv / 10, 10);
113 |           index++;
114 |         }
115 |         return Math.max(0, Math.min(index, numStyles) - 1);
116 |       }
117 | 
118 |       /**
119 |        * Returns the text that should be displayed
120 |        */
121 |       _computeText(markers) {
122 |         return markers.length;
123 |       }
124 | 
125 |       /**
126 |        * Observer function that is called when either the `markers` or `styles` is changed.
127 |        */
128 |       _updateCustom(markers,styles) {
129 |           styles = styles || DEFAULT_STYLES;
130 |           // check also cluster.markers because remove on cluster will also delete the markers field
131 |           if (!markers || !styles ) {
132 |             return;
133 |           }
134 |           this._iconStyle = styles[this._calcActiveStyleIndex(markers.length,styles.length)];
135 |           var iconOffset = this._iconStyle.anchorIcon ||  [parseInt(this._iconStyle.height)/2+'px',parseInt(this._iconStyle.width)/2+'px'];
136 |           var textOffset = this._iconStyle.anchorText || ['0px','0px'];
137 |           this.$.text.style.left = textOffset[1];
138 |           this.$.text.style.top = textOffset[0];
139 |           this.$.text.style.width = this._iconStyle.width;
140 |           this.$.text.style.height = this._iconStyle.height;
141 |           this.$.text.style.lineHeight = this._iconStyle.height;
142 |           this.$.text.style.color = this._iconStyle.textColor;
143 |           this.$.text.style.fontSize = this._iconStyle.textSize;
144 |           this.style.left = '-'+iconOffset[1];
145 |           this.style.top = '-'+iconOffset[0];
146 |           this.$.text.style.position='absolute';
147 |       }
148 |     }
149 | 
150 |     customElements.define('google-map-defaulticon', GoogleMapDefaultIcon);
151 |   })();
152 | </script>
153 | </dom-module>


--------------------------------------------------------------------------------
/google-map-markercluster-icon-behavior.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   /**
 3 |    * Use `ClusterIconBehavior` to implement elements that should display a custom cluster icon.
 4 |    * Users should implement the `updateMarkers` function if they need to customize based on the markers that are contained
 5 |    * in the cluster.
 6 |    * @polymer
 7 |    * @mixinFunction
 8 |   */
 9 |   ClusterIconBehavior = function(superClass) {
10 |     return class extends superClass {
11 |       static get properties() {
12 |         return {
13 |           /**
14 |            * The markers that are contained in the cluster.
15 |            */
16 |           markers: {
17 |             type: Array,
18 |             observer: 'updateMarkers'
19 |           }
20 |         }
21 |       }
22 |       /**
23 |        * Observer function that is called when the `markers` Array is changed.
24 |        */
25 |       updateMarkers(markers) {
26 | 		  	//abstract
27 |       }
28 |     }
29 |   }
30 | </script>


--------------------------------------------------------------------------------
/google-map-markercluster.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer-element.html">
  2 | <link rel="import" href="google-map-overlayview-behavior.html">
  3 | 
  4 | <dom-module id="google-map-markercluster">
  5 |   <template>
  6 |     <div hidden$="{{hidden}}">
  7 |       <slot id="overlayContent"></slot>
  8 |     </div>
  9 |   </template>
 10 |   <script>
 11 |     /*
 12 |      * The `google-map-markercluster` is an internal element that is used by `google-map-markerclusterer`. By default it wraps a `<google-map-defaulticon>` element
 13 |      * @customElement
 14 |      * @polymer
 15 |      */
 16 |     class GoogleMapMarkerCluster extends GoogleMapOverlayViewBehavior(Polymer.Element) {
 17 |       static get is() { return 'google-map-markercluster'; }
 18 | 
 19 |       /**
 20 |        * Fired when the mouse enters the area of the cluster.
 21 |        * @param {google.maps.MouseEvent} event The mouse event.
 22 |        * @event google-map-markercluster-mouseover
 23 |        */
 24 | 
 25 |       /**
 26 |        * Fired when the mouse leaves the area of the cluster.
 27 |        * @param {google.maps.MouseEvent} event The mouse event.
 28 |        * @event google-map-markercluster-mouseout
 29 |        */
 30 | 
 31 |       /**
 32 |        * Fired when the cluster was clicked.
 33 |        * @param {google.maps.MouseEvent} event The mouse event.
 34 |        * @event google-map-markercluster-click
 35 |        */
 36 | 
 37 |       constructor() {
 38 |         super();
 39 |         this.markers = [];
 40 |         this._listeners = {};
 41 |       }
 42 | 
 43 |       static get properties() {
 44 |         return {
 45 |           /**
 46 |            * The center position of the cluster element (lat,lon)
 47 |            */
 48 |           center:{
 49 |             type: Object,
 50 |             value: null,
 51 |             notify:true
 52 |           },
 53 |           /**
 54 |            * When set the cluster icon is hidden
 55 |            */
 56 |           hidden: {
 57 |             type:Boolean,
 58 |             value:false
 59 |           }
 60 |         }
 61 |       }
 62 |       
 63 |       ready() {
 64 |         super.ready();
 65 |         this.$.overlayContent.addEventListener('slotchange', this._initClusterSubIcon.bind(this));
 66 |         setTimeout(this._initClusterSubIcon.bind(this));        
 67 |       }
 68 | 
 69 |       _initClusterSubIcon() {
 70 |         var contents = this.$.overlayContent.assignedNodes();
 71 |         if (contents.length > 0) {
 72 |           this.clusterSubIcon = contents[0];
 73 |           this.clusterSubIcon.markers = this.markers;
 74 |         }
 75 |       }
 76 | 
 77 |       disconnectedCallback() {
 78 |         this.map = null;
 79 |       }
 80 | 
 81 |       /**
 82 |        * draw callback when the cluster is drawn.
 83 |        */
 84 |       draw() {
 85 |         if (this.visible) {
 86 |           var pos = this.getPosFromLatLng(this.center);
 87 |           this.style.top = pos.y + 'px';
 88 |           this.style.left = pos.x + 'px';
 89 |         }
 90 |       }
 91 | 
 92 |       /**
 93 |        * Update the icon when a marker is added
 94 |        */
 95 |       _updateIcon() {
 96 |         var mCount = this.markers.length;
 97 |         if (this.maxZoom !== null && this.map.getZoom() > this.maxZoom) {
 98 |          this.hidden = true;
 99 |          return;
100 |         }
101 | 
102 |         if (mCount < this.minimumClusterSize) {
103 |            // Min cluster size not yet reached.
104 |            this.hidden = true;
105 |            return;
106 |         }
107 |         if (this.clusterSubIcon) {
108 |           this.clusterSubIcon.markers = this.markers;
109 |         }
110 |         this.hidden = false;
111 |       }
112 | 
113 |       /**
114 |        * Check if the marker was already added
115 |        */
116 |       _isMarkerAlreadyAdded(marker) {
117 |         var i;
118 |         if (this.markers.indexOf) {
119 |           return this.markers.indexOf(marker) !== -1;
120 |         } else {
121 |           for (i = 0; i < this.markers.length; i++) {
122 |             if (marker === this.markers[i]) {
123 |               return true;
124 |             }
125 |           }
126 |         }
127 |         return false;
128 |       }
129 | 
130 |        /**
131 |        * Calculates the extended bounds that is given by the contained markers.
132 |        */
133 |       _calculateBounds() {
134 |          var bounds = new google.maps.LatLngBounds(this.center, this.center);
135 |          this.bounds = this.getExtendedBounds(bounds,this.gridSize);
136 |       }
137 | 
138 |       /**
139 |        * Check if marker is inside the extended bounds.
140 |        */
141 |       isMarkerInClusterBounds(marker) {
142 |         return this.bounds.contains(marker.getPosition());
143 |       }
144 | 
145 |       /**
146 |        * Calculates the bounds that is given by the contained markers.
147 |        */
148 |       _getBounds() {
149 |          var i;
150 |          var bounds = new google.maps.LatLngBounds(this.center, this.center);
151 |          for (i = 0; i < this.markers.length; i++) {
152 |            bounds.extend(this.markers[i].getPosition());
153 |          }
154 |          return bounds;
155 |       }
156 | 
157 |       /**
158 |        * Adds a marker to the cluster and updates the cluster icon
159 |        */
160 |       addMarker(marker) {
161 |         var i;
162 |         var mCount;
163 |         var mz;
164 |         if (this._isMarkerAlreadyAdded(marker)) {
165 |          return false;
166 |         }
167 |         if (!this.center) {
168 |          this.center = marker.getPosition();
169 |          this._calculateBounds();
170 |         } else {
171 |          if (this.averageCenter) {
172 |            var l = this.markers.length + 1;
173 |            var lat = (this.center.lat() * (l - 1) + marker.getPosition().lat()) / l;
174 |            var lng = (this.center.lng() * (l - 1) + marker.getPosition().lng()) / l;
175 |            this.center = new google.maps.LatLng(lat, lng);
176 |            this._calculateBounds();
177 |          }
178 |         }
179 |         marker.isAdded = true;
180 |         this.markers.push(marker);
181 | 
182 |         mCount = this.markers.length;
183 |         mz = this.maxZoom;
184 |         if (mz !== null && this.map.getZoom() > mz) {
185 |          // Zoomed in past max zoom, so show the marker.
186 |          if (marker.getMap() !== this.map) {
187 |            marker.setMap(this.map);
188 |          }
189 |         } else if (mCount < this.minimumClusterSize) {
190 |          // Min cluster size not reached so show the marker.
191 |          if (marker.getMap() !== this.map) {
192 |            marker.setMap(this.map);
193 |          }
194 |         } else if (mCount === this.minimumClusterSize) {
195 |          // Hide the markers that were showing.
196 |          for (i = 0; i < mCount; i++) {
197 |            this.markers[i].setMap(null);
198 |          }
199 |         } else {
200 |          marker.setMap(null);
201 |         }
202 | 
203 |         this._updateIcon();
204 |         return true;
205 |       }
206 | 
207 |       /**
208 |        * onRemove callback when the cluster is removed.
209 |        * Clears the event listeners.
210 |        */
211 |       onRemove() {
212 |         this._clearListener('mouseout');
213 |         this._clearListener('mouseover');
214 |         this._clearListener('click');
215 |         this._clearListener('mousedown');
216 |         this._clearListener('boundsChanged');
217 |         google.maps.event.clearInstanceListeners(this);
218 |         if (this.parentNode) {
219 |           this.parentNode.removeChild(this);
220 |         }
221 |         this.markers = [];
222 |       }
223 | 
224 |       /**
225 |        * onAdd callback when the cluster is added.
226 |        * Event listeners for various events are setup.
227 |        */
228 |       onAdd() {
229 |         this.style.position = 'absolute';
230 |         this.style.cursor='pointer';
231 |         var cMouseDownInCluster;
232 |         var cDraggingMapByCluster;
233 | 
234 |         this.overlay.getPanes().overlayMouseTarget.appendChild(this);
235 | 
236 |         // Fix for Issue 157
237 |         this._listeners.boundsChanged = google.maps.event.addListener(this.map, 'bounds_changed', function () {
238 |           cDraggingMapByCluster = cMouseDownInCluster;
239 |         });
240 | 
241 |         this._listeners.mousedown = google.maps.event.addDomListener(this, 'mousedown', function () {
242 |           cMouseDownInCluster = true;
243 |           cDraggingMapByCluster = false;
244 |         });
245 | 
246 |         this._listeners.click =  google.maps.event.addDomListener(this, 'click', function (e) {
247 |           cMouseDownInCluster = false;
248 |           this.dispatchEvent(new CustomEvent('google-map-markercluster-click', { bubbles: true, composed: true }));                      
249 |           if (!cDraggingMapByCluster) {
250 |             var theBounds;
251 |             var mz;
252 | 						if (!this.zoomOnClick) {
253 |               return;
254 | 						}
255 |             mz = this.maxZoom;
256 |             theBounds = this._getBounds();
257 |             this.map.fitBounds(theBounds);
258 |             // There is a fix for Issue 170 here:
259 |            /* this.async(function() {
260 |               this.map.fitBounds(theBounds);
261 |               // Don't zoom beyond the max zoom level
262 | 
263 |             },null,100);*/
264 |             if (mz !== null && (this.map.getZoom() > mz)) {
265 |               this.map.setZoom(mz + 1);
266 |             }
267 |             // Prevent event propagation to the map:
268 |             e.cancelBubble = true;
269 |             if (e.stopPropagation) {
270 |               e.stopPropagation();
271 |             }
272 |           }
273 |         }.bind(this));
274 | 
275 | 
276 |         this._forwardEvent('mouseover');
277 |         this._forwardEvent('mouseout');
278 | 
279 |       }
280 |       _forwardEvent(name) {
281 |         this._listeners[name] = google.maps.event.addDomListener(this, name, function() {
282 |           this.dispatchEvent(new CustomEvent('google-map-markercluster-' + name, { bubbles: true, composed: true }));                                
283 |         }.bind(this));
284 |       }
285 | 
286 |       _clearListener(name) {
287 |         if (this._listeners[name]) {
288 |           google.maps.event.removeListener(this._listeners[name]);
289 |           this._listeners[name] = null;
290 |         }
291 |       }
292 |     }
293 | 
294 |     customElements.define('google-map-markercluster', GoogleMapMarkerCluster);
295 |   </script>
296 | </dom-module>


--------------------------------------------------------------------------------
/google-map-markerclusterer.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer-element.html">
  2 | <link rel="import" href="google-map-overlayview-behavior.html">
  3 | <link rel="import" href="google-map-markercluster.html">
  4 | <link rel="import" href="google-map-defaulticon.html">
  5 | <link rel="import" href="../polymer/lib/utils/debounce.html">
  6 | <link rel="import" href="../polymer/lib/utils/flattened-nodes-observer.html">
  7 | 
  8 | <dom-module id="google-map-markerclusterer">
  9 | 
 10 | 	<template><slot id="clustericontemplate" name="cluster-icon"></slot></template>
 11 | 
 12 |   <script>
 13 |     /* global google */
 14 | 		/* global Markerclusterer */
 15 |     (function() {
 16 | 
 17 |       /*
 18 |        * The `google-map-markerclusterer` element is a port of markercluster-plus to polymer.
 19 |        * It helps to cluster markers on a google-map together
 20 |        * ##### Example
 21 |        *     <google-map-markerclusterer></google-map-markerclusterer>
 22 |        *
 23 |        * ##### Example -  custom cluster marker
 24 |        *
 25 |        *     <google-map-markerclusterer>
 26 |        *       <my-custom-clustericon class="cluster-icon"></my-custom-clustericon>
 27 |        *     </google-map-markerclusterer>
 28 |        *
 29 |        *
 30 |        * @customElement
 31 |        * @polymer
 32 |        * @demo demo/index.html
 33 |        * @demo demo/simple.html
 34 |        */
 35 |       class GoogleMapMarkerclusterer extends GoogleMapOverlayViewBehavior(Polymer.Element) {
 36 |         static get is() { return 'google-map-markerclusterer'; }
 37 | 
 38 |         /**
 39 |          * Fired when the clustering of the markers starts.
 40 |          * @event google-map-markercluster-clustering-start
 41 |          */
 42 | 
 43 |         /**
 44 |          * Fired when the clustering of the markers ends.
 45 |          * @event google-map-markercluster-clustering-end
 46 |          */
 47 | 
 48 |         /**
 49 |          * Fired when the mouse enters the area of the cluster.
 50 |          * @param {google.maps.MouseEvent} event The mouse event.
 51 |          * @event google-map-markercluster-mouseover
 52 |          */
 53 | 
 54 |         /**
 55 |          * Fired when the mouse leaves the area of the cluster.
 56 |          * @param {google.maps.MouseEvent} event The mouse event.
 57 |          * @event google-map-markercluster-mouseout
 58 |          */
 59 | 
 60 |         /**
 61 |          * Fired when the cluster was clicked.
 62 |          * @param {google.maps.MouseEvent} event The mouse event.
 63 |          * @event google-map-markercluster-click
 64 |          */
 65 | 
 66 |         static get properties() {
 67 |           return {
 68 |             /**
 69 |              * Markers that should be clustered.
 70 |              */
 71 |             markers: {
 72 |               type:Array,
 73 |               value: function() {return [];},
 74 |               observer:'_markersChanged'
 75 |             },
 76 | 
 77 |             /**
 78 |             * If set, the zoom level is set such that all markers (google-map-marker children) are brought into view.
 79 |             */
 80 |             fitToMarkers: {
 81 |               type: Boolean,
 82 |               value: false,
 83 |               observer: '_fitToMarkersChanged'
 84 |             },
 85 | 
 86 |             /**
 87 |             * BatchSize specifies the amount of markers that should be processed per run.
 88 |             */
 89 |             batchSize : {
 90 |               type: Number,
 91 |               value: 2000
 92 |             },
 93 | 
 94 |             /**
 95 |             * If set ignores hidden markers when creating the clusters.
 96 |             */
 97 |             ignoreHidden: {
 98 |               type: Boolean,
 99 |               value: false
100 |             },
101 | 
102 |             /**
103 |             * Specifies the size of the grid for each cluster in pixel.
104 |             */
105 |             gridSize:{
106 |               type: Number,
107 |               value: 60
108 |             },
109 | 
110 |             /**
111 |             *  Sepcifies the minimum number of markers to be clustered.
112 |             */
113 |             minimumClusterSize : {
114 |               type: Number,
115 |               value: 2
116 |             },
117 | 
118 |             /**
119 |             * If set, the center of the cluster is set to the average of all locations of its containing markers.
120 |             * Otherwise the cluster center will be the one of the first marker added to it.
121 |             */
122 |             averageCenter : {
123 |               type: Boolean,
124 |               value: false
125 |             },
126 | 
127 |             /**
128 |             * Specifies the maximum zoom at which individual markers are shown.
129 |             * By default no maxZoom is set.
130 |             */
131 |             maxZoom : {
132 |               type: Number,
133 |               value: null
134 |             },
135 | 
136 |             /**
137 |             * If set, the map is zoomed far enough that all markers of the cluster fit inside the viewport (Default: true).
138 |             */
139 |             zoomOnClick: {
140 |               type:Boolean,
141 |               value:true
142 |             },
143 |             /**
144 |             * Styles for the google-map-defaulticon element.
145 |             */
146 |             styles : {
147 |               type: Array,
148 |               value: null,
149 |               observer:'_changeStyles'
150 |             }
151 |           }
152 |         }
153 | 
154 |         static get observers() {
155 |           return [
156 |             '_optionChanged(gridSize,averageCenter,minimumClusterSize,maxZoom)'
157 |           ]
158 |         }
159 | 
160 |         constructor() {
161 |           super();
162 |           this.clusters = [];
163 |           this.listeners = [];
164 |           // TODO move to overlayview behavior
165 |           this.isReady = false;
166 |           this._clusterIconTemplate = null;
167 |         }
168 | 
169 |         ready() {
170 |           super.ready();
171 |           this._boundHandler = this._initClusterIconTemplate.bind(this);
172 |           setTimeout(this._boundHandler);
173 |           //this.$.clustericontemplate.addEventListener('slotchange', this._boundHandler); # not possible because we take it out of the slot and add it below to the google-map-markercluster
174 |         }
175 | 
176 |         _initClusterIconTemplate() {
177 |           var clusterIconTemplateContent = this.$.clustericontemplate.assignedNodes({flatten:true})
178 |           .filter(n => n.nodeType === Node.ELEMENT_NODE);
179 |           if (clusterIconTemplateContent.length > 0) {
180 |             clusterIconTemplateContent = clusterIconTemplateContent[0];
181 |             clusterIconTemplateContent.removeAttribute("slot");
182 |           }
183 |           else {
184 |             clusterIconTemplateContent = document.createElement('google-map-defaulticon');
185 |           }
186 |           this._clusterIconTemplate = document.createElement('google-map-markercluster');
187 |           this._clusterIconTemplate.appendChild(clusterIconTemplateContent);
188 |         }
189 | 
190 |         /**
191 |          * Calculates the distance between two latlng locations in km.
192 |          *
193 |          * @param {google.maps.LatLng} p1 The first lat lng point.
194 |          * @param {google.maps.LatLng} p2 The second lat lng point.
195 |          * @return {number} The distance between the two points in km.
196 |          * @see http://www.movable-type.co.uk/scripts/latlong.html
197 |         */
198 |         _distanceBetweenPoints(p1, p2) {
199 |           var R = 6371; // Radius of the Earth in km
200 |           var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
201 |           var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
202 |           var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
203 |             Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
204 |             Math.sin(dLon / 2) * Math.sin(dLon / 2);
205 |           var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
206 |           var d = R * c;
207 |           return d;
208 |         }
209 | 
210 |         /**
211 |          * Returns if the marker is inside the specified bounds
212 |          */
213 |         _isMarkerInBounds(marker, bounds) {
214 |           return bounds.contains(marker.getPosition());
215 |         }
216 | 
217 |         /**
218 |          * Called when the markerclusterer is added to the map.
219 |          * Events are initialized.
220 |          */
221 |         onAdd() {
222 |           var mc = this;
223 |           this.isReady = true;
224 |           this._repaintDebouncer = Polymer.Debouncer.debounce(this._repaintDebouncer, Polymer.Async.timeOut.after(250), this.repaint.bind(this));
225 | 
226 |           // Add the map event listeners
227 |           this.listeners = [
228 |             google.maps.event.addListener(this.map, 'zoom_changed', function () {
229 |               mc._resetClusters();
230 |               // Workaround for this Google bug: when map is at level 0 and "-" of
231 |               // zoom slider is clicked, a "zoom_changed" event is fired even though
232 |               // the map doesn't zoom out any further. In this situation, no "idle"
233 |               // event is triggered so the cluster markers that have been removed
234 |               // do not get redrawn. Same goes for a zoom in at maxZoom.
235 |               if (this.getZoom() === (this.get('minZoom') || 0) || this.getZoom() === this.get('maxZoom')) {
236 |                 //google.maps.event.trigger(this, "idle");
237 |               }
238 |             }),
239 |             google.maps.event.addListener(this.map, 'idle', function () {
240 |               this._computeClusters(0);
241 |             }.bind(this))
242 |           ];
243 |         }
244 | 
245 |         /**
246 |          * Adds a marker to a cluster, or creates a new cluster.
247 |          */
248 |         _addToClosestCluster(marker) {
249 |           var i, d, cluster, center;
250 |           var distance = 40000; // Some large number
251 |           var clusterToAddTo = null;
252 |             for (i = 0; i < this.clusters.length; i++) {
253 |               cluster = this.clusters[i];
254 |               center = cluster.center;
255 |               if (center) {
256 |                 d = this._distanceBetweenPoints(center, marker.getPosition());
257 |                 if (d < distance) {
258 |                   distance = d;
259 |                   clusterToAddTo = cluster;
260 |                 }
261 |               }
262 |             }
263 | 
264 |           if (clusterToAddTo && clusterToAddTo.isMarkerInClusterBounds(marker)) {
265 |             clusterToAddTo.addMarker(marker);
266 |           } else {
267 |             cluster = this._clusterIconTemplate.cloneNode(true);
268 |             cluster._enableProperties();
269 |             //this.shadowRoot.appendChild(cluster);
270 |             // WORKAROUND for
271 |             /*var defaultIcon = cluster.querySelector('google-map-defaulticon');
272 |             if (defaultIcon) {
273 |                 defaultIcon.styles = this.styles;
274 |             }*/
275 |             cluster.styles = this.styles;
276 |             cluster.map = this.map;
277 |             cluster.minimumClusterSize = this.minimumClusterSize;
278 |             cluster.maxZoom = this.maxZoom;
279 |             cluster.gridSize = this.gridSize;
280 |             cluster.zoomOnClick = this.zoomOnClick;
281 |             cluster.averageCenter = this.averageCenter;
282 | 
283 |             cluster.addMarker(marker);
284 |             this.clusters.push(cluster);
285 | 
286 |           }
287 |         }
288 | 
289 |         /**
290 |         * Creates the clusters. This is done in batches to avoid timeout errors
291 |         *  in some browsers when there is a huge number of markers.
292 |         *
293 |         * @param {number} iFirst The index of the first marker in the batch of
294 |         *  markers to be added to clusters.
295 |         */
296 |         _computeClusters(iFirst) {
297 |           var i, marker;
298 |           var mapBounds;
299 |           var mc = this;
300 |           if (!this.isReady || !this.markers) {
301 |             return;
302 |           }
303 | 
304 |           // Cancel previous batch processing if we're working on the first batch:
305 |           if (iFirst === 0) {
306 |             this.dispatchEvent(new CustomEvent('google-map-markercluster-clustering-start', { bubbles: true, composed: true }));
307 | 
308 |             if (typeof this.timerRefStatic !== 'undefined') {
309 |               clearTimeout(this.timerRefStatic);
310 |               delete this.timerRefStatic;
311 |             }
312 |           }
313 | 
314 |           // Get our current map view bounds.
315 |           // Create a new bounds object so we don't affect the map.
316 |           //
317 |           // See Comments 9 & 11 on Issue 3651 relating to this workaround for a Google Maps bug:
318 |           if (this.map.getZoom() > 3) {
319 |             mapBounds = new google.maps.LatLngBounds(this.map.getBounds().getSouthWest(),
320 |               this.map.getBounds().getNorthEast());
321 |           } else {
322 |             mapBounds = new google.maps.LatLngBounds(new google.maps.LatLng(85.02070771743472, -178.48388434375), new google.maps.LatLng(-85.08136444384544, 178.00048865625));
323 |           }
324 |           var bounds = this.getExtendedBounds(mapBounds,this.gridSize);
325 | 
326 |           var iLast = Math.min(iFirst + this.batchSize, this.markers.length);
327 | 
328 |           for (i = iFirst; i < iLast; i++) {
329 |             marker = this.markers[i];
330 |             if (!marker.isAdded && this._isMarkerInBounds(marker, bounds)) {
331 |               if (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible())) {
332 |                 this._addToClosestCluster(marker);
333 |               }
334 |             }
335 |           }
336 | 
337 |           if (iLast < this.markers.length) {
338 |             this.timerRefStatic = setTimeout(function () {
339 |               mc._computeClusters(iLast);
340 |             }, 0);
341 |           } else {
342 |             delete this.timerRefStatic;
343 |             this.dispatchEvent(new CustomEvent('google-map-markercluster-clustering-end', { bubbles: true, composed: true }));
344 |           }
345 |         }
346 | 
347 |         /**
348 |          * Callback that is called when the markerclusterer is removed from the map.
349 |          * This will put all clustered markers back on the map
350 |          */
351 |         onRemove() {
352 |           // Put all the managed markers back on the map:
353 |           for (var i = 0, m; m = this.markers[i]; ++i) {
354 |             if (m.getMap() !== this.map) {
355 |               m.setMap(this.map);
356 |             }
357 |           }
358 |         }
359 | 
360 |         /**
361 |          * Observer function that is called when `fitToMarkers` is changed.
362 |          */
363 |         _fitToMarkersChanged() {
364 |           // TODO(ericbidelman): respect user's zoom level.
365 |           if (this.map && this.fitToMarkers) {
366 |             var latLngBounds = new google.maps.LatLngBounds();
367 |             for (var i = 0, m; m = this.markers[i]; ++i) {
368 |               latLngBounds.extend(
369 |                   new google.maps.LatLng(m.latitude, m.longitude));
370 |             }
371 | 
372 |             // For one marker, don't alter zoom, just center it.
373 |             if (this.markers.length > 1) {
374 |               this.map.fitBounds(latLngBounds);
375 |             }
376 |             this.map.setCenter(latLngBounds.getCenter());
377 |           }
378 |         }
379 | 
380 |         /**
381 |          * Observer function that is called if one of the options is changed.
382 |          * Debounce calls to `repaint`
383 |          */
384 |         _optionChanged(markers,gridSize,averageCenter,minimumClusterSize,maxZoom) {
385 |           this._repaintDebouncer = Polymer.Debouncer.debounce(this._repaintDebouncer, Polymer.Async.timeOut.after(250), this.repaint.bind(this));
386 |         }
387 | 
388 |         /**
389 |          * Repaint will re-create and re-draw the clusters.
390 |          */
391 |          repaint() {
392 |           this._resetClusters();
393 |           this._computeClusters(0);
394 |         }
395 | 
396 |         /**
397 |          * Removes the clusters and resets the markers.
398 |          */
399 |         _resetClusters() {
400 |           // Remove all the clusters
401 |           for (var i = 0; i < this.clusters.length; i++) {
402 |             this.clusters[i].map = null;
403 |           }
404 |           this.clusters = [];
405 |           this._resetMarkers(false,this.markers);
406 |         }
407 | 
408 |         /**
409 |          * Initializes the markers and setups dragend event if markers is draggable.
410 |          */
411 |         _initMarkers(markers) {
412 |           var mc = this;
413 |           var dragendFunc = function() {
414 |             if (mc.isReady) {
415 |               this.isAdded = false;
416 |               mc.repaint();
417 |             }
418 |           };
419 |           for (var i =0;i<markers.length;i++) {
420 |             var marker = markers[i];
421 |             if (marker.getDraggable()) {
422 |               google.maps.event.addListener(marker, 'dragend', dragendFunc);
423 |             }
424 |             marker.isAdded = false;
425 |           }
426 |         }
427 | 
428 |         /**
429 |          * this will reset the marker.
430 |          * @param {Boolean} opt_hide specifies if the markers should be removed entirely from the map.
431 |          * @param {Array} markers the markers that should be reset
432 |          */
433 |         _resetMarkers(optHide,markers) {
434 | 				 if (!markers) {
435 |             return;
436 | 					}
437 |           for (var i = 0; i < markers.length; i++) {
438 |               var marker = markers[i];
439 |               marker.isAdded = false;
440 |               if (optHide) {
441 |                 marker.setMap(null);
442 |               }
443 |            }
444 |         }
445 |         /**
446 |          * Observer function that is called when the `markers` Array is changed.
447 |          * Will reset the current markers and debounce call to `repaint`
448 |          */
449 |         _markersChanged(newMarkers,oldMarkers) {
450 |           // remove the old markers
451 |           if (oldMarkers) {
452 |             this._resetMarkers(true,oldMarkers);
453 |           }
454 |           this._initMarkers(newMarkers);
455 |           this._repaintDebouncer = Polymer.Debouncer.debounce(this._repaintDebouncer, Polymer.Async.timeOut.after(250),this.repaint.bind(this));
456 |         }
457 | 
458 |         /**
459 |          * Observer function that is called when the styles are changed.
460 |          * Only used when the `google-map-defaulticon` is used.
461 |          */
462 |         _changeStyles(styles) {
463 |           if (!this._clusterIconTemplate) {
464 |             return;
465 |           }
466 |           var defaultIcon = this._clusterIconTemplate.querySelector('google-map-defaulticon');
467 |           if (defaultIcon) {
468 |               defaultIcon.styles = styles;
469 |               for (var i = 0; i < this.clusters.length; i++) {
470 |                 this.clusters[i].firstElementChild.styles = styles;
471 |               }
472 |           }
473 |         }
474 |       }
475 | 
476 |       customElements.define('google-map-markerclusterer', GoogleMapMarkerclusterer);
477 |     })();
478 |   </script>
479 | </dom-module>
480 | 


--------------------------------------------------------------------------------
/google-map-overlayview-behavior.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   /**
  3 |    * Use `GoogleMapOverlayViewBehavior` to implement elements that should be displayed on a `google-map` using an overlayview
  4 |    * @polymer
  5 |    * @mixinFunction
  6 |   */
  7 |   GoogleMapOverlayViewBehavior = function(superClass) {
  8 |     return class extends superClass {
  9 |       static get properties() {
 10 |         return {
 11 |           /**
 12 |           * A Maps API object.
 13 |           */
 14 |           map: {
 15 |             type: Object,
 16 |             value: null,
 17 |             observer: '_mapChanged'
 18 |           },
 19 | 
 20 |           /**
 21 |           * A boolean flag to set the visiblity
 22 |           */
 23 |           visible: {
 24 |             type: Boolean,
 25 |             value: true
 26 |           },
 27 |         }
 28 |       }
 29 |       
 30 |       ready() {
 31 |         super.ready();
 32 |         this._initOverlay();
 33 |       }
 34 |       /**
 35 |       * Initializes the overlay if the Google Maps API was properly loaded.
 36 |       * Sets the callbacks (onAdd, draw and onRemove) to the current instance
 37 |       */
 38 |       _initOverlay() {
 39 |         if (typeof google === 'object' && typeof google.maps === 'object')  {
 40 |           if (this.overlay && this.overlay instanceof google.maps.OverlayView) {
 41 |             return;
 42 |           }
 43 |           OverlayView.prototype = new google.maps.OverlayView();
 44 |           OverlayView.prototype.onAdd = this.onAdd.bind(this);
 45 |           OverlayView.prototype.draw = this.draw.bind(this);
 46 |           OverlayView.prototype.onRemove = this.onRemove.bind(this);
 47 |           this.overlay = new OverlayView(this.map);
 48 |         }
 49 |       }
 50 |       /**
 51 |       * OverlayView object constructor.
 52 |       */
 53 |       _overlayView(map) {
 54 |           if (map && map instanceof google.maps.Map) {
 55 |             this.map = map;
 56 |           }
 57 |       }
 58 | 
 59 |       /**
 60 |       * Callback when the map is changed. By default this will call `setMap` on the `OverlayView`
 61 |       */
 62 |       _mapChanged(map) {
 63 |         this._initOverlay();
 64 |         if (this.overlay &&  this.overlay instanceof google.maps.OverlayView) {
 65 |             this.overlay.setMap(map);
 66 |           }
 67 |       }
 68 | 
 69 |       /**
 70 |       * draw callback when the overlayview is drawn
 71 |       */
 72 |       draw() {}
 73 | 
 74 |       /**
 75 |       * onAdd callback when the overlayview is added to the map.
 76 |       */
 77 |       onAdd() {
 78 |         var panes = this.overlay.getPanes();
 79 |         panes.overlayLayer.appendChild(this);
 80 |       }
 81 | 
 82 |       /**
 83 |       * onRemove callback when the overlayview is removed from the map.
 84 |       */
 85 |       onRemove() {
 86 |         if (this.parentNode) {
 87 |           this.parentNode.removeChild(this);
 88 |         }
 89 |       }
 90 | 
 91 |       /**
 92 |       * Returns the position at which to place the DIV depending on the latlng.
 93 |       *
 94 |       * @param {google.maps.LatLng} latlng The position in latlng.
 95 |       * @return {google.maps.Point} The position in pixels.
 96 |       */
 97 |       getPosFromLatLng(latlng) {
 98 |           var pos = this.overlay.getProjection().fromLatLngToDivPixel(latlng);
 99 |           pos.x = parseInt(pos.x, 10);
100 |           pos.y = parseInt(pos.y, 10);
101 |           return pos;
102 |         }
103 |       /**
104 |       * Returns the current bounds extended by the grid size.
105 |       *
106 |       * @param {google.maps.LatLngBounds} bounds The bounds to extend.
107 |       * @return {google.maps.LatLngBounds} The extended bounds.
108 |       */
109 |       getExtendedBounds(bounds, size) {        
110 |         var projection = this.overlay.getProjection();
111 | 
112 |         // Turn the bounds into latlng.
113 |         var tr = new google.maps.LatLng(bounds.getNorthEast().lat(),
114 |             bounds.getNorthEast().lng());
115 |         var bl = new google.maps.LatLng(bounds.getSouthWest().lat(),
116 |             bounds.getSouthWest().lng());
117 | 
118 |         // Convert the points to pixels and the extend out by the grid size.
119 |         var trPix = projection.fromLatLngToDivPixel(tr);
120 |         trPix.x += size;
121 |         trPix.y -= size;
122 | 
123 |         var blPix = projection.fromLatLngToDivPixel(bl);
124 |         blPix.x -= size;
125 |         blPix.y += size;
126 | 
127 |         // Convert the pixel points back to LatLng
128 |         var ne = projection.fromDivPixelToLatLng(trPix);
129 |         var sw = projection.fromDivPixelToLatLng(blPix);
130 | 
131 |         // Extend the bounds to contain the new bounds.
132 |         bounds.extend(ne);
133 |         bounds.extend(sw);
134 | 
135 |         return bounds;
136 |       }
137 |     }
138 |   }
139 | 
140 |   /**
141 |     * OverlayView object constructor.
142 |     */
143 |   function OverlayView(map) {
144 |     if (map && map instanceof google.maps.Map) {
145 |       this.map = map;
146 |     }
147 |   };
148 | </script>


--------------------------------------------------------------------------------
/google-map-overlayview-marker-behavior.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="google-map-overlayview-behavior.html">
 2 | 
 3 | <script>
 4 | 	/**
 5 | 	 * Use `GoogleMapOverlayViewMarkerBehavior` to implement elements that should be displayed as `Marker` on a `google-map` using an overlayview
 6 | 	 * Users should either override the `_update` if they need to customize the positioning.
 7 | 	 * @polymer
 8 |      * @mixinFunction
 9 | 	 */
10 | 	GoogleMapOverlayViewMarkerBehavior = function (superClass) {
11 | 		return class extends GoogleMapOverlayViewBehavior(superClass) {
12 | 			static get properties() {
13 | 				return {
14 | 					/**
15 | 					* The position of the marker on the map
16 | 					*/
17 | 					position: {
18 | 						type: Object,
19 | 						value: null
20 | 					},
21 | 
22 | 					/**
23 | 					* The size of the marker
24 | 					*/
25 | 					size: {
26 | 						type: Number,
27 | 						value: 25,
28 | 					},
29 | 
30 | 					/**
31 | 					* Set to true if the marker should be draggable
32 | 					*/
33 | 					isDraggable: {
34 | 						type: Boolean,
35 | 						value: false
36 | 					},
37 | 				}
38 | 			}
39 | 			ready() {
40 | 				super.ready();
41 | 				this.style.position = 'absolute';
42 | 			}
43 | 
44 | 			/**
45 | 			* Returns the position of the marker
46 | 			*/
47 | 			getPosition() {
48 | 				return this.position;
49 | 			}
50 | 
51 | 			/**
52 | 			* Returns whether marker is draggable.
53 | 			*/
54 | 			getDraggable() {
55 | 				return this.isDraggable;
56 | 			}
57 | 
58 | 			/**
59 | 			* Returns the map instance.
60 | 			*/
61 | 			getMap() {
62 | 				if (this.overlay) {
63 | 					return this.overlay.getMap();
64 | 				}
65 | 				return null;
66 | 			}
67 | 			/**
68 | 			* Sets the map instance
69 | 			*/
70 | 			setMap(map) {
71 | 				if (this.overlay && this.overlay instanceof google.maps.OverlayView) {
72 | 					this.overlay.setMap(map);
73 | 				}
74 | 			}
75 | 
76 | 			/**
77 | 			* Draw callback forwarded to the function `update`.
78 | 			*/
79 | 			draw() {
80 | 				this.update(this.position, this.size);
81 | 			}
82 | 			/**
83 | 			* Override this function to implement custom positioning.
84 | 			* By default will `left` and `top` CSS settings are used to position the element.
85 | 			*/
86 | 			update(position, size) {
87 | 				var projection = this.overlay.getProjection();
88 | 				var mapPos = projection.fromLatLngToDivPixel(position);
89 | 				this.style.left = (mapPos.x - size / 2) + 'px';
90 | 				this.style.top = (mapPos.y - size / 2) + 'px';
91 | 			}
92 | 		}
93 | 	}
94 | </script>


--------------------------------------------------------------------------------
/google-map-overlayview.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../polymer/polymer-element.html">
 2 | <link rel="import" href="google-map-overlayview-behavior.html">
 3 | <link rel="import" href="../google-apis/google-apis.html">
 4 | 
 5 | <dom-module id="google-map-overlayview">
 6 |     <template >
 7 |         <slot id="overlayContent"></slot>
 8 |     </template>
 9 | </dom-module>
10 | <script>
11 |     /*
12 |      * The `google-map-overlayview` element is a generic overlay container element.
13 |      * It maps to the OverlayView of google maps v3.
14 |      * <b>Example</b>:
15 |      *     <google-map-overlayview><some-element /></google-map-overlayview>
16 |      *
17 |      * For example to embed a simple `<img>` element into a overlay use this code:
18 |      *
19 |      *     <google-map-overlayview><img src="URL" /></google-map-overlayview>
20 |      *
21 |      * It is also possible to embed another `custom element` inside a `<google-map-overlayview>`
22 |      * @customElement
23 |      * @polymer
24 |      */
25 |     class GoogleMapOverlayView extends GoogleMapOverlayViewBehavior(Polymer.Element) {
26 |         static get is() { return 'google-map-overlayview'; }
27 |     }
28 | 
29 |     customElements.define('google-map-overlayview', GoogleMapOverlayView);
30 | </script>
31 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |  <head>
 4 |    <meta charset="utf-8">
 5 |    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 6 |    <script src="../webcomponentsjs/webcomponents-loader.js"></script>
 7 |    <link rel="import" href="../iron-component-page/iron-component-page.html">
 8 |  </head>
 9 |  <body>
10 |    <iron-component-page></iron-component-page>
11 |  </body>
12 | </html>


--------------------------------------------------------------------------------
/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timeu/google-map-markerclusterer/51bd6401a93494b509adf9fda279da857d6e2f99/preview.gif


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timeu/google-map-markerclusterer/51bd6401a93494b509adf9fda279da857d6e2f99/preview.png


--------------------------------------------------------------------------------