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