CAM2RetrieveData/cameras.html at master · PurdueCAM2Project/CAM2RetrieveData · GitHub

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
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CAM2 With MarkerClusterer</title>
    <style >
      body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }
      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 600px;
      }
      #map {
        width: 600px;
        height: 400px;
      }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js?KEY=AIzaSyDRb6HaVtHDbpHkJq8a3MEODFZlmkBt7f4"></script>
    <script src="data/cameras.json"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>
    <script>
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var markers = [];
        for (var i = 0; i < 72600; i++) {
          var camera = cameras.cameras[i];
          var latLng = new google.maps.LatLng(camera.latitude,
              camera.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'});
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  <body>
    <h3>A simple example of MarkerClusterer (100 markers)</h3>
    <div id="map-container"><div id="map"></div></div>
  </body>
</html>