Tom Huang / test

Blame view

docs/examples.html 4.04 KB
edit raw normal view history
dbaadcdd8   Tom Huang   Signed-off-by: To... 
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 &lt; 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>