Просмотр архива CIFullCalendar v3


<?php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>MarkerCluster for v3 Documentation: Examples</title>

    <link rel="stylesheet" type="text/css" href="http://code.google.com/css/codesite.css"></link>

    <script type="text/javascript" src="http://code.google.com/js/prettify.js"></script>

  </head>



  <body onload="prettyPrint()">

    <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>

?>