js-marker-clusterer
Version:
The library creates and manages per-zoom-level clusters for large amounts of markers. Google API v3.
354 lines (233 loc) • 11 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>MarkerClusterer for Google Maps v3 version 1.0 Reference</title>
<style>
body {
font-family: arial, sans-serif;
background-color: #fff;
font-size: small;
margin: 24px 8px 8px;
color: #000;
}
h1, h2, h3, h4, h5 {
font-weight: bold;
margin-bottom: 0;
}
h2, h3, h4, h5 {
margin-left: 25px;
}
h1 {
font-size: 130%;
margin: 2em 0 0 10px;
padding: 0 3px 0 3px;
border-top: 1px solid;
background-color: #e5ecf9;
border-color: #3366CC;
}
h2 {
font-size: 120%;
margin-top: 1.5em;
border-bottom: 1px solid;
border-color: #3366CC;
}
h3 {
font-size: 110%;
margin-top: 0.7em;
position: relative;
left: 0;
top: 0.7em;
z-index: 5; /*to avoid falling behind other elements due to lowered position*/
}
h4 {
margin-top: .5em;
font-size: 100%;
font-weight: bold;
position: relative;
left: 0;
top: 0.8em;
z-index: 5; /*to avoid falling behind other elements due to lowered position*/
}
h5 {
margin-top: 0.4em;
font-size: 100%;
font-weight: 100;
font-style: italic;
text-decoration: underline;
position: relative;
left: 0;
top: 0.8em;
z-index: 5; /*to avoid falling behind other elements due to lowered position*/
}
p {
margin: 1em 0 0 25px;
padding: 0;
}
table {
border: 1px solid;
border-color: #3366CC;
border-spacing:0;
margin: 1em 0 0 26px;
border-collapse: collapse;
clear: right;
}
pre {
margin-left: 2em;
}
ol, ul {
margin-left: 2em;
}
</style>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12846745-20']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' === document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<h1>MarkerClusterer for Google Maps v3</h1>
<p>
The library creates and manages per-zoom-level clusters for large amounts of
markers.
<br/>
This is a v3 implementation of the
<a href="http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/">v2 MarkerClusterer</a>.</p>
<p>For a description and examples of how to use this library, check out the <a href="examples.html">how-to</a>.</p>
<h2><a name="MarkerClusterer"></a>class MarkerClusterer</h2>
<p> This class extends <code>google.maps.OverlayView</code>.</p>
<h3>Constructor</h3>
<table summary="class MarkerClusterer - Constructor" width="90%">
<tbody>
<tr>
<th>Constructor</th>
<th>Description</th>
</tr>
<tr class="odd">
<td><code>MarkerClusterer(<span class="type">map:google.maps.Map</span>, <span class="type">opt_markers:Array.<google.maps.Marker></span>, <span class="type">opt_options:Object</span>)</code></td>
<td>A Marker Clusterer that clusters markers.</td>
</tr>
</tbody>
</table>
<h3>Methods</h3>
<table summary="class MarkerClusterer - Methods" width="90%">
<tbody>
<tr>
<th>Methods</th>
<th>Return Value</th>
<th>Description</th>
</tr>
<tr class="odd">
<td><code>addMarker(<span class="type">marker:google.maps.Marker</span>, <span class="type">opt_nodraw:boolean</span>)</code></td>
<td><code>None</code></td>
<td>Adds a marker to the clusterer and redraws if needed.</td>
</tr>
<tr class="even">
<td><code>addMarkers(<span class="type">markers:Array.<google.maps.Marker></span>, <span class="type">opt_nodraw:boolean</span>)</code></td>
<td><code>None</code></td>
<td>Adds an array of markers to the clusterer.</td>
</tr>
<tr class="odd">
<td><code>clearMarkers()</code></td>
<td><code>None</code></td>
<td>Clears all clusters and markers from the clusterer.</td>
</tr>
<tr class="even">
<td><code>getCalculator()</code></td>
<td><code>function(Array|number)</code></td>
<td>Gets the calculator function.</td>
</tr>
<tr class="odd">
<td><code>getExtendedBounds(<span class="type">bounds:google.maps.LatLngBounds</span>)</code></td>
<td><code>google.maps.LatLngBounds</code></td>
<td>Extends a bounds object by the grid size.</td>
</tr>
<tr class="even">
<td><code>getGridSize()</code></td>
<td><code>number</code></td>
<td>Gets the size of the grid.</td>
</tr>
<tr class="odd">
<td><code>getMap()</code></td>
<td><code>google.maps.Map</code></td>
<td>Gets the google map that the clusterer is associated with.</td>
</tr>
<tr class="even">
<td><code>getMarkers()</code></td>
<td><code>Array.<google.maps.Marker></code></td>
<td>Gets the array of markers in the clusterer.</td>
</tr>
<tr class="odd">
<td><code>getMaxZoom()</code></td>
<td><code>number</code></td>
<td>Gets the max zoom for the clusterer.</td>
</tr>
<tr class="even">
<td><code>getStyles()</code></td>
<td><code>Object</code></td>
<td>Gets the styles.</td>
</tr>
<tr class="odd">
<td><code>getTotalClusters()</code></td>
<td><code>number</code></td>
<td>Gets the number of clusters in the clusterer.</td>
</tr>
<tr class="even">
<td><code>getTotalMarkers()</code></td>
<td><code>Array.<google.maps.Marker></code></td>
<td>Gets the array of markers in the clusterer.</td>
</tr>
<tr class="odd">
<td><code>isZoomOnClick()</code></td>
<td><code>boolean</code></td>
<td>Whether zoom on click is set.</td>
</tr>
<tr class="even">
<td><code>redraw()</code></td>
<td><code>None</code></td>
<td>Redraws the clusters.</td>
</tr>
<tr class="odd">
<td><code>removeMarker(<span class="type">marker:google.maps.Marker</span>)</code></td>
<td><code>boolean</code></td>
<td>Removes a marker from the cluster.</td>
</tr>
<tr class="even">
<td><code>resetViewport()</code></td>
<td><code>None</code></td>
<td>Clears all existing clusters and recreates them.</td>
</tr>
<tr class="odd">
<td><code>setCalculator(<span class="type">calculator:function(Array|number)</span>)</code></td>
<td><code>None</code></td>
<td>Sets the calculator function.</td>
</tr>
<tr class="even">
<td><code>setGridSize(<span class="type">size:number</span>)</code></td>
<td><code>None</code></td>
<td>Sets the size of the grid.</td>
</tr>
<tr class="odd">
<td><code>setMap(<span class="type">map:google.maps.Map</span>)</code></td>
<td><code>None</code></td>
<td>Sets the google map that the clusterer is associated with.</td>
</tr>
<tr class="even">
<td><code>setMaxZoom(<span class="type">maxZoom:number</span>)</code></td>
<td><code>None</code></td>
<td>Sets the max zoom for the clusterer.</td>
</tr>
<tr class="odd">
<td><code>setStyles(<span class="type">styles:Object</span>)</code></td>
<td><code>None</code></td>
<td>Sets the styles.</td>
</tr>
</tbody>
</table>
</body>
</html>