├── AUTHORS
├── CONTRIBUTING.md
├── CONTRIBUTORS
├── LICENSE
├── README.md
├── bower.json
├── docs
    ├── examples.html
    └── reference.html
├── examples
    ├── advanced_example.html
    ├── data.json
    ├── simple_example.html
    ├── speed_test.js
    └── speed_test_example.html
├── images
    ├── conv30.png
    ├── conv40.png
    ├── conv50.png
    ├── heart30.png
    ├── heart40.png
    ├── heart50.png
    ├── m1.png
    ├── m2.png
    ├── m3.png
    ├── m4.png
    ├── m5.png
    ├── people35.png
    ├── people45.png
    ├── people55.png
    └── pin.png
├── package.json
├── screenshot.png
└── src
    └── markerclusterer.js


/AUTHORS:
--------------------------------------------------------------------------------
 1 | # This is the official list of js-marker-clusterer authors for copyright purposes.
 2 | # This file is distinct from the CONTRIBUTORS files.
 3 | # See the latter for an explanation.
 4 | 
 5 | # Names should be added to this file as:
 6 | # Name or Organization <email address>
 7 | # The email address is not required for organizations.
 8 | 
 9 | Google Inc.
10 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ## Contributing
 2 | 
 3 | Want to help out? That's awesome!
 4 | ![Analytics](https://ga-beacon.appspot.com/UA-12846745-20/js-marker-clusterer/contributing?pixel)
 5 | 
 6 | The library is open source and lives on GitHub at:
 7 | https://github.com/googlemaps/js-marker-clusterer
 8 | Open an issue or fork the library and submit a pull request.
 9 | 
10 | Keep in mind that before we can accept any pull requests we have to jump
11 | through a couple of legal hurdles, primarily a Contributor License Agreement
12 | (CLA):
13 | 
14 | - **If you are an individual writing original source code**
15 |   and you're sure you own the intellectual property,
16 |   then you'll need to sign an
17 |   [individual CLA](https://developers.google.com/open-source/cla/individual).
18 | - **If you work for a company that wants to allow you to contribute your work**,
19 |   then you'll need to sign a
20 |   [corporate CLA](https://developers.google.com/open-source/cla/corporate)
21 | 
22 | Follow either of the two links above to access the appropriate CLA and
23 | instructions for how to sign and return it.
24 | 
25 | When preparing your code, make sure to update the AUTHORS and CONTRIBUTORS file
26 | to reflect your contribtion.
27 | 
28 | Once we receive your CLA, we'll be able to review and accept your pull requests.


--------------------------------------------------------------------------------
/CONTRIBUTORS:
--------------------------------------------------------------------------------
 1 | # People who have agreed to one of the CLAs and can contribute patches.
 2 | # The AUTHORS file lists the copyright holders; this file
 3 | # lists people. For example, Google employees are listed here
 4 | # but not in AUTHORS, because Google holds the copyright.
 5 | #
 6 | # https://developers.google.com/open-source/cla/individual
 7 | # https://developers.google.com/open-source/cla/corporate
 8 | #
 9 | # Names should be added to this file as:
10 | #     Name <email address>
11 | 
12 | Luke Mahé <lukem@google.com>
13 | Brendan Kenny <bckenny@google.com>
14 | Moisés Arcos <moiarcsan@gmail.com>
15 | Peter Grassberger <petertheone@gmail.com>
16 | Chris Fritz <us.chrisf@gmail.com>
17 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "{}"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright {yyyy} {name of copyright owner}
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | **Please note:** This repository is kept for historical purpose only - the current version of marker clusterer is available as part of the [v3-utility-library repository](https://github.com/googlemaps/v3-utility-library/tree/master/markerclustererplus). 
 2 | 
 3 | Marker Clusterer – A Google Maps JavaScript API utility library
 4 | ==============
 5 | 
 6 | A Google Maps JavaScript API v3 library to create and manage per-zoom-level clusters for large amounts of markers.
 7 | ![Analytics](https://maps-ga-beacon.appspot.com/UA-12846745-20/js-marker-clusterer/readme?pixel)
 8 | 
 9 | [Reference documentation](https://googlemaps.github.io/js-marker-clusterer/docs/reference.html)
10 | 
11 | Migrated from the [Google Maps JavaScript API utility libraries on Google Code](https://code.google.com/p/google-maps-utility-library-v3/).
12 | 
13 | ## Usage
14 | 
15 | Download or clone `markerclusterer.js` and images `m1.png` to `m5.png`, save images in `images` folder.
16 | 
17 | To use your own custom cluster images just name your images `m[1-5].png` or set the `imagePath` option to the location and name of your images like this: `imagePath: 'customImages/cat'` for images `cat1.png` to `cat5.png`.
18 | 
19 | index.html
20 | 
21 |     ...
22 | 
23 |     <div id="map-container"><div id="map"></div></div>
24 |     <script src="markerclusterer.js"></script>
25 |     <script>
26 |         function initialize() {
27 |             var center = new google.maps.LatLng(51.5074, 0.1278);
28 | 
29 |             var map = new google.maps.Map(document.getElementById('map'), {
30 |               zoom: 3,
31 |               center: center,
32 |               mapTypeId: google.maps.MapTypeId.ROADMAP
33 |             });
34 | 
35 |             var markers = [];
36 |             var marker = new google.maps.Marker({
37 |                 position: new google.maps.LatLng(51.5074, 0.1278)
38 |             });
39 |             markers.push(marker);
40 | 
41 |             var options = {
42 |                 imagePath: 'images/m'
43 |             };
44 | 
45 |             var markerCluster = new MarkerClusterer(map, markers, options);
46 |         }
47 | 
48 |         google.maps.event.addDomListener(window, 'load', initialize);
49 |     </script>
50 |     ...
51 |     
52 | 
53 | ## Live Demos
54 | 
55 | [![Marker Clusterer Screenshot](https://googlemaps.github.io/js-marker-clusterer/screenshot.png)](https://googlemaps.github.io/js-marker-clusterer/docs/examples.html)
56 | 
57 | [Examples page](https://googlemaps.github.io/js-marker-clusterer/docs/examples.html)
58 | 
59 | ## Contributing
60 | 
61 | Want to contribute? Check out the [contributing guide](CONTRIBUTING.md)!
62 | 
63 | ## License
64 | 
65 | Copyright 2014 Google Inc. All rights reserved.
66 | 
67 | Licensed under the Apache License, Version 2.0 (the "License");
68 | you may not use this file except in compliance with the License.
69 | You may obtain a copy of the License at
70 | 
71 |     http://www.apache.org/licenses/LICENSE-2.0
72 | 
73 | Unless required by applicable law or agreed to in writing, software
74 | distributed under the License is distributed on an "AS IS" BASIS,
75 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
76 | See the License for the specific language governing permissions and
77 | limitations under the License.
78 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "js-marker-clusterer",
 3 |   "version": "1.0.0",
 4 |   "homepage": "https://github.com/googlemaps/js-marker-clusterer",
 5 |   "authors": [
 6 |     "Luke Mahe"
 7 |   ],
 8 |   "description": "The library creates and manages per-zoom-level clusters for large amounts of markers. Google API v3.",
 9 |   "main": "src/markerclusterer.js",
10 |   "keywords": [
11 |     "google",
12 |     "marker",
13 |     "cluster",
14 |     "clusterer",
15 |     "javascript",
16 |     "js",
17 |     "api",
18 |     "v3"
19 |   ],
20 |   "license": "Apache 2.0",
21 |   "ignore": [
22 |     "**/.*"
23 |   ]
24 | }
25 | 


--------------------------------------------------------------------------------
/docs/examples.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <title>MarkerCluster for v3 Documentation: Examples</title>
  6 |     <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
  7 |     <script>
  8 |       var _gaq = _gaq || [];
  9 |       _gaq.push(['_setAccount', 'UA-12846745-20']);
 10 |       _gaq.push(['_trackPageview']);
 11 | 
 12 |       (function() {
 13 |         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 14 |         ga.src = ('https:' === document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 15 |         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 16 |       })();
 17 |     </script>
 18 |   </head>
 19 | 
 20 |   <body>
 21 |     <h1><a name="Marker_Clusterer_Examples" id="Marker_Clusterer_Examples"></a>
 22 |       MarkerClusterer v3 Examples</h1>
 23 | 
 24 |     <p>To use a marker clusterer, create a <code>MarkerClusterer</code> object.
 25 |         In the simplest case, just pass a map to it.</p>
 26 | <pre class="prettyprint">
 27 | var center = new google.maps.LatLng(37.4419, -122.1419);
 28 | var options = {
 29 |   'zoom': 13,
 30 |   'center': center,
 31 |   'mapTypeId': google.maps.MapTypeId.ROADMAP
 32 | };
 33 | 
 34 | var map = new google.maps.Map(document.getElementById("map"), options);
 35 | var mc = new MarkerClusterer(map);
 36 | </pre>
 37 | 
 38 |      <p>
 39 |          You may also specify a number of options to fine-tune the marker
 40 |          manager's performance. These options are passed via a object.
 41 |      </p>
 42 |     <p>
 43 |         The <code>imagePath</code> option needs to be set to the location of your local marker images.
 44 |     </p>
 45 | 
 46 | <pre class="prettyprint">
 47 | var center = new google.maps.LatLng(37.4419, -122.1419);
 48 | var options = {
 49 |   'zoom': 13,
 50 |   'center': center,
 51 |   'mapTypeId': google.maps.MapTypeId.ROADMAP
 52 | };
 53 | 
 54 | var map = new google.maps.Map(document.getElementById("map"), options);
 55 | 
 56 | var mcOptions = {gridSize: 50, maxZoom: 15, imagePath: 'images/m'};
 57 | var mc = new MarkerClusterer(map, [], mcOptions);
 58 | </pre>
 59 | 
 60 |     <p>Once you create a marker cluster, you will want to add markers to it.
 61 |       <code>MarkerClusterer</code> supports adding markers using the
 62 |       <code>addMarker()</code> and <code>addMarkers()</code>method or by
 63 |       providing a array of markers to the constructor:</p>
 64 | <pre class="prettyprint">
 65 | var center = new google.maps.LatLng(37.4419, -122.1419);
 66 | var options = {
 67 |   'zoom': 13,
 68 |   'center': center,
 69 |   'mapTypeId': google.maps.MapTypeId.ROADMAP
 70 | };
 71 | 
 72 | var map = new google.maps.Map(document.getElementById("map"), options);
 73 | 
 74 | var mcOptions = {gridSize: 50, maxZoom: 15, imagePath: 'images/m'};
 75 | var markers = [...]; // Create the markers you want to add and collect them into a array.
 76 | var mc = new MarkerClusterer(map, markers, mcOptions);
 77 | </pre>
 78 | 
 79 |     <h2><a name="Marker_Clusterer" id="Marker_Clusterer"></a>A Simple MarkerClusterer Example:</h2>
 80 | 
 81 |     <p>This example will show 100 markers on map.</p>
 82 | 
 83 | <pre class="prettyprint">
 84 | var center = new google.maps.LatLng(37.4419, -122.1419);
 85 | var options = {
 86 |   'zoom': 13,
 87 |   'center': center,
 88 |   'mapTypeId': google.maps.MapTypeId.ROADMAP
 89 | };
 90 | 
 91 | var map = new google.maps.Map(document.getElementById("map"), options);
 92 | 
 93 | var markers = [];
 94 | for (var i = 0; i &lt; 100; i++) {
 95 |   var latLng = new google.maps.LatLng(data.photos[i].latitude,
 96 |       data.photos[i].longitude);
 97 |   var marker = new google.maps.Marker({'position': latLng});
 98 |   markers.push(marker);
 99 | }
100 | var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'images/m'});
101 | </pre>
102 | 
103 |     <p><a href="../examples/simple_example.html">View example (simple_example.html)</a></p>
104 | 
105 |     <h2>
106 |       <a name="Marker_Clusterer_Advanced" id="Marker_Clusterer_Advanced"></a>
107 |       Advanced MarkerClusterer Example:
108 |     </h2>
109 |     <p>With this example, you can test <code>MarkerClusterer</code> with
110 |     different max zoom levels, grid size and styles, all the options.<br /></p>
111 |     <p><a href="../examples/advanced_example.html">View example
112 |       (advanced_example.html)</a></p>
113 | 
114 |     <h2>
115 |       <a name="Marker_Clusterer_Speed_Test" id="Marker_Clusterer_Speed_Test"></a>
116 |       Speed Test Example
117 |     </h2>
118 |     <p>This example will compare adding markers with
119 |     <code>MarkerClusterer</code> to the normal method of adding markers, and
120 |     display the time for each.</p>
121 |     <p><a href="../examples/speed_test_example.html">View example
122 |       (speed_test_example.html)</a></p>
123 |   </body>
124 | </html>
125 | 


--------------------------------------------------------------------------------
/docs/reference.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <title>MarkerClusterer for Google Maps v3 version 1.0 Reference</title>
  6 |     <style>
  7 |       body {
  8 |         font-family: arial, sans-serif;
  9 |         background-color: #fff;
 10 |         font-size: small;
 11 |         margin: 24px 8px 8px;
 12 |         color: #000;
 13 |       }
 14 |       h1, h2, h3, h4, h5 {
 15 |         font-weight: bold;
 16 |         margin-bottom: 0;
 17 |       }
 18 |       h2, h3, h4, h5 {
 19 |         margin-left: 25px;
 20 |       }
 21 |       h1 {
 22 |         font-size: 130%;
 23 |         margin: 2em 0 0 10px; 
 24 |         padding: 0 3px 0 3px;
 25 |         border-top: 1px solid;
 26 |         background-color: #e5ecf9;
 27 |         border-color: #3366CC;
 28 |       }
 29 |       h2 {
 30 |         font-size: 120%;
 31 |         margin-top: 1.5em;
 32 |         border-bottom: 1px solid;
 33 |         border-color: #3366CC;
 34 |       }
 35 |       h3 {
 36 |         font-size: 110%; 
 37 |         margin-top: 0.7em;
 38 |         position: relative;
 39 |         left: 0;
 40 |         top: 0.7em;
 41 |         z-index: 5; /*to avoid falling behind other elements due to lowered position*/
 42 |       }
 43 |       h4 {
 44 |         margin-top: .5em;
 45 |         font-size: 100%;
 46 |         font-weight: bold;
 47 |         position: relative;
 48 |         left: 0;
 49 |         top: 0.8em;
 50 |         z-index: 5; /*to avoid falling behind other elements due to lowered position*/
 51 |       }
 52 |       h5 {
 53 |         margin-top: 0.4em;
 54 |         font-size: 100%;
 55 |         font-weight: 100;
 56 |         font-style: italic;
 57 |         text-decoration: underline;
 58 |         position: relative;
 59 |         left: 0;
 60 |         top: 0.8em;
 61 |         z-index: 5; /*to avoid falling behind other elements due to lowered position*/
 62 |       }
 63 |       p {
 64 |         margin: 1em 0 0 25px;
 65 |         padding: 0;
 66 |       }
 67 |       table {
 68 |         border: 1px solid;
 69 |         border-color: #3366CC;
 70 |         border-spacing:0;
 71 |         margin: 1em 0 0 26px;
 72 |         border-collapse: collapse;
 73 |         clear: right;
 74 |       }
 75 |       pre {
 76 |         margin-left: 2em;
 77 |       }
 78 |       ol, ul {
 79 |         margin-left: 2em;
 80 |       }
 81 |     </style>
 82 |     <script>
 83 |       var _gaq = _gaq || [];
 84 |       _gaq.push(['_setAccount', 'UA-12846745-20']);
 85 |       _gaq.push(['_trackPageview']);
 86 | 
 87 |       (function() {
 88 |         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 89 |         ga.src = ('https:' === document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 90 |         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 91 |       })();
 92 |     </script>
 93 |   </head>
 94 |   <body>
 95 |     <h1>MarkerClusterer for Google Maps v3</h1>
 96 |     <p>
 97 | The library creates and manages per-zoom-level clusters for large amounts of
 98 | markers.
 99 | <br/>
100 | This is a v3 implementation of the 
101 | <a href="http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/">v2 MarkerClusterer</a>.</p>
102 |     <p>For a description and examples of how to use this library, check out the <a href="examples.html">how-to</a>.</p>
103 |     
104 |       <h2><a name="MarkerClusterer"></a>class MarkerClusterer</h2>
105 |       <p>  This class extends <code>google.maps.OverlayView</code>.</p>
106 |       
107 |         <h3>Constructor</h3>
108 |         <table summary="class MarkerClusterer - Constructor" width="90%">
109 |           
110 |           <tbody>
111 |             <tr>
112 |               <th>Constructor</th>
113 |               
114 |               <th>Description</th>
115 |             </tr>
116 |             
117 |               <tr class="odd">
118 |                 <td><code>MarkerClusterer(<span class="type">map:google.maps.Map</span>, <span class="type">opt_markers:Array.&lt;google.maps.Marker&gt;</span>, <span class="type">opt_options:Object</span>)</code></td>
119 |                 
120 |                 <td>A Marker Clusterer that clusters markers.</td>
121 |               </tr>
122 |             
123 |           </tbody>
124 |         </table>
125 | 
126 |         <h3>Options</h3>
127 |         <table summary="class MarkerClusterer - Constructor" width="90%">
128 | 
129 |           <tbody>
130 |             <tr>
131 |               <th>Name</th>
132 | 
133 |               <th>Type</th>
134 | 
135 |               <th>Description</th>
136 |             </tr>
137 | 
138 |             <tr>
139 |               <td><code>gridSize</code></td>
140 |               <td><code>number</code></td>
141 |               <td>The grid size of a cluster in pixels.</td>
142 |             </tr>
143 |             <tr>
144 |               <td><code>maxZoom</code></td>
145 |               <td><code>number</code></td>
146 |               <td>The maximum zoom level that a marker can be part of a cluster.</td>
147 |             </tr>
148 |             <tr>
149 |               <td><code>zoomOnClick</code></td>
150 |               <td><code>boolean</code></td>
151 |               <td>Whether the default behaviour of clicking on a cluster is to zoom into it.</td>
152 |             </tr>
153 |             <tr>
154 |               <td><code>averageCenter</code></td>
155 |               <td><code>boolean</code></td>
156 |               <td>Whether the center of each cluster should be the average of all markers in the cluster.</td>
157 |             </tr>
158 |             <tr>
159 |               <td><code>minimumClusterSize</code></td>
160 |               <td><code>number</code></td>
161 |               <td>The minimum number of markers to be in a cluster before the markers are hidden and a count is shown.</td>
162 |             </tr>
163 |             <tr>
164 |               <td><code>styles</code></td>
165 |               <td><code>object</code></td>
166 |               <td>An object that has style properties.</td>
167 |             </tr>
168 |           </tbody>
169 |         </table>
170 | 
171 |         <h3>Styles</h3>
172 |         <table summary="class MarkerClusterer - Constructor" width="90%">
173 | 
174 |           <tbody>
175 |           <tr>
176 |             <th>Name</th>
177 | 
178 |             <th>Type</th>
179 | 
180 |             <th>Description</th>
181 |           </tr>
182 | 
183 |           <tr>
184 |             <td><code>url</code></td>
185 |             <td><code>string</code></td>
186 |             <td>The image url.</td>
187 |           </tr>
188 |           <tr>
189 |             <td><code>height</code></td>
190 |             <td><code>number</code></td>
191 |             <td>The image height.</td>
192 |           </tr>
193 |           <tr>
194 |             <td><code>width</code></td>
195 |             <td><code>number</code></td>
196 |             <td>The image width.</td>
197 |           </tr>
198 |           <tr>
199 |             <td><code>anchor</code></td>
200 |             <td><code>Array</code></td>
201 |             <td>The anchor position of the label text.</td>
202 |           </tr>
203 |           <tr>
204 |             <td><code>textColor</code></td>
205 |             <td><code>string</code></td>
206 |             <td>The text color.</td>
207 |           </tr>
208 |           <tr>
209 |             <td><code>textSize</code></td>
210 |             <td><code>number</code></td>
211 |             <td>The text size.</td>
212 |           </tr>
213 |           <tr>
214 |             <td><code>backgroundPosition</code></td>
215 |             <td><code>string</code></td>
216 |             <td>The position of the backgound x, y.</td>
217 |           </tr>
218 |           <tr>
219 |             <td><code>iconAnchor</code></td>
220 |             <td><code>Array</code></td>
221 |             <td>The anchor position of the icon x, y.</td>
222 |           </tr>
223 |           </tbody>
224 |         </table>
225 |       
226 |         <h3>Methods</h3>
227 |         <table summary="class MarkerClusterer - Methods" width="90%">
228 |           
229 |           <tbody>
230 |             <tr>
231 |               <th>Methods</th>
232 |               
233 |                 
234 |                   <th>Return&nbsp;Value</th>
235 |                 
236 |               
237 |               <th>Description</th>
238 |             </tr>
239 |             
240 |               <tr class="odd">
241 |                 <td><code>addMarker(<span class="type">marker:google.maps.Marker</span>, <span class="type">opt_nodraw:boolean</span>)</code></td>
242 |                 
243 |                   
244 |                     <td><code>None</code></td>
245 |                   
246 |                 
247 |                 <td>Adds a marker to the clusterer and redraws if needed.</td>
248 |               </tr>
249 |             
250 |               <tr class="even">
251 |                 <td><code>addMarkers(<span class="type">markers:Array.&lt;google.maps.Marker&gt;</span>, <span class="type">opt_nodraw:boolean</span>)</code></td>
252 |                 
253 |                   
254 |                     <td><code>None</code></td>
255 |                   
256 |                 
257 |                 <td>Adds an array of markers to the clusterer.</td>
258 |               </tr>
259 |             
260 |               <tr class="odd">
261 |                 <td><code>clearMarkers()</code></td>
262 |                 
263 |                   
264 |                     <td><code>None</code></td>
265 |                   
266 |                 
267 |                 <td>Clears all clusters and markers from the clusterer.</td>
268 |               </tr>
269 |             
270 |               <tr class="even">
271 |                 <td><code>getCalculator()</code></td>
272 |                 
273 |                   
274 |                     <td><code>function(Array|number)</code></td>
275 |                   
276 |                 
277 |                 <td>Gets the calculator function.</td>
278 |               </tr>
279 |             
280 |               <tr class="odd">
281 |                 <td><code>getExtendedBounds(<span class="type">bounds:google.maps.LatLngBounds</span>)</code></td>
282 |                 
283 |                   
284 |                     <td><code>google.maps.LatLngBounds</code></td>
285 |                   
286 |                 
287 |                 <td>Extends a bounds object by the grid size.</td>
288 |               </tr>
289 |             
290 |               <tr class="even">
291 |                 <td><code>getGridSize()</code></td>
292 |                 
293 |                   
294 |                     <td><code>number</code></td>
295 |                   
296 |                 
297 |                 <td>Gets the size of the grid.</td>
298 |               </tr>
299 |             
300 |               <tr class="odd">
301 |                 <td><code>getMap()</code></td>
302 |                 
303 |                   
304 |                     <td><code>google.maps.Map</code></td>
305 |                   
306 |                 
307 |                 <td>Gets the google map that the clusterer is associated with.</td>
308 |               </tr>
309 |             
310 |               <tr class="even">
311 |                 <td><code>getMarkers()</code></td>
312 |                 
313 |                   
314 |                     <td><code>Array.<google.maps.Marker></code></td>
315 |                   
316 |                 
317 |                 <td>Gets the array of markers in the clusterer.</td>
318 |               </tr>
319 |             
320 |               <tr class="odd">
321 |                 <td><code>getMaxZoom()</code></td>
322 |                 
323 |                   
324 |                     <td><code>number</code></td>
325 |                   
326 |                 
327 |                 <td>Gets the max zoom for the clusterer.</td>
328 |               </tr>
329 |             
330 |               <tr class="even">
331 |                 <td><code>getStyles()</code></td>
332 |                 
333 |                   
334 |                     <td><code>Object</code></td>
335 |                   
336 |                 
337 |                 <td>Gets the styles.</td>
338 |               </tr>
339 |             
340 |               <tr class="odd">
341 |                 <td><code>getTotalClusters()</code></td>
342 |                 
343 |                   
344 |                     <td><code>number</code></td>
345 |                   
346 |                 
347 |                 <td>Gets the number of clusters in the clusterer.</td>
348 |               </tr>
349 |             
350 |               <tr class="even">
351 |                 <td><code>getTotalMarkers()</code></td>
352 |                 
353 |                   
354 |                     <td><code>Array.<google.maps.Marker></code></td>
355 |                   
356 |                 
357 |                 <td>Gets the array of markers in the clusterer.</td>
358 |               </tr>
359 |             
360 |               <tr class="odd">
361 |                 <td><code>isZoomOnClick()</code></td>
362 |                 
363 |                   
364 |                     <td><code>boolean</code></td>
365 |                   
366 |                 
367 |                 <td>Whether zoom on click is set.</td>
368 |               </tr>
369 |             
370 |               <tr class="even">
371 |                 <td><code>redraw()</code></td>
372 |                 
373 |                   
374 |                     <td><code>None</code></td>
375 |                   
376 |                 
377 |                 <td>Redraws the clusters.</td>
378 |               </tr>
379 |             
380 |               <tr class="odd">
381 |                 <td><code>removeMarker(<span class="type">marker:google.maps.Marker</span>)</code></td>
382 |                 
383 |                   
384 |                     <td><code>boolean</code></td>
385 |                   
386 |                 
387 |                 <td>Removes a marker from the cluster.</td>
388 |               </tr>
389 |             
390 |               <tr class="even">
391 |                 <td><code>resetViewport()</code></td>
392 |                 
393 |                   
394 |                     <td><code>None</code></td>
395 |                   
396 |                 
397 |                 <td>Clears all existing clusters and recreates them.</td>
398 |               </tr>
399 |             
400 |               <tr class="odd">
401 |                 <td><code>setCalculator(<span class="type">calculator:function(Array|number)</span>)</code></td>
402 |                 
403 |                   
404 |                     <td><code>None</code></td>
405 |                   
406 |                 
407 |                 <td>Sets the calculator function.</td>
408 |               </tr>
409 |             
410 |               <tr class="even">
411 |                 <td><code>setGridSize(<span class="type">size:number</span>)</code></td>
412 |                 
413 |                   
414 |                     <td><code>None</code></td>
415 |                   
416 |                 
417 |                 <td>Sets the size of the grid.</td>
418 |               </tr>
419 |             
420 |               <tr class="odd">
421 |                 <td><code>setMap(<span class="type">map:google.maps.Map</span>)</code></td>
422 |                 
423 |                   
424 |                     <td><code>None</code></td>
425 |                   
426 |                 
427 |                 <td>Sets the google map that the clusterer is associated with.</td>
428 |               </tr>
429 |             
430 |               <tr class="even">
431 |                 <td><code>setMaxZoom(<span class="type">maxZoom:number</span>)</code></td>
432 |                 
433 |                   
434 |                     <td><code>None</code></td>
435 |                   
436 |                 
437 |                 <td>Sets the max zoom for the clusterer.</td>
438 |               </tr>
439 |             
440 |               <tr class="odd">
441 |                 <td><code>setStyles(<span class="type">styles:Object</span>)</code></td>
442 |                 
443 |                   
444 |                     <td><code>None</code></td>
445 |                   
446 |                 
447 |                 <td>Sets the styles.</td>
448 |               </tr>
449 |             
450 |           </tbody>
451 |         </table>
452 |   </body>
453 | </html>
454 | 


--------------------------------------------------------------------------------
/examples/advanced_example.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <title>MarkerClusterer v3 Advanced Example</title>
  6 | 
  7 |     <style>
  8 |       body {
  9 |         margin: 0;
 10 |         padding: 10px 20px 20px;
 11 |         font-family: Arial;
 12 |         font-size: 16px;
 13 |       }
 14 |       #map-container {
 15 |         padding: 6px;
 16 |         border-width: 1px;
 17 |         border-style: solid;
 18 |         border-color: #ccc #ccc #999 #ccc;
 19 |         -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
 20 |         -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
 21 |         box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
 22 |         width: 800px;
 23 |       }
 24 |       #map {
 25 |         width: 800px;
 26 |         height: 400px;
 27 |       }
 28 |       #actions {
 29 |         list-style: none;
 30 |         padding: 0;
 31 |       }
 32 |       #inline-actions {
 33 |         padding-top: 10px;
 34 |       }
 35 |       .item {
 36 |         margin-left: 20px;
 37 |       }
 38 |     </style>
 39 | 
 40 |     <script src="https://maps.googleapis.com/maps/api/js"></script>
 41 |     <script src="data.json"></script>
 42 |     <script type="text/javascript" src="../src/markerclusterer.js"></script>
 43 |     <script>
 44 |       var styles = [[{
 45 |         url: '../images/people35.png',
 46 |         height: 35,
 47 |         width: 35,
 48 |         anchor: [16, 0],
 49 |         textColor: '#ff00ff',
 50 |         textSize: 10
 51 |       }, {
 52 |         url: '../images/people45.png',
 53 |         height: 45,
 54 |         width: 45,
 55 |         anchor: [24, 0],
 56 |         textColor: '#ff0000',
 57 |         textSize: 11
 58 |       }, {
 59 |         url: '../images/people55.png',
 60 |         height: 55,
 61 |         width: 55,
 62 |         anchor: [32, 0],
 63 |         textColor: '#ffffff',
 64 |         textSize: 12
 65 |       }], [{
 66 |         url: '../images/conv30.png',
 67 |         height: 27,
 68 |         width: 30,
 69 |         anchor: [3, 0],
 70 |         textColor: '#ff00ff',
 71 |         textSize: 10
 72 |       }, {
 73 |         url: '../images/conv40.png',
 74 |         height: 36,
 75 |         width: 40,
 76 |         anchor: [6, 0],
 77 |         textColor: '#ff0000',
 78 |         textSize: 11
 79 |       }, {
 80 |         url: '../images/conv50.png',
 81 |         width: 50,
 82 |         height: 45,
 83 |         anchor: [8, 0],
 84 |         textSize: 12
 85 |       }], [{
 86 |         url: '../images/heart30.png',
 87 |         height: 26,
 88 |         width: 30,
 89 |         anchor: [4, 0],
 90 |         textColor: '#ff00ff',
 91 |         textSize: 10
 92 |       }, {
 93 |         url: '../images/heart40.png',
 94 |         height: 35,
 95 |         width: 40,
 96 |         anchor: [8, 0],
 97 |         textColor: '#ff0000',
 98 |         textSize: 11
 99 |       }, {
100 |         url: '../images/heart50.png',
101 |         width: 50,
102 |         height: 44,
103 |         anchor: [12, 0],
104 |         textSize: 12
105 |       }], [{
106 |         url: '../images/pin.png',
107 |         height: 48,
108 |         width: 30,
109 |         anchor: [-18, 0],
110 |         textColor: '#ffffff',
111 |         textSize: 10,
112 |         iconAnchor: [15, 48]
113 |       }]];
114 | 
115 |       var markerClusterer = null;
116 |       var map = null;
117 |       var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
118 |           'chco=FFFFFF,008CFF,000000&ext=.png';
119 | 
120 |       function refreshMap() {
121 |         if (markerClusterer) {
122 |           markerClusterer.clearMarkers();
123 |         }
124 | 
125 |         var markers = [];
126 | 
127 |         var markerImage = new google.maps.MarkerImage(imageUrl,
128 |           new google.maps.Size(24, 32));
129 | 
130 |         for (var i = 0; i < 1000; ++i) {
131 |           var latLng = new google.maps.LatLng(data.photos[i].latitude,
132 |               data.photos[i].longitude)
133 |           var marker = new google.maps.Marker({
134 |             position: latLng,
135 |             draggable: true,
136 |             icon: markerImage
137 |           });
138 |           markers.push(marker);
139 |         }
140 | 
141 |         var zoom = parseInt(document.getElementById('zoom').value, 10);
142 |         var size = parseInt(document.getElementById('size').value, 10);
143 |         var style = parseInt(document.getElementById('style').value, 10);
144 |         zoom = zoom === -1 ? null : zoom;
145 |         size = size === -1 ? null : size;
146 |         style = style === -1 ? null: style;
147 | 
148 |         markerClusterer = new MarkerClusterer(map, markers, {
149 |           maxZoom: zoom,
150 |           gridSize: size,
151 |           styles: styles[style],
152 |           imagePath: '../images/m'
153 |         });
154 |       }
155 | 
156 |       function initialize() {
157 |         map = new google.maps.Map(document.getElementById('map'), {
158 |           zoom: 2,
159 |           center: new google.maps.LatLng(39.91, 116.38),
160 |           mapTypeId: google.maps.MapTypeId.ROADMAP
161 |         });
162 | 
163 |         var refresh = document.getElementById('refresh');
164 |         google.maps.event.addDomListener(refresh, 'click', refreshMap);
165 | 
166 |         var clear = document.getElementById('clear');
167 |         google.maps.event.addDomListener(clear, 'click', clearClusters);
168 | 
169 |         refreshMap();
170 |       }
171 | 
172 |       function clearClusters(e) {
173 |         e.preventDefault();
174 |         e.stopPropagation();
175 |         markerClusterer.clearMarkers();
176 |       }
177 | 
178 |       google.maps.event.addDomListener(window, 'load', initialize);
179 |     </script>
180 |   </head>
181 |   <body>
182 |     <h3>An example of MarkerClusterer v3</h3>
183 |     <div id="map-container">
184 |       <div id="map"></div>
185 |     </div>
186 |     <div id="inline-actions">
187 |       <span>Max zoom level:
188 |         <select id="zoom">
189 |           <option value="-1">Default</option>
190 |           <option value="7">7</option>
191 |           <option value="8">8</option>
192 |           <option value="9">9</option>
193 |           <option value="10">10</option>
194 |           <option value="11">11</option>
195 |           <option value="12">12</option>
196 |           <option value="13">13</option>
197 |           <option value="14">14</option>
198 |         </select>
199 | 
200 |       </span>
201 |       <span class="item">Cluster size:
202 |         <select id="size">
203 |           <option value="-1">Default</option>
204 |           <option value="40">40</option>
205 |           <option value="50">50</option>
206 |           <option value="70">70</option>
207 |           <option value="80">80</option>
208 |         </select>
209 |       </span>
210 |       <span class="item">Cluster style:
211 |         <select id="style">
212 |           <option value="-1">Default</option>
213 |           <option value="0">People</option>
214 |           <option value="1">Conversation</option>
215 |           <option value="2">Heart</option>
216 |           <option value="3">Pin</option>
217 |        </select>
218 |        <input id="refresh" type="button" value="Refresh Map" class="item"/>
219 |        <a href="#" id="clear">Clear</a>
220 |     </div>
221 |   </body>
222 | </html>
223 | 


--------------------------------------------------------------------------------
/examples/simple_example.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>MarkerClusterer v3 Simple Example</title>
 6 |     <style >
 7 |       body {
 8 |         margin: 0;
 9 |         padding: 10px 20px 20px;
10 |         font-family: Arial;
11 |         font-size: 16px;
12 |       }
13 |       #map-container {
14 |         padding: 6px;
15 |         border-width: 1px;
16 |         border-style: solid;
17 |         border-color: #ccc #ccc #999 #ccc;
18 |         -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
19 |         -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
20 |         box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
21 |         width: 600px;
22 |       }
23 |       #map {
24 |         width: 600px;
25 |         height: 400px;
26 |       }
27 |     </style>
28 | 
29 |     <script src="https://maps.googleapis.com/maps/api/js"></script>
30 |     <script src="data.json"></script>
31 |     <script type="text/javascript" src="../src/markerclusterer.js"></script>
32 | 
33 |     <script>
34 |       function initialize() {
35 |         var center = new google.maps.LatLng(37.4419, -122.1419);
36 | 
37 |         var map = new google.maps.Map(document.getElementById('map'), {
38 |           zoom: 3,
39 |           center: center,
40 |           mapTypeId: google.maps.MapTypeId.ROADMAP
41 |         });
42 | 
43 |         var markers = [];
44 |         for (var i = 0; i < 100; i++) {
45 |           var dataPhoto = data.photos[i];
46 |           var latLng = new google.maps.LatLng(dataPhoto.latitude,
47 |               dataPhoto.longitude);
48 |           var marker = new google.maps.Marker({
49 |             position: latLng
50 |           });
51 |           markers.push(marker);
52 |         }
53 |         var markerCluster = new MarkerClusterer(map, markers, {imagePath: '../images/m'});
54 |       }
55 |       google.maps.event.addDomListener(window, 'load', initialize);
56 |     </script>
57 |     <script>
58 |       var _gaq = _gaq || [];
59 |       _gaq.push(['_setAccount', 'UA-12846745-20']);
60 |       _gaq.push(['_trackPageview']);
61 | 
62 |       (function() {
63 |         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
64 |         ga.src = ('https:' === document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
65 |         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
66 |       })();
67 |     </script>
68 |   </head>
69 |   <body>
70 |     <h3>A simple example of MarkerClusterer (100 markers)</h3>
71 |     <div id="map-container"><div id="map"></div></div>
72 |   </body>
73 | </html>
74 | 


--------------------------------------------------------------------------------
/examples/speed_test.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @fileoverview This demo is used for MarkerClusterer. It will show 100 markers
  3 |  * using MarkerClusterer and count the time to show the difference between using
  4 |  * MarkerClusterer and without MarkerClusterer.
  5 |  * @author Luke Mahe (v2 author: Xiaoxi Wu)
  6 |  */
  7 | 
  8 | function $(element) {
  9 |   return document.getElementById(element);
 10 | }
 11 | 
 12 | var speedTest = {};
 13 | 
 14 | speedTest.pics = null;
 15 | speedTest.map = null;
 16 | speedTest.markerClusterer = null;
 17 | speedTest.markers = [];
 18 | speedTest.infoWindow = null;
 19 | 
 20 | speedTest.init = function() {
 21 |   var latlng = new google.maps.LatLng(39.91, 116.38);
 22 |   var options = {
 23 |     'zoom': 2,
 24 |     'center': latlng,
 25 |     'mapTypeId': google.maps.MapTypeId.ROADMAP
 26 |   };
 27 | 
 28 |   speedTest.map = new google.maps.Map($('map'), options);
 29 |   speedTest.pics = data.photos;
 30 |   
 31 |   var useGmm = document.getElementById('usegmm');
 32 |   google.maps.event.addDomListener(useGmm, 'click', speedTest.change);
 33 |   
 34 |   var numMarkers = document.getElementById('nummarkers');
 35 |   google.maps.event.addDomListener(numMarkers, 'change', speedTest.change);
 36 | 
 37 |   speedTest.infoWindow = new google.maps.InfoWindow();
 38 | 
 39 |   speedTest.showMarkers();
 40 | };
 41 | 
 42 | speedTest.showMarkers = function() {
 43 |   speedTest.markers = [];
 44 | 
 45 |   var type = 1;
 46 |   if ($('usegmm').checked) {
 47 |     type = 0;
 48 |   }
 49 | 
 50 |   if (speedTest.markerClusterer) {
 51 |     speedTest.markerClusterer.clearMarkers();
 52 |   }
 53 | 
 54 |   var panel = $('markerlist');
 55 |   panel.innerHTML = '';
 56 |   var numMarkers = $('nummarkers').value;
 57 | 
 58 |   for (var i = 0; i < numMarkers; i++) {
 59 |     var titleText = speedTest.pics[i].photo_title;
 60 |     if (titleText === '') {
 61 |       titleText = 'No title';
 62 |     }
 63 | 
 64 |     var item = document.createElement('DIV');
 65 |     var title = document.createElement('A');
 66 |     title.href = '#';
 67 |     title.className = 'title';
 68 |     title.innerHTML = titleText;
 69 | 
 70 |     item.appendChild(title);
 71 |     panel.appendChild(item);
 72 | 
 73 | 
 74 |     var latLng = new google.maps.LatLng(speedTest.pics[i].latitude,
 75 |         speedTest.pics[i].longitude);
 76 | 
 77 |     var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=' +
 78 |         'FFFFFF,008CFF,000000&ext=.png';
 79 |     var markerImage = new google.maps.MarkerImage(imageUrl,
 80 |         new google.maps.Size(24, 32));
 81 | 
 82 |     var marker = new google.maps.Marker({
 83 |       'position': latLng,
 84 |       'icon': markerImage
 85 |     });
 86 | 
 87 |     var fn = speedTest.markerClickFunction(speedTest.pics[i], latLng);
 88 |     google.maps.event.addListener(marker, 'click', fn);
 89 |     google.maps.event.addDomListener(title, 'click', fn);
 90 |     speedTest.markers.push(marker);
 91 |   }
 92 | 
 93 |   window.setTimeout(speedTest.time, 0);
 94 | };
 95 | 
 96 | speedTest.markerClickFunction = function(pic, latlng) {
 97 |   return function(e) {
 98 |     e.cancelBubble = true;
 99 |     e.returnValue = false;
100 |     if (e.stopPropagation) {
101 |       e.stopPropagation();
102 |       e.preventDefault();
103 |     }
104 |     var title = pic.photo_title;
105 |     var url = pic.photo_url;
106 |     var fileurl = pic.photo_file_url;
107 | 
108 |     var infoHtml = '<div class="info"><h3>' + title +
109 |       '</h3><div class="info-body">' +
110 |       '<a href="' + url + '" target="_blank"><img src="' +
111 |       fileurl + '" class="info-img"/></a></div>' +
112 |       '<a href="http://www.panoramio.com/" target="_blank">' +
113 |       '<img src="http://maps.google.com/intl/en_ALL/mapfiles/' +
114 |       'iw_panoramio.png"/></a><br/>' +
115 |       '<a href="' + pic.owner_url + '" target="_blank">' + pic.owner_name +
116 |       '</a></div></div>';
117 | 
118 |     speedTest.infoWindow.setContent(infoHtml);
119 |     speedTest.infoWindow.setPosition(latlng);
120 |     speedTest.infoWindow.open(speedTest.map);
121 |   };
122 | };
123 | 
124 | speedTest.clear = function() {
125 |   $('timetaken').innerHTML = 'cleaning...';
126 |   for (var i = 0, marker; marker = speedTest.markers[i]; i++) {
127 |     marker.setMap(null);
128 |   }
129 | };
130 | 
131 | speedTest.change = function() {
132 |   speedTest.clear();
133 |   speedTest.showMarkers();
134 | };
135 | 
136 | speedTest.time = function() {
137 |   $('timetaken').innerHTML = 'timing...';
138 |   var start = new Date();
139 |   if ($('usegmm').checked) {
140 |     speedTest.markerClusterer = new MarkerClusterer(speedTest.map, speedTest.markers, {imagePath: '../images/m'});
141 |   } else {
142 |     for (var i = 0, marker; marker = speedTest.markers[i]; i++) {
143 |       marker.setMap(speedTest.map);
144 |     }
145 |   }
146 | 
147 |   var end = new Date();
148 |   $('timetaken').innerHTML = end - start;
149 | };
150 | 


--------------------------------------------------------------------------------
/examples/speed_test_example.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <title>MarkerClusterer v3 Speed Test Example</title>
  6 | 
  7 |     <style>
  8 |       body {
  9 |         margin: 0;
 10 |         padding: 0;
 11 |         font-family: Arial;
 12 |         font-size: 14px;
 13 |       }
 14 |       #panel {
 15 |         float: left;
 16 |         width: 300px;
 17 |         height: 550px;
 18 |       }
 19 |       #map-container {
 20 |         margin-left: 300px;
 21 |       }
 22 |       #map {
 23 |         width: 100%;
 24 |         height: 550px;
 25 |       }
 26 |       #markerlist {
 27 |         height: 400px;
 28 |         margin: 10px 5px 0 10px;
 29 |         overflow: auto;
 30 |       }
 31 |       .title {
 32 |         border-bottom: 1px solid #e0ecff;
 33 |         overflow: hidden;
 34 |         width: 256px;
 35 |         cursor: pointer;
 36 |         padding: 2px 0;
 37 |         display: block;
 38 |         color: #000;
 39 |         text-decoration: none;
 40 |       }
 41 |       .title:visited {
 42 |         color: #000;
 43 |       }
 44 |       .title:hover {
 45 |         background: #e0ecff;
 46 |       }
 47 |       #timetaken {
 48 |         color: #f00;
 49 |       }
 50 |       .info {
 51 |         width: 200px;
 52 |       }
 53 |       .info img {
 54 |         border: 0;
 55 |       }
 56 |       .info-body {
 57 |         width: 200px;
 58 |         height: 200px;
 59 |         line-height: 200px;
 60 |         margin: 2px 0;
 61 |         text-align: center;
 62 |         overflow: hidden;
 63 |       }
 64 |       .info-img {
 65 |         height: 220px;
 66 |         width: 200px;
 67 |       }
 68 |     </style>
 69 | 
 70 |     <script src="https://maps.googleapis.com/maps/api/js"></script>
 71 |     <script src="data.json"></script>
 72 |     <script type="text/javascript" src="../src/markerclusterer.js"></script>
 73 |     <script src="speed_test.js"></script>
 74 | 
 75 |     <script>
 76 |       google.maps.event.addDomListener(window, 'load', speedTest.init);
 77 |     </script>
 78 |     <script>
 79 |       var _gaq = _gaq || [];
 80 |       _gaq.push(['_setAccount', 'UA-12846745-20']);
 81 |       _gaq.push(['_trackPageview']);
 82 | 
 83 |       (function() {
 84 |         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 85 |         ga.src = ('https:' === document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 86 |         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 87 |       })();
 88 |     </script>
 89 |   </head>
 90 | 
 91 |   <body>
 92 |     <div id="panel">
 93 |       <h3>An example of MarkerClusterer v3</h3>
 94 | 
 95 |       <div>
 96 |         <input type="checkbox" checked="checked" id="usegmm"/>
 97 |         <span>Use MarkerClusterer</span>
 98 |       </div>
 99 | 
100 |       <div>
101 |         Markers:
102 |         <select id="nummarkers">
103 |           <option value="10">10</option>
104 |           <option value="50">50</option>
105 |           <option value="100" selected="selected">100</option>
106 |           <option value="500">500</option>
107 |           <option value="1000">1000</option>
108 |         </select>
109 | 
110 |         <span>Time used: <span id="timetaken"></span> ms</span>
111 |       </div>
112 | 
113 |       <strong>Marker List</strong>
114 |       <div id="markerlist">
115 | 
116 |       </div>
117 |     </div>
118 |     <div id="map-container">
119 |       <div id="map"></div>
120 |     </div>
121 |   </body>
122 | </html>
123 | 


--------------------------------------------------------------------------------
/images/conv30.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/images/conv30.png


--------------------------------------------------------------------------------
/images/conv40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/images/conv40.png


--------------------------------------------------------------------------------
/images/conv50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/images/conv50.png


--------------------------------------------------------------------------------
/images/heart30.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/images/heart30.png


--------------------------------------------------------------------------------
/images/heart40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/images/heart40.png


--------------------------------------------------------------------------------
/images/heart50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/images/heart50.png


--------------------------------------------------------------------------------
/images/m1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/images/m1.png


--------------------------------------------------------------------------------
/images/m2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/images/m2.png


--------------------------------------------------------------------------------
/images/m3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/images/m3.png


--------------------------------------------------------------------------------
/images/m4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/images/m4.png


--------------------------------------------------------------------------------
/images/m5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/images/m5.png


--------------------------------------------------------------------------------
/images/people35.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/images/people35.png


--------------------------------------------------------------------------------
/images/people45.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/images/people45.png


--------------------------------------------------------------------------------
/images/people55.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/images/people55.png


--------------------------------------------------------------------------------
/images/pin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/images/pin.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "js-marker-clusterer",
 3 |   "version": "1.0.0",
 4 |   "description": "The library creates and manages per-zoom-level clusters for large amounts of markers. Google API v3.",
 5 |   "main": "src/markerclusterer.js",
 6 |   "directories": {
 7 |     "doc": "docs",
 8 |     "example": "examples"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/googlemaps/js-marker-clusterer.git"
13 |   },
14 |   "keywords": [
15 |     "google",
16 |     "marker",
17 |     "cluster",
18 |     "clusterer",
19 |     "javascript",
20 |     "js",
21 |     "api",
22 |     "v3"
23 |   ],
24 |   "author": "Luke Mahe",
25 |   "license": "Apache-2.0",
26 |   "bugs": {
27 |     "url": "https://github.com/googlemaps/js-marker-clusterer/issues"
28 |   },
29 |   "homepage": "https://github.com/googlemaps/js-marker-clusterer#readme"
30 | }
31 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/8c2be07696e0c8789a4e314e12fc698622bf8323/screenshot.png


--------------------------------------------------------------------------------
/src/markerclusterer.js:
--------------------------------------------------------------------------------
   1 | // ==ClosureCompiler==
   2 | // @compilation_level ADVANCED_OPTIMIZATIONS
   3 | // @externs_url https://raw.githubusercontent.com/google/closure-compiler/master/contrib/externs/maps/google_maps_api_v3.js
   4 | // ==/ClosureCompiler==
   5 | 
   6 | /**
   7 |  * @name MarkerClusterer for Google Maps v3
   8 |  * @version version 1.0
   9 |  * @author Luke Mahe
  10 |  * @fileoverview
  11 |  * The library creates and manages per-zoom-level clusters for large amounts of
  12 |  * markers.
  13 |  * <br/>
  14 |  * This is a v3 implementation of the
  15 |  * <a href="http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/"
  16 |  * >v2 MarkerClusterer</a>.
  17 |  */
  18 | 
  19 | /**
  20 |  * @license
  21 |  * Copyright 2010 Google Inc. All Rights Reserved.
  22 |  *
  23 |  * Licensed under the Apache License, Version 2.0 (the "License");
  24 |  * you may not use this file except in compliance with the License.
  25 |  * You may obtain a copy of the License at
  26 |  *
  27 |  *     http://www.apache.org/licenses/LICENSE-2.0
  28 |  *
  29 |  * Unless required by applicable law or agreed to in writing, software
  30 |  * distributed under the License is distributed on an "AS IS" BASIS,
  31 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  32 |  * See the License for the specific language governing permissions and
  33 |  * limitations under the License.
  34 |  */
  35 | 
  36 | 
  37 | /**
  38 |  * A Marker Clusterer that clusters markers.
  39 |  *
  40 |  * @param {google.maps.Map} map The Google map to attach to.
  41 |  * @param {Array.<google.maps.Marker>=} opt_markers Optional markers to add to
  42 |  *   the cluster.
  43 |  * @param {Object=} opt_options support the following options:
  44 |  *     'gridSize': (number) The grid size of a cluster in pixels.
  45 |  *     'maxZoom': (number) The maximum zoom level that a marker can be part of a
  46 |  *                cluster.
  47 |  *     'zoomOnClick': (boolean) Whether the default behaviour of clicking on a
  48 |  *                    cluster is to zoom into it.
  49 |  *     'averageCenter': (boolean) Whether the center of each cluster should be
  50 |  *                      the average of all markers in the cluster.
  51 |  *     'minimumClusterSize': (number) The minimum number of markers to be in a
  52 |  *                           cluster before the markers are hidden and a count
  53 |  *                           is shown.
  54 |  *     'styles': (object) An object that has style properties:
  55 |  *       'url': (string) The image url.
  56 |  *       'height': (number) The image height.
  57 |  *       'width': (number) The image width.
  58 |  *       'anchor': (Array) The anchor position of the label text.
  59 |  *       'textColor': (string) The text color.
  60 |  *       'textSize': (number) The text size.
  61 |  *       'backgroundPosition': (string) The position of the backgound x, y.
  62 |  *       'iconAnchor': (Array) The anchor position of the icon x, y.
  63 |  * @constructor
  64 |  * @extends google.maps.OverlayView
  65 |  */
  66 | function MarkerClusterer(map, opt_markers, opt_options) {
  67 |   // MarkerClusterer implements google.maps.OverlayView interface. We use the
  68 |   // extend function to extend MarkerClusterer with google.maps.OverlayView
  69 |   // because it might not always be available when the code is defined so we
  70 |   // look for it at the last possible moment. If it doesn't exist now then
  71 |   // there is no point going ahead :)
  72 |   this.extend(MarkerClusterer, google.maps.OverlayView);
  73 |   this.map_ = map;
  74 | 
  75 |   /**
  76 |    * @type {Array.<google.maps.Marker>}
  77 |    * @private
  78 |    */
  79 |   this.markers_ = [];
  80 | 
  81 |   /**
  82 |    *  @type {Array.<Cluster>}
  83 |    */
  84 |   this.clusters_ = [];
  85 | 
  86 |   this.sizes = [53, 56, 66, 78, 90];
  87 | 
  88 |   /**
  89 |    * @private
  90 |    */
  91 |   this.styles_ = [];
  92 | 
  93 |   /**
  94 |    * @type {boolean}
  95 |    * @private
  96 |    */
  97 |   this.ready_ = false;
  98 | 
  99 |   var options = opt_options || {};
 100 | 
 101 |   /**
 102 |    * @type {number}
 103 |    * @private
 104 |    */
 105 |   this.gridSize_ = options['gridSize'] || 60;
 106 | 
 107 |   /**
 108 |    * @private
 109 |    */
 110 |   this.minClusterSize_ = options['minimumClusterSize'] || 2;
 111 | 
 112 | 
 113 |   /**
 114 |    * @type {?number}
 115 |    * @private
 116 |    */
 117 |   this.maxZoom_ = options['maxZoom'] || null;
 118 | 
 119 |   this.styles_ = options['styles'] || [];
 120 | 
 121 |   /**
 122 |    * @type {string}
 123 |    * @private
 124 |    */
 125 |   this.imagePath_ = options['imagePath'] ||
 126 |       this.MARKER_CLUSTER_IMAGE_PATH_;
 127 | 
 128 |   /**
 129 |    * @type {string}
 130 |    * @private
 131 |    */
 132 |   this.imageExtension_ = options['imageExtension'] ||
 133 |       this.MARKER_CLUSTER_IMAGE_EXTENSION_;
 134 | 
 135 |   /**
 136 |    * @type {boolean}
 137 |    * @private
 138 |    */
 139 |   this.zoomOnClick_ = true;
 140 | 
 141 |   if (options['zoomOnClick'] != undefined) {
 142 |     this.zoomOnClick_ = options['zoomOnClick'];
 143 |   }
 144 | 
 145 |   /**
 146 |    * @type {boolean}
 147 |    * @private
 148 |    */
 149 |   this.averageCenter_ = false;
 150 | 
 151 |   if (options['averageCenter'] != undefined) {
 152 |     this.averageCenter_ = options['averageCenter'];
 153 |   }
 154 | 
 155 |   this.setupStyles_();
 156 | 
 157 |   this.setMap(map);
 158 | 
 159 |   /**
 160 |    * @type {number}
 161 |    * @private
 162 |    */
 163 |   this.prevZoom_ = this.map_.getZoom();
 164 | 
 165 |   // Add the map event listeners
 166 |   var that = this;
 167 |   google.maps.event.addListener(this.map_, 'zoom_changed', function() {
 168 |     var zoom = that.map_.getZoom();
 169 | 
 170 |     if (that.prevZoom_ != zoom) {
 171 |       that.prevZoom_ = zoom;
 172 |       that.resetViewport();
 173 |     }
 174 |   });
 175 | 
 176 |   google.maps.event.addListener(this.map_, 'idle', function() {
 177 |     that.redraw();
 178 |   });
 179 | 
 180 |   // Finally, add the markers
 181 |   if (opt_markers && opt_markers.length) {
 182 |     this.addMarkers(opt_markers, false);
 183 |   }
 184 | }
 185 | 
 186 | 
 187 | /**
 188 |  * The marker cluster image path.
 189 |  *
 190 |  * @type {string}
 191 |  * @private
 192 |  */
 193 | MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = '../images/m';
 194 | 
 195 | 
 196 | /**
 197 |  * The marker cluster image path.
 198 |  *
 199 |  * @type {string}
 200 |  * @private
 201 |  */
 202 | MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_EXTENSION_ = 'png';
 203 | 
 204 | 
 205 | /**
 206 |  * Extends a objects prototype by anothers.
 207 |  *
 208 |  * @param {Object} obj1 The object to be extended.
 209 |  * @param {Object} obj2 The object to extend with.
 210 |  * @return {Object} The new extended object.
 211 |  * @ignore
 212 |  */
 213 | MarkerClusterer.prototype.extend = function(obj1, obj2) {
 214 |   return (function(object) {
 215 |     for (var property in object.prototype) {
 216 |       this.prototype[property] = object.prototype[property];
 217 |     }
 218 |     return this;
 219 |   }).apply(obj1, [obj2]);
 220 | };
 221 | 
 222 | 
 223 | /**
 224 |  * Implementaion of the interface method.
 225 |  * @ignore
 226 |  */
 227 | MarkerClusterer.prototype.onAdd = function() {
 228 |   this.setReady_(true);
 229 | };
 230 | 
 231 | /**
 232 |  * Implementaion of the interface method.
 233 |  * @ignore
 234 |  */
 235 | MarkerClusterer.prototype.draw = function() {};
 236 | 
 237 | /**
 238 |  * Sets up the styles object.
 239 |  *
 240 |  * @private
 241 |  */
 242 | MarkerClusterer.prototype.setupStyles_ = function() {
 243 |   if (this.styles_.length) {
 244 |     return;
 245 |   }
 246 | 
 247 |   for (var i = 0, size; size = this.sizes[i]; i++) {
 248 |     this.styles_.push({
 249 |       url: this.imagePath_ + (i + 1) + '.' + this.imageExtension_,
 250 |       height: size,
 251 |       width: size
 252 |     });
 253 |   }
 254 | };
 255 | 
 256 | /**
 257 |  *  Fit the map to the bounds of the markers in the clusterer.
 258 |  */
 259 | MarkerClusterer.prototype.fitMapToMarkers = function() {
 260 |   var markers = this.getMarkers();
 261 |   var bounds = new google.maps.LatLngBounds();
 262 |   for (var i = 0, marker; marker = markers[i]; i++) {
 263 |     bounds.extend(marker.getPosition());
 264 |   }
 265 | 
 266 |   this.map_.fitBounds(bounds);
 267 | };
 268 | 
 269 | 
 270 | /**
 271 |  *  Sets the styles.
 272 |  *
 273 |  *  @param {Object} styles The style to set.
 274 |  */
 275 | MarkerClusterer.prototype.setStyles = function(styles) {
 276 |   this.styles_ = styles;
 277 | };
 278 | 
 279 | 
 280 | /**
 281 |  *  Gets the styles.
 282 |  *
 283 |  *  @return {Object} The styles object.
 284 |  */
 285 | MarkerClusterer.prototype.getStyles = function() {
 286 |   return this.styles_;
 287 | };
 288 | 
 289 | 
 290 | /**
 291 |  * Whether zoom on click is set.
 292 |  *
 293 |  * @return {boolean} True if zoomOnClick_ is set.
 294 |  */
 295 | MarkerClusterer.prototype.isZoomOnClick = function() {
 296 |   return this.zoomOnClick_;
 297 | };
 298 | 
 299 | /**
 300 |  * Whether average center is set.
 301 |  *
 302 |  * @return {boolean} True if averageCenter_ is set.
 303 |  */
 304 | MarkerClusterer.prototype.isAverageCenter = function() {
 305 |   return this.averageCenter_;
 306 | };
 307 | 
 308 | 
 309 | /**
 310 |  *  Returns the array of markers in the clusterer.
 311 |  *
 312 |  *  @return {Array.<google.maps.Marker>} The markers.
 313 |  */
 314 | MarkerClusterer.prototype.getMarkers = function() {
 315 |   return this.markers_;
 316 | };
 317 | 
 318 | 
 319 | /**
 320 |  *  Returns the number of markers in the clusterer
 321 |  *
 322 |  *  @return {Number} The number of markers.
 323 |  */
 324 | MarkerClusterer.prototype.getTotalMarkers = function() {
 325 |   return this.markers_.length;
 326 | };
 327 | 
 328 | 
 329 | /**
 330 |  *  Sets the max zoom for the clusterer.
 331 |  *
 332 |  *  @param {number} maxZoom The max zoom level.
 333 |  */
 334 | MarkerClusterer.prototype.setMaxZoom = function(maxZoom) {
 335 |   this.maxZoom_ = maxZoom;
 336 | };
 337 | 
 338 | 
 339 | /**
 340 |  *  Gets the max zoom for the clusterer.
 341 |  *
 342 |  *  @return {number} The max zoom level.
 343 |  */
 344 | MarkerClusterer.prototype.getMaxZoom = function() {
 345 |   return this.maxZoom_;
 346 | };
 347 | 
 348 | 
 349 | /**
 350 |  *  The function for calculating the cluster icon image.
 351 |  *
 352 |  *  @param {Array.<google.maps.Marker>} markers The markers in the clusterer.
 353 |  *  @param {number} numStyles The number of styles available.
 354 |  *  @return {Object} A object properties: 'text' (string) and 'index' (number).
 355 |  *  @private
 356 |  */
 357 | MarkerClusterer.prototype.calculator_ = function(markers, numStyles) {
 358 |   var index = 0;
 359 |   var count = markers.length;
 360 |   var dv = count;
 361 |   while (dv !== 0) {
 362 |     dv = parseInt(dv / 10, 10);
 363 |     index++;
 364 |   }
 365 | 
 366 |   index = Math.min(index, numStyles);
 367 |   return {
 368 |     text: count,
 369 |     index: index
 370 |   };
 371 | };
 372 | 
 373 | 
 374 | /**
 375 |  * Set the calculator function.
 376 |  *
 377 |  * @param {function(Array, number)} calculator The function to set as the
 378 |  *     calculator. The function should return a object properties:
 379 |  *     'text' (string) and 'index' (number).
 380 |  *
 381 |  */
 382 | MarkerClusterer.prototype.setCalculator = function(calculator) {
 383 |   this.calculator_ = calculator;
 384 | };
 385 | 
 386 | 
 387 | /**
 388 |  * Get the calculator function.
 389 |  *
 390 |  * @return {function(Array, number)} the calculator function.
 391 |  */
 392 | MarkerClusterer.prototype.getCalculator = function() {
 393 |   return this.calculator_;
 394 | };
 395 | 
 396 | 
 397 | /**
 398 |  * Add an array of markers to the clusterer.
 399 |  *
 400 |  * @param {Array.<google.maps.Marker>} markers The markers to add.
 401 |  * @param {boolean=} opt_nodraw Whether to redraw the clusters.
 402 |  */
 403 | MarkerClusterer.prototype.addMarkers = function(markers, opt_nodraw) {
 404 |   for (var i = 0, marker; marker = markers[i]; i++) {
 405 |     this.pushMarkerTo_(marker);
 406 |   }
 407 |   if (!opt_nodraw) {
 408 |     this.redraw();
 409 |   }
 410 | };
 411 | 
 412 | 
 413 | /**
 414 |  * Pushes a marker to the clusterer.
 415 |  *
 416 |  * @param {google.maps.Marker} marker The marker to add.
 417 |  * @private
 418 |  */
 419 | MarkerClusterer.prototype.pushMarkerTo_ = function(marker) {
 420 |   marker.isAdded = false;
 421 |   if (marker['draggable']) {
 422 |     // If the marker is draggable add a listener so we update the clusters on
 423 |     // the drag end.
 424 |     var that = this;
 425 |     google.maps.event.addListener(marker, 'dragend', function() {
 426 |       marker.isAdded = false;
 427 |       that.repaint();
 428 |     });
 429 |   }
 430 |   this.markers_.push(marker);
 431 | };
 432 | 
 433 | 
 434 | /**
 435 |  * Adds a marker to the clusterer and redraws if needed.
 436 |  *
 437 |  * @param {google.maps.Marker} marker The marker to add.
 438 |  * @param {boolean=} opt_nodraw Whether to redraw the clusters.
 439 |  */
 440 | MarkerClusterer.prototype.addMarker = function(marker, opt_nodraw) {
 441 |   this.pushMarkerTo_(marker);
 442 |   if (!opt_nodraw) {
 443 |     this.redraw();
 444 |   }
 445 | };
 446 | 
 447 | 
 448 | /**
 449 |  * Removes a marker and returns true if removed, false if not
 450 |  *
 451 |  * @param {google.maps.Marker} marker The marker to remove
 452 |  * @return {boolean} Whether the marker was removed or not
 453 |  * @private
 454 |  */
 455 | MarkerClusterer.prototype.removeMarker_ = function(marker) {
 456 |   var index = -1;
 457 |   if (this.markers_.indexOf) {
 458 |     index = this.markers_.indexOf(marker);
 459 |   } else {
 460 |     for (var i = 0, m; m = this.markers_[i]; i++) {
 461 |       if (m == marker) {
 462 |         index = i;
 463 |         break;
 464 |       }
 465 |     }
 466 |   }
 467 | 
 468 |   if (index == -1) {
 469 |     // Marker is not in our list of markers.
 470 |     return false;
 471 |   }
 472 | 
 473 |   marker.setMap(null);
 474 | 
 475 |   this.markers_.splice(index, 1);
 476 | 
 477 |   return true;
 478 | };
 479 | 
 480 | 
 481 | /**
 482 |  * Remove a marker from the cluster.
 483 |  *
 484 |  * @param {google.maps.Marker} marker The marker to remove.
 485 |  * @param {boolean=} opt_nodraw Optional boolean to force no redraw.
 486 |  * @return {boolean} True if the marker was removed.
 487 |  */
 488 | MarkerClusterer.prototype.removeMarker = function(marker, opt_nodraw) {
 489 |   var removed = this.removeMarker_(marker);
 490 | 
 491 |   if (!opt_nodraw && removed) {
 492 |     this.resetViewport();
 493 |     this.redraw();
 494 |     return true;
 495 |   } else {
 496 |    return false;
 497 |   }
 498 | };
 499 | 
 500 | 
 501 | /**
 502 |  * Removes an array of markers from the cluster.
 503 |  *
 504 |  * @param {Array.<google.maps.Marker>} markers The markers to remove.
 505 |  * @param {boolean=} opt_nodraw Optional boolean to force no redraw.
 506 |  */
 507 | MarkerClusterer.prototype.removeMarkers = function(markers, opt_nodraw) {
 508 |   var removed = false;
 509 | 
 510 |   for (var i = 0, marker; marker = markers[i]; i++) {
 511 |     var r = this.removeMarker_(marker);
 512 |     removed = removed || r;
 513 |   }
 514 | 
 515 |   if (!opt_nodraw && removed) {
 516 |     this.resetViewport();
 517 |     this.redraw();
 518 |     return true;
 519 |   }
 520 | };
 521 | 
 522 | 
 523 | /**
 524 |  * Sets the clusterer's ready state.
 525 |  *
 526 |  * @param {boolean} ready The state.
 527 |  * @private
 528 |  */
 529 | MarkerClusterer.prototype.setReady_ = function(ready) {
 530 |   if (!this.ready_) {
 531 |     this.ready_ = ready;
 532 |     this.createClusters_();
 533 |   }
 534 | };
 535 | 
 536 | 
 537 | /**
 538 |  * Returns the number of clusters in the clusterer.
 539 |  *
 540 |  * @return {number} The number of clusters.
 541 |  */
 542 | MarkerClusterer.prototype.getTotalClusters = function() {
 543 |   return this.clusters_.length;
 544 | };
 545 | 
 546 | 
 547 | /**
 548 |  * Returns the google map that the clusterer is associated with.
 549 |  *
 550 |  * @return {google.maps.Map} The map.
 551 |  */
 552 | MarkerClusterer.prototype.getMap = function() {
 553 |   return this.map_;
 554 | };
 555 | 
 556 | 
 557 | /**
 558 |  * Sets the google map that the clusterer is associated with.
 559 |  *
 560 |  * @param {google.maps.Map} map The map.
 561 |  */
 562 | MarkerClusterer.prototype.setMap = function(map) {
 563 |   this.map_ = map;
 564 | };
 565 | 
 566 | 
 567 | /**
 568 |  * Returns the size of the grid.
 569 |  *
 570 |  * @return {number} The grid size.
 571 |  */
 572 | MarkerClusterer.prototype.getGridSize = function() {
 573 |   return this.gridSize_;
 574 | };
 575 | 
 576 | 
 577 | /**
 578 |  * Sets the size of the grid.
 579 |  *
 580 |  * @param {number} size The grid size.
 581 |  */
 582 | MarkerClusterer.prototype.setGridSize = function(size) {
 583 |   this.gridSize_ = size;
 584 | };
 585 | 
 586 | 
 587 | /**
 588 |  * Returns the min cluster size.
 589 |  *
 590 |  * @return {number} The grid size.
 591 |  */
 592 | MarkerClusterer.prototype.getMinClusterSize = function() {
 593 |   return this.minClusterSize_;
 594 | };
 595 | 
 596 | /**
 597 |  * Sets the min cluster size.
 598 |  *
 599 |  * @param {number} size The grid size.
 600 |  */
 601 | MarkerClusterer.prototype.setMinClusterSize = function(size) {
 602 |   this.minClusterSize_ = size;
 603 | };
 604 | 
 605 | 
 606 | /**
 607 |  * Extends a bounds object by the grid size.
 608 |  *
 609 |  * @param {google.maps.LatLngBounds} bounds The bounds to extend.
 610 |  * @return {google.maps.LatLngBounds} The extended bounds.
 611 |  */
 612 | MarkerClusterer.prototype.getExtendedBounds = function(bounds) {
 613 |   var projection = this.getProjection();
 614 | 
 615 |   // Turn the bounds into latlng.
 616 |   var tr = new google.maps.LatLng(bounds.getNorthEast().lat(),
 617 |       bounds.getNorthEast().lng());
 618 |   var bl = new google.maps.LatLng(bounds.getSouthWest().lat(),
 619 |       bounds.getSouthWest().lng());
 620 | 
 621 |   // Convert the points to pixels and the extend out by the grid size.
 622 |   var trPix = projection.fromLatLngToDivPixel(tr);
 623 |   trPix.x += this.gridSize_;
 624 |   trPix.y -= this.gridSize_;
 625 | 
 626 |   var blPix = projection.fromLatLngToDivPixel(bl);
 627 |   blPix.x -= this.gridSize_;
 628 |   blPix.y += this.gridSize_;
 629 | 
 630 |   // Convert the pixel points back to LatLng
 631 |   var ne = projection.fromDivPixelToLatLng(trPix);
 632 |   var sw = projection.fromDivPixelToLatLng(blPix);
 633 | 
 634 |   // Extend the bounds to contain the new bounds.
 635 |   bounds.extend(ne);
 636 |   bounds.extend(sw);
 637 | 
 638 |   return bounds;
 639 | };
 640 | 
 641 | 
 642 | /**
 643 |  * Determins if a marker is contained in a bounds.
 644 |  *
 645 |  * @param {google.maps.Marker} marker The marker to check.
 646 |  * @param {google.maps.LatLngBounds} bounds The bounds to check against.
 647 |  * @return {boolean} True if the marker is in the bounds.
 648 |  * @private
 649 |  */
 650 | MarkerClusterer.prototype.isMarkerInBounds_ = function(marker, bounds) {
 651 |   return bounds.contains(marker.getPosition());
 652 | };
 653 | 
 654 | 
 655 | /**
 656 |  * Clears all clusters and markers from the clusterer.
 657 |  */
 658 | MarkerClusterer.prototype.clearMarkers = function() {
 659 |   this.resetViewport(true);
 660 | 
 661 |   // Set the markers a empty array.
 662 |   this.markers_ = [];
 663 | };
 664 | 
 665 | 
 666 | /**
 667 |  * Clears all existing clusters and recreates them.
 668 |  * @param {boolean} opt_hide To also hide the marker.
 669 |  */
 670 | MarkerClusterer.prototype.resetViewport = function(opt_hide) {
 671 |   // Remove all the clusters
 672 |   for (var i = 0, cluster; cluster = this.clusters_[i]; i++) {
 673 |     cluster.remove();
 674 |   }
 675 | 
 676 |   // Reset the markers to not be added and to be invisible.
 677 |   for (var i = 0, marker; marker = this.markers_[i]; i++) {
 678 |     marker.isAdded = false;
 679 |     if (opt_hide) {
 680 |       marker.setMap(null);
 681 |     }
 682 |   }
 683 | 
 684 |   this.clusters_ = [];
 685 | };
 686 | 
 687 | /**
 688 |  *
 689 |  */
 690 | MarkerClusterer.prototype.repaint = function() {
 691 |   var oldClusters = this.clusters_.slice();
 692 |   this.clusters_.length = 0;
 693 |   this.resetViewport();
 694 |   this.redraw();
 695 | 
 696 |   // Remove the old clusters.
 697 |   // Do it in a timeout so the other clusters have been drawn first.
 698 |   window.setTimeout(function() {
 699 |     for (var i = 0, cluster; cluster = oldClusters[i]; i++) {
 700 |       cluster.remove();
 701 |     }
 702 |   }, 0);
 703 | };
 704 | 
 705 | 
 706 | /**
 707 |  * Redraws the clusters.
 708 |  */
 709 | MarkerClusterer.prototype.redraw = function() {
 710 |   this.createClusters_();
 711 | };
 712 | 
 713 | 
 714 | /**
 715 |  * Calculates the distance between two latlng locations in km.
 716 |  * @see http://www.movable-type.co.uk/scripts/latlong.html
 717 |  *
 718 |  * @param {google.maps.LatLng} p1 The first lat lng point.
 719 |  * @param {google.maps.LatLng} p2 The second lat lng point.
 720 |  * @return {number} The distance between the two points in km.
 721 |  * @private
 722 | */
 723 | MarkerClusterer.prototype.distanceBetweenPoints_ = function(p1, p2) {
 724 |   if (!p1 || !p2) {
 725 |     return 0;
 726 |   }
 727 | 
 728 |   var R = 6371; // Radius of the Earth in km
 729 |   var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
 730 |   var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
 731 |   var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
 732 |     Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
 733 |     Math.sin(dLon / 2) * Math.sin(dLon / 2);
 734 |   var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
 735 |   var d = R * c;
 736 |   return d;
 737 | };
 738 | 
 739 | 
 740 | /**
 741 |  * Add a marker to a cluster, or creates a new cluster.
 742 |  *
 743 |  * @param {google.maps.Marker} marker The marker to add.
 744 |  * @private
 745 |  */
 746 | MarkerClusterer.prototype.addToClosestCluster_ = function(marker) {
 747 |   var distance = 40000; // Some large number
 748 |   var clusterToAddTo = null;
 749 |   var pos = marker.getPosition();
 750 |   for (var i = 0, cluster; cluster = this.clusters_[i]; i++) {
 751 |     var center = cluster.getCenter();
 752 |     if (center) {
 753 |       var d = this.distanceBetweenPoints_(center, marker.getPosition());
 754 |       if (d < distance) {
 755 |         distance = d;
 756 |         clusterToAddTo = cluster;
 757 |       }
 758 |     }
 759 |   }
 760 | 
 761 |   if (clusterToAddTo && clusterToAddTo.isMarkerInClusterBounds(marker)) {
 762 |     clusterToAddTo.addMarker(marker);
 763 |   } else {
 764 |     var cluster = new Cluster(this);
 765 |     cluster.addMarker(marker);
 766 |     this.clusters_.push(cluster);
 767 |   }
 768 | };
 769 | 
 770 | 
 771 | /**
 772 |  * Creates the clusters.
 773 |  *
 774 |  * @private
 775 |  */
 776 | MarkerClusterer.prototype.createClusters_ = function() {
 777 |   if (!this.ready_) {
 778 |     return;
 779 |   }
 780 | 
 781 |   // Get our current map view bounds.
 782 |   // Create a new bounds object so we don't affect the map.
 783 |   var mapBounds = new google.maps.LatLngBounds(this.map_.getBounds().getSouthWest(),
 784 |       this.map_.getBounds().getNorthEast());
 785 |   var bounds = this.getExtendedBounds(mapBounds);
 786 | 
 787 |   for (var i = 0, marker; marker = this.markers_[i]; i++) {
 788 |     if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {
 789 |       this.addToClosestCluster_(marker);
 790 |     }
 791 |   }
 792 | };
 793 | 
 794 | 
 795 | /**
 796 |  * A cluster that contains markers.
 797 |  *
 798 |  * @param {MarkerClusterer} markerClusterer The markerclusterer that this
 799 |  *     cluster is associated with.
 800 |  * @constructor
 801 |  * @ignore
 802 |  */
 803 | function Cluster(markerClusterer) {
 804 |   this.markerClusterer_ = markerClusterer;
 805 |   this.map_ = markerClusterer.getMap();
 806 |   this.gridSize_ = markerClusterer.getGridSize();
 807 |   this.minClusterSize_ = markerClusterer.getMinClusterSize();
 808 |   this.averageCenter_ = markerClusterer.isAverageCenter();
 809 |   this.center_ = null;
 810 |   this.markers_ = [];
 811 |   this.bounds_ = null;
 812 |   this.clusterIcon_ = new ClusterIcon(this, markerClusterer.getStyles(),
 813 |       markerClusterer.getGridSize());
 814 | }
 815 | 
 816 | /**
 817 |  * Determins if a marker is already added to the cluster.
 818 |  *
 819 |  * @param {google.maps.Marker} marker The marker to check.
 820 |  * @return {boolean} True if the marker is already added.
 821 |  */
 822 | Cluster.prototype.isMarkerAlreadyAdded = function(marker) {
 823 |   if (this.markers_.indexOf) {
 824 |     return this.markers_.indexOf(marker) != -1;
 825 |   } else {
 826 |     for (var i = 0, m; m = this.markers_[i]; i++) {
 827 |       if (m == marker) {
 828 |         return true;
 829 |       }
 830 |     }
 831 |   }
 832 |   return false;
 833 | };
 834 | 
 835 | 
 836 | /**
 837 |  * Add a marker the cluster.
 838 |  *
 839 |  * @param {google.maps.Marker} marker The marker to add.
 840 |  * @return {boolean} True if the marker was added.
 841 |  */
 842 | Cluster.prototype.addMarker = function(marker) {
 843 |   if (this.isMarkerAlreadyAdded(marker)) {
 844 |     return false;
 845 |   }
 846 | 
 847 |   if (!this.center_) {
 848 |     this.center_ = marker.getPosition();
 849 |     this.calculateBounds_();
 850 |   } else {
 851 |     if (this.averageCenter_) {
 852 |       var l = this.markers_.length + 1;
 853 |       var lat = (this.center_.lat() * (l-1) + marker.getPosition().lat()) / l;
 854 |       var lng = (this.center_.lng() * (l-1) + marker.getPosition().lng()) / l;
 855 |       this.center_ = new google.maps.LatLng(lat, lng);
 856 |       this.calculateBounds_();
 857 |     }
 858 |   }
 859 | 
 860 |   marker.isAdded = true;
 861 |   this.markers_.push(marker);
 862 | 
 863 |   var len = this.markers_.length;
 864 |   if (len < this.minClusterSize_ && marker.getMap() != this.map_) {
 865 |     // Min cluster size not reached so show the marker.
 866 |     marker.setMap(this.map_);
 867 |   }
 868 | 
 869 |   if (len == this.minClusterSize_) {
 870 |     // Hide the markers that were showing.
 871 |     for (var i = 0; i < len; i++) {
 872 |       this.markers_[i].setMap(null);
 873 |     }
 874 |   }
 875 | 
 876 |   if (len >= this.minClusterSize_) {
 877 |     marker.setMap(null);
 878 |   }
 879 | 
 880 |   this.updateIcon();
 881 |   return true;
 882 | };
 883 | 
 884 | 
 885 | /**
 886 |  * Returns the marker clusterer that the cluster is associated with.
 887 |  *
 888 |  * @return {MarkerClusterer} The associated marker clusterer.
 889 |  */
 890 | Cluster.prototype.getMarkerClusterer = function() {
 891 |   return this.markerClusterer_;
 892 | };
 893 | 
 894 | 
 895 | /**
 896 |  * Returns the bounds of the cluster.
 897 |  *
 898 |  * @return {google.maps.LatLngBounds} the cluster bounds.
 899 |  */
 900 | Cluster.prototype.getBounds = function() {
 901 |   var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
 902 |   var markers = this.getMarkers();
 903 |   for (var i = 0, marker; marker = markers[i]; i++) {
 904 |     bounds.extend(marker.getPosition());
 905 |   }
 906 |   return bounds;
 907 | };
 908 | 
 909 | 
 910 | /**
 911 |  * Removes the cluster
 912 |  */
 913 | Cluster.prototype.remove = function() {
 914 |   this.clusterIcon_.remove();
 915 |   this.markers_.length = 0;
 916 |   delete this.markers_;
 917 | };
 918 | 
 919 | 
 920 | /**
 921 |  * Returns the center of the cluster.
 922 |  *
 923 |  * @return {number} The cluster center.
 924 |  */
 925 | Cluster.prototype.getSize = function() {
 926 |   return this.markers_.length;
 927 | };
 928 | 
 929 | 
 930 | /**
 931 |  * Returns the center of the cluster.
 932 |  *
 933 |  * @return {Array.<google.maps.Marker>} The cluster center.
 934 |  */
 935 | Cluster.prototype.getMarkers = function() {
 936 |   return this.markers_;
 937 | };
 938 | 
 939 | 
 940 | /**
 941 |  * Returns the center of the cluster.
 942 |  *
 943 |  * @return {google.maps.LatLng} The cluster center.
 944 |  */
 945 | Cluster.prototype.getCenter = function() {
 946 |   return this.center_;
 947 | };
 948 | 
 949 | 
 950 | /**
 951 |  * Calculated the extended bounds of the cluster with the grid.
 952 |  *
 953 |  * @private
 954 |  */
 955 | Cluster.prototype.calculateBounds_ = function() {
 956 |   var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
 957 |   this.bounds_ = this.markerClusterer_.getExtendedBounds(bounds);
 958 | };
 959 | 
 960 | 
 961 | /**
 962 |  * Determines if a marker lies in the clusters bounds.
 963 |  *
 964 |  * @param {google.maps.Marker} marker The marker to check.
 965 |  * @return {boolean} True if the marker lies in the bounds.
 966 |  */
 967 | Cluster.prototype.isMarkerInClusterBounds = function(marker) {
 968 |   return this.bounds_.contains(marker.getPosition());
 969 | };
 970 | 
 971 | 
 972 | /**
 973 |  * Returns the map that the cluster is associated with.
 974 |  *
 975 |  * @return {google.maps.Map} The map.
 976 |  */
 977 | Cluster.prototype.getMap = function() {
 978 |   return this.map_;
 979 | };
 980 | 
 981 | 
 982 | /**
 983 |  * Updates the cluster icon
 984 |  */
 985 | Cluster.prototype.updateIcon = function() {
 986 |   var zoom = this.map_.getZoom();
 987 |   var mz = this.markerClusterer_.getMaxZoom();
 988 | 
 989 |   if (mz && zoom > mz) {
 990 |     // The zoom is greater than our max zoom so show all the markers in cluster.
 991 |     for (var i = 0, marker; marker = this.markers_[i]; i++) {
 992 |       marker.setMap(this.map_);
 993 |     }
 994 |     return;
 995 |   }
 996 | 
 997 |   if (this.markers_.length < this.minClusterSize_) {
 998 |     // Min cluster size not yet reached.
 999 |     this.clusterIcon_.hide();
1000 |     return;
1001 |   }
1002 | 
1003 |   var numStyles = this.markerClusterer_.getStyles().length;
1004 |   var sums = this.markerClusterer_.getCalculator()(this.markers_, numStyles);
1005 |   this.clusterIcon_.setCenter(this.center_);
1006 |   this.clusterIcon_.setSums(sums);
1007 |   this.clusterIcon_.show();
1008 | };
1009 | 
1010 | 
1011 | /**
1012 |  * A cluster icon
1013 |  *
1014 |  * @param {Cluster} cluster The cluster to be associated with.
1015 |  * @param {Object} styles An object that has style properties:
1016 |  *     'url': (string) The image url.
1017 |  *     'height': (number) The image height.
1018 |  *     'width': (number) The image width.
1019 |  *     'anchor': (Array) The anchor position of the label text.
1020 |  *     'textColor': (string) The text color.
1021 |  *     'textSize': (number) The text size.
1022 |  *     'backgroundPosition: (string) The background postition x, y.
1023 |  * @param {number=} opt_padding Optional padding to apply to the cluster icon.
1024 |  * @constructor
1025 |  * @extends google.maps.OverlayView
1026 |  * @ignore
1027 |  */
1028 | function ClusterIcon(cluster, styles, opt_padding) {
1029 |   cluster.getMarkerClusterer().extend(ClusterIcon, google.maps.OverlayView);
1030 | 
1031 |   this.styles_ = styles;
1032 |   this.padding_ = opt_padding || 0;
1033 |   this.cluster_ = cluster;
1034 |   this.center_ = null;
1035 |   this.map_ = cluster.getMap();
1036 |   this.div_ = null;
1037 |   this.sums_ = null;
1038 |   this.visible_ = false;
1039 | 
1040 |   this.setMap(this.map_);
1041 | }
1042 | 
1043 | 
1044 | /**
1045 |  * Triggers the clusterclick event and zoom's if the option is set.
1046 |  *
1047 |  * @param {google.maps.MouseEvent} event The event to propagate
1048 |  */
1049 | ClusterIcon.prototype.triggerClusterClick = function(event) {
1050 |   var markerClusterer = this.cluster_.getMarkerClusterer();
1051 | 
1052 |   // Trigger the clusterclick event.
1053 |   google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_, event);
1054 | 
1055 |   if (markerClusterer.isZoomOnClick()) {
1056 |     // Zoom into the cluster.
1057 |     this.map_.fitBounds(this.cluster_.getBounds());
1058 |     this.map_.setCenter(this.cluster_.getCenter());
1059 |   }
1060 | };
1061 | 
1062 | 
1063 | /**
1064 |  * Adding the cluster icon to the dom.
1065 |  * @ignore
1066 |  */
1067 | ClusterIcon.prototype.onAdd = function() {
1068 |   this.div_ = document.createElement('DIV');
1069 |   if (this.visible_) {
1070 |     var pos = this.getPosFromLatLng_(this.center_);
1071 |     this.div_.style.cssText = this.createCss(pos);
1072 |     this.div_.innerHTML = this.sums_.text;
1073 |   }
1074 | 
1075 |   var panes = this.getPanes();
1076 |   panes.overlayMouseTarget.appendChild(this.div_);
1077 | 
1078 |   var that = this;
1079 |   var isDragging = false;
1080 |   google.maps.event.addDomListener(this.div_, 'click', function(event) {
1081 |     // Only perform click when not preceded by a drag
1082 |     if (!isDragging) {
1083 |       that.triggerClusterClick(event);
1084 |     }
1085 |   });
1086 |   google.maps.event.addDomListener(this.div_, 'mousedown', function() {
1087 |     isDragging = false;
1088 |   });
1089 |   google.maps.event.addDomListener(this.div_, 'mousemove', function() {
1090 |     isDragging = true;
1091 |   });
1092 | };
1093 | 
1094 | 
1095 | /**
1096 |  * Returns the position to place the div dending on the latlng.
1097 |  *
1098 |  * @param {google.maps.LatLng} latlng The position in latlng.
1099 |  * @return {google.maps.Point} The position in pixels.
1100 |  * @private
1101 |  */
1102 | ClusterIcon.prototype.getPosFromLatLng_ = function(latlng) {
1103 |   var pos = this.getProjection().fromLatLngToDivPixel(latlng);
1104 | 
1105 |   if (typeof this.iconAnchor_ === 'object' && this.iconAnchor_.length === 2) {
1106 |     pos.x -= this.iconAnchor_[0];
1107 |     pos.y -= this.iconAnchor_[1];
1108 |   } else {
1109 |     pos.x -= parseInt(this.width_ / 2, 10);
1110 |     pos.y -= parseInt(this.height_ / 2, 10);
1111 |   }
1112 |   return pos;
1113 | };
1114 | 
1115 | 
1116 | /**
1117 |  * Draw the icon.
1118 |  * @ignore
1119 |  */
1120 | ClusterIcon.prototype.draw = function() {
1121 |   if (this.visible_) {
1122 |     var pos = this.getPosFromLatLng_(this.center_);
1123 |     this.div_.style.top = pos.y + 'px';
1124 |     this.div_.style.left = pos.x + 'px';
1125 |   }
1126 | };
1127 | 
1128 | 
1129 | /**
1130 |  * Hide the icon.
1131 |  */
1132 | ClusterIcon.prototype.hide = function() {
1133 |   if (this.div_) {
1134 |     this.div_.style.display = 'none';
1135 |   }
1136 |   this.visible_ = false;
1137 | };
1138 | 
1139 | 
1140 | /**
1141 |  * Position and show the icon.
1142 |  */
1143 | ClusterIcon.prototype.show = function() {
1144 |   if (this.div_) {
1145 |     var pos = this.getPosFromLatLng_(this.center_);
1146 |     this.div_.style.cssText = this.createCss(pos);
1147 |     this.div_.style.display = '';
1148 |   }
1149 |   this.visible_ = true;
1150 | };
1151 | 
1152 | 
1153 | /**
1154 |  * Remove the icon from the map
1155 |  */
1156 | ClusterIcon.prototype.remove = function() {
1157 |   this.setMap(null);
1158 | };
1159 | 
1160 | 
1161 | /**
1162 |  * Implementation of the onRemove interface.
1163 |  * @ignore
1164 |  */
1165 | ClusterIcon.prototype.onRemove = function() {
1166 |   if (this.div_ && this.div_.parentNode) {
1167 |     this.hide();
1168 |     this.div_.parentNode.removeChild(this.div_);
1169 |     this.div_ = null;
1170 |   }
1171 | };
1172 | 
1173 | 
1174 | /**
1175 |  * Set the sums of the icon.
1176 |  *
1177 |  * @param {Object} sums The sums containing:
1178 |  *   'text': (string) The text to display in the icon.
1179 |  *   'index': (number) The style index of the icon.
1180 |  */
1181 | ClusterIcon.prototype.setSums = function(sums) {
1182 |   this.sums_ = sums;
1183 |   this.text_ = sums.text;
1184 |   this.index_ = sums.index;
1185 |   if (this.div_) {
1186 |     this.div_.innerHTML = sums.text;
1187 |   }
1188 | 
1189 |   this.useStyle();
1190 | };
1191 | 
1192 | 
1193 | /**
1194 |  * Sets the icon to the the styles.
1195 |  */
1196 | ClusterIcon.prototype.useStyle = function() {
1197 |   var index = Math.max(0, this.sums_.index - 1);
1198 |   index = Math.min(this.styles_.length - 1, index);
1199 |   var style = this.styles_[index];
1200 |   this.url_ = style['url'];
1201 |   this.height_ = style['height'];
1202 |   this.width_ = style['width'];
1203 |   this.textColor_ = style['textColor'];
1204 |   this.anchor_ = style['anchor'];
1205 |   this.textSize_ = style['textSize'];
1206 |   this.backgroundPosition_ = style['backgroundPosition'];
1207 |   this.iconAnchor_ = style['iconAnchor'];
1208 | };
1209 | 
1210 | 
1211 | /**
1212 |  * Sets the center of the icon.
1213 |  *
1214 |  * @param {google.maps.LatLng} center The latlng to set as the center.
1215 |  */
1216 | ClusterIcon.prototype.setCenter = function(center) {
1217 |   this.center_ = center;
1218 | };
1219 | 
1220 | 
1221 | /**
1222 |  * Create the css text based on the position of the icon.
1223 |  *
1224 |  * @param {google.maps.Point} pos The position.
1225 |  * @return {string} The css style text.
1226 |  */
1227 | ClusterIcon.prototype.createCss = function(pos) {
1228 |   var style = [];
1229 |   style.push('background-image:url(' + this.url_ + ');');
1230 |   var backgroundPosition = this.backgroundPosition_ ? this.backgroundPosition_ : '0 0';
1231 |   style.push('background-position:' + backgroundPosition + ';');
1232 | 
1233 |   if (typeof this.anchor_ === 'object') {
1234 |     if (typeof this.anchor_[0] === 'number' && this.anchor_[0] > 0 &&
1235 |         this.anchor_[0] < this.height_) {
1236 |       style.push('height:' + (this.height_ - this.anchor_[0]) +
1237 |           'px; padding-top:' + this.anchor_[0] + 'px;');
1238 |     } else if (typeof this.anchor_[0] === 'number' && this.anchor_[0] < 0 &&
1239 |         -this.anchor_[0] < this.height_) {
1240 |       style.push('height:' + this.height_ + 'px; line-height:' + (this.height_ + this.anchor_[0]) +
1241 |           'px;');
1242 |     } else {
1243 |       style.push('height:' + this.height_ + 'px; line-height:' + this.height_ +
1244 |           'px;');
1245 |     }
1246 |     if (typeof this.anchor_[1] === 'number' && this.anchor_[1] > 0 &&
1247 |         this.anchor_[1] < this.width_) {
1248 |       style.push('width:' + (this.width_ - this.anchor_[1]) +
1249 |           'px; padding-left:' + this.anchor_[1] + 'px;');
1250 |     } else {
1251 |       style.push('width:' + this.width_ + 'px; text-align:center;');
1252 |     }
1253 |   } else {
1254 |     style.push('height:' + this.height_ + 'px; line-height:' +
1255 |         this.height_ + 'px; width:' + this.width_ + 'px; text-align:center;');
1256 |   }
1257 | 
1258 |   var txtColor = this.textColor_ ? this.textColor_ : 'black';
1259 |   var txtSize = this.textSize_ ? this.textSize_ : 11;
1260 | 
1261 |   style.push('cursor:pointer; top:' + pos.y + 'px; left:' +
1262 |       pos.x + 'px; color:' + txtColor + '; position:absolute; font-size:' +
1263 |       txtSize + 'px; font-family:Arial,sans-serif; font-weight:bold');
1264 |   return style.join('');
1265 | };
1266 | 
1267 | 
1268 | // Export Symbols for Closure
1269 | // If you are not going to compile with closure then you can remove the
1270 | // code below.
1271 | window['MarkerClusterer'] = MarkerClusterer;
1272 | MarkerClusterer.prototype['addMarker'] = MarkerClusterer.prototype.addMarker;
1273 | MarkerClusterer.prototype['addMarkers'] = MarkerClusterer.prototype.addMarkers;
1274 | MarkerClusterer.prototype['clearMarkers'] =
1275 |     MarkerClusterer.prototype.clearMarkers;
1276 | MarkerClusterer.prototype['fitMapToMarkers'] =
1277 |     MarkerClusterer.prototype.fitMapToMarkers;
1278 | MarkerClusterer.prototype['getCalculator'] =
1279 |     MarkerClusterer.prototype.getCalculator;
1280 | MarkerClusterer.prototype['getGridSize'] =
1281 |     MarkerClusterer.prototype.getGridSize;
1282 | MarkerClusterer.prototype['getExtendedBounds'] =
1283 |     MarkerClusterer.prototype.getExtendedBounds;
1284 | MarkerClusterer.prototype['getMap'] = MarkerClusterer.prototype.getMap;
1285 | MarkerClusterer.prototype['getMarkers'] = MarkerClusterer.prototype.getMarkers;
1286 | MarkerClusterer.prototype['getMaxZoom'] = MarkerClusterer.prototype.getMaxZoom;
1287 | MarkerClusterer.prototype['getStyles'] = MarkerClusterer.prototype.getStyles;
1288 | MarkerClusterer.prototype['getTotalClusters'] =
1289 |     MarkerClusterer.prototype.getTotalClusters;
1290 | MarkerClusterer.prototype['getTotalMarkers'] =
1291 |     MarkerClusterer.prototype.getTotalMarkers;
1292 | MarkerClusterer.prototype['redraw'] = MarkerClusterer.prototype.redraw;
1293 | MarkerClusterer.prototype['removeMarker'] =
1294 |     MarkerClusterer.prototype.removeMarker;
1295 | MarkerClusterer.prototype['removeMarkers'] =
1296 |     MarkerClusterer.prototype.removeMarkers;
1297 | MarkerClusterer.prototype['resetViewport'] =
1298 |     MarkerClusterer.prototype.resetViewport;
1299 | MarkerClusterer.prototype['repaint'] =
1300 |     MarkerClusterer.prototype.repaint;
1301 | MarkerClusterer.prototype['setCalculator'] =
1302 |     MarkerClusterer.prototype.setCalculator;
1303 | MarkerClusterer.prototype['setGridSize'] =
1304 |     MarkerClusterer.prototype.setGridSize;
1305 | MarkerClusterer.prototype['setMaxZoom'] =
1306 |     MarkerClusterer.prototype.setMaxZoom;
1307 | MarkerClusterer.prototype['onAdd'] = MarkerClusterer.prototype.onAdd;
1308 | MarkerClusterer.prototype['draw'] = MarkerClusterer.prototype.draw;
1309 | 
1310 | Cluster.prototype['getCenter'] = Cluster.prototype.getCenter;
1311 | Cluster.prototype['getSize'] = Cluster.prototype.getSize;
1312 | Cluster.prototype['getMarkers'] = Cluster.prototype.getMarkers;
1313 | 
1314 | ClusterIcon.prototype['onAdd'] = ClusterIcon.prototype.onAdd;
1315 | ClusterIcon.prototype['draw'] = ClusterIcon.prototype.draw;
1316 | ClusterIcon.prototype['onRemove'] = ClusterIcon.prototype.onRemove;
1317 | 


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