1. <!DOCTYPE html >
  2.   <head>
  3.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  4.     <style type="text/css">
  5.       html { height: 100% }
  6.       body { height: 100%; margin: 0; padding: 0 }
  7.     </style>
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  9.     <title>Network Monitor</title>
  10.     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  11.     <script type="text/javascript">
  12.     //<![CDATA[
  13.  
  14.     var customIcons = {
  15.       1: {
  16.         icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
  17.         shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  18.       },
  19.       0: {
  20.         icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
  21.         shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  22.       }
  23.     };
  24.  
  25.    //global array to store our markers
  26.     var markersArray = [];
  27.  
  28.     function load() {
  29.         var map = new google.maps.Map(document.getElementById("map"), {
  30.             center : new google.maps.LatLng(37.80815648152641, 140.95355987548828),
  31.             zoom : 13,
  32.             mapTypeId : 'roadmap'
  33.         });
  34.         var infoWindow = new google.maps.InfoWindow;
  35.  
  36.         // your first call to get & process inital data
  37.  
  38.         downloadUrl("nwmxml.php", processXML(data));
  39.     }
  40.  
  41.     function processXML(data) {
  42.         var xml = data.responseXML;
  43.         var markers = xml.documentElement.getElementsByTagName("marker");
  44.         //clear markers before you start drawing new ones
  45.         resetMarkers(markersArray)
  46.         for(var i = 0; i < markers.length; i++) {
  47.             var host = markers[i].getAttribute("host");
  48.             var type = markers[i].getAttribute("active");
  49.             var lastupdate = markers[i].getAttribute("lastupdate");
  50.             var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
  51.             var html = "<b>" + "Host: </b>" + host + "<br>" + "<b>Last Updated: </b>" + lastupdate + "<br>";
  52.             var icon = customIcons[type] || {};
  53.             var marker = new google.maps.Marker({
  54.                 map : map,
  55.                 position : point,
  56.                 icon : icon.icon,
  57.                 shadow : icon.shadow
  58.             });
  59.             //store marker object in a new array
  60.             markersArray.push(marker);
  61.             bindInfoWindow(marker, map, infoWindow, html);
  62.  
  63.  
  64.         }
  65.             // set timeout after you finished processing & displaying the first lot of markers. Rember that requests on the server can take some time to complete. SO you want to make another one
  66.             // only when the first one is completed.
  67.             setTimeout(function() {
  68.                 downloadUrl("nwmxml.php", processXML(data));
  69.             }, 5000);
  70.     }
  71.  
  72. //clear existing markers from the map
  73. function resetMarkers(arr){
  74.     for (var i=0;i<arr.length; i++){
  75.         arr[i].setMap(null);
  76.     }
  77.     //reset the main marker array for the next call
  78.     arr=[];
  79. }
  80.     function bindInfoWindow(marker, map, infoWindow, html) {
  81.         google.maps.event.addListener(marker, 'click', function() {
  82.             infoWindow.setContent(html);
  83.             infoWindow.open(map, marker);
  84.         });
  85.     }
  86.  
  87.     function downloadUrl(url, callback) {
  88.         var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
  89.  
  90.         request.onreadystatechange = function() {
  91.             if(request.readyState == 4) {
  92.                 request.onreadystatechange = doNothing;
  93.                 callback(request, request.status);
  94.             }
  95.         };
  96.  
  97.         request.open('GET', url, true);
  98.         request.send(null);
  99.     }
  100.     function doNothing() {}
  101.    
  102.  
  103.     //]]>
  104.  
  105.   </script>
  106.  
  107.   </head>
  108.  
  109.   <body onload="load()">
  110.     <div id="map" style="width: 100%; height: 100%"></div>
  111.   </body>
  112.  
  113. </html>