/markerclustererplus/examples/simple_example.html

https://github.com/ardakara/FriendMap · HTML · 77 lines · 69 code · 8 blank · 0 comment · 0 complexity · d917e9272a82d4e35cf0919b37a1da84 MD5 · raw file 

    

  1. <!DOCTYPE>
    2. 

  2. <html>
    3. 

  3.   <head>
    4. 

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

  5.     <title>MarkerClustererPlus V3 Example</title>
    6. 

  6. 

  7.     <style type="text/css">
    8. 

  8.       body {
    9. 

  9.         margin: 0;
    10. 

  10.         padding: 10px 20px 20px;
    11. 

  11.         font-family: Arial;
    12. 

  12.         font-size: 16px;
    13. 

  13.       }
    14. 

  14. 

  15.       #map-container {
    16. 

  16.         padding: 6px;
    17. 

  17.         border-width: 1px;
    18. 

  18.         border-style: solid;
    19. 

  19.         border-color: #ccc #ccc #999 #ccc;
    20. 

  20.         -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    21. 

  21.         -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    22. 

  22.         box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
    23. 

  23.         width: 600px;
    24. 

  24.       }
    25. 

  25. 

  26.       #map {
    27. 

  27.         width: 600px;
    28. 

  28.         height: 400px;
    29. 

  29.       }
    30. 

  30. 

  31.     </style>
    32. 

  32. 

  33.     <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
    34. 

  34.     <script type="text/javascript" src="../src/data.json"></script>
    35. 

  35.     <script type="text/javascript">
    36. 

  36.       var script = '<script type="text/javascript" src="../src/markerclusterer';
    37. 

  37.       if (document.location.search.indexOf('compiled') !== -1) {
    38. 

  38.         script += '_packed';
    39. 

  39.       }
    40. 

  40.       script += '.js"><' + '/script>';
    41. 

  41.       document.write(script);
    42. 

  42.     </script>
    43. 

  43. 

  44.     <script type="text/javascript">
    45. 

  45.       function initialize() {
    46. 

  46.         var center = new google.maps.LatLng(37.4419, -122.1419);
    47. 

  47. 

  48.         var map = new google.maps.Map(document.getElementById('map'), {
    49. 

  49.           zoom: 3,
    50. 

  50.           center: center,
    51. 

  51.           mapTypeId: google.maps.MapTypeId.ROADMAP
    52. 

  52.         });
    53. 

  53. 

  54.         var markers = [];
    55. 

  55.         for (var i = 0; i < 100; i++) {
    56. 

  56.           var dataPhoto = data.photos[i];
    57. 

  57.           var latLng = new google.maps.LatLng(dataPhoto.latitude,
    58. 

  58.               dataPhoto.longitude);
    59. 

  59.           var marker = new google.maps.Marker({
    60. 

  60.             position: latLng
    61. 

  61.           });
    62. 

  62.           markers.push(marker);
    63. 

  63.         }
    64. 

  64.         var markerCluster = new MarkerClusterer(map, markers);
    65. 

  65.       }
    66. 

  66.       google.maps.event.addDomListener(window, 'load', initialize);
    67. 

  67.     </script>
    68. 

  68.   </head>
    69. 

  69.   <body>
    70. 

  70.     <h3>A simple example of MarkerClustererPlus (100 markers)</h3>
    71. 

  71.     <p>
    72. 

  72.       <a href="?packed">Packed</a> |
    73. 

  73.       <a href="?">Standard</a> version of the script.
    74. 

  74.     </p>
    75. 

  75.     <div id="map-container"><div id="map"></div></div>
    76. 

  76.   </body>
    77. 

  77. </html>
    78.