SHARE
TWEET

Django Tracker HTML Template

a guest Mar 23rd, 2012 20 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  5.   <title>Google Maps Multiple Markers</title>
  6.   <script src="http://maps.google.com/maps/api/js?sensor=false"
  7.          type="text/javascript"></script>
  8. </head>
  9. <body>
  10.   <div id="map" style="width: 1024px; height: 600px;"></div>
  11.  
  12.   <script type="text/javascript">
  13.     var locations = [
  14.       {% for l in locations %}
  15.       ['{{ l.date }}', {{ l.latitude}}, {{ l.longitude}}, {{ l.id }}],
  16.       {% endfor %}
  17.     ];
  18.  
  19.     var map = new google.maps.Map(document.getElementById('map'), {
  20.       zoom: 12,
  21.       center: new google.maps.LatLng({{centerLA}}, {{centerLO}}),
  22.       mapTypeId: google.maps.MapTypeId.ROADMAP
  23.     });
  24.  
  25.     var infowindow = new google.maps.InfoWindow();
  26.  
  27.     var marker, i;
  28.  
  29.     for (i = 0; i < locations.length; i++) {  
  30.      marker = new google.maps.Marker({
  31.        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  32.        map: map
  33.      });
  34.  
  35.      google.maps.event.addListener(marker, 'click', (function(marker, i) {
  36.        return function() {
  37.          infowindow.setContent(locations[i][0]);
  38.          infowindow.open(map, marker);
  39.        }
  40.      })(marker, i));
  41.    }
  42.  </script>
  43. </body>
  44. </html>
RAW Paste Data
Want to get better at HTML?
Learn to code HTML in 2017
Pastebin PRO Summer Special!
Get 40% OFF on Pastebin PRO accounts!
Top