<?php
session_start();
?>
<style type="text/css">
#table-a
{ font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
width: 447px;
text-align: left;
border-collapse: collapse;
}
#table-a th
{ font-size: 12px;
font-weight: normal;
padding: 8px;
background: #b9c9fe;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff;
color: #039;
}
#table-a td
{ padding: 8px;
background: #e8edff;
border-bottom: 1px solid #fff;
color: #000;
border-top: 1px solid transparent;
}
#table-a tr:hover td
{ background: #d0dafd;
color: #339;
}
</style>

<!DOCTYPE html >
 <head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

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

   <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBA5GVUBNU27Lw461qt7XaKufe3EyLPxbY"></script>
   <script type="text/javascript">
   //<![CDATA[
   var customIcons = {
     'PDAOnlineS4': {
       icon: 'images/icons/PDAOnlineS4.png'
     },
     'PDAOnlineS3': {
       icon: 'images/icons/PDAOnlineS3.png'
     },
     'PDAOnlineS2': {
       icon: 'images/icons/PDAOnlineS2.png'
     },
     'PDAOnlineS1': {
       icon: 'images/icons/PDAOnlineS1.png'
     },
     'PCHOnlineS3': {
       icon: 'images/icons/PCHOnlineS3.png'
     },
     'PCHOnlineS2': {
       icon: 'images/icons/PCHOnlineS2.png'
     },
     'PCHOnlineS1': {
       icon: 'images/icons/PCHOnlineS1.png'
     },
     'Offline': {
       icon: 'images/icon_offline.png'
     }
   };


   function load() {
	var newLat = <?php echo $_SESSION['lat'];?>;
	var newLng = <?php echo $_SESSION['lng'];?>;

     var map = new google.maps.Map(document.getElementById("map"), {
//       center: new google.maps.LatLng(-6.121435, 106.774124), //batas indonesia
       center: new google.maps.LatLng(parseFloat(newLat),parseFloat(newLng)), //batas indonesia
/*       center: new google.maps.LatLng(-6.211544, 106.845172),*/
       zoom: 10,
       mapTypeId: 'roadmap'
     });
     var infoWindow = new google.maps.InfoWindow;

     // Rubah nama ini sesuai sengan script php yg menghasilkan script XML
     downloadUrl("includes/map2.php", function(data) {
       var xml = data.responseXML;
       var markers = xml.documentElement.getElementsByTagName("marker");
       for (var i = 0; i < markers.length; i++) {
         var nama_lokasi = markers[i].getAttribute("nama_lokasi");
         var id_tipe = markers[i].getAttribute("id_tipe");
         var lat = markers[i].getAttribute("lat");
         var lng = markers[i].getAttribute("lng");
         var tgl = markers[i].getAttribute("ReceivedDate");
         var jam = markers[i].getAttribute("ReceivedTime");
         var img = markers[i].getAttribute("img");
         var sts = markers[i].getAttribute("sts");
         var icon = markers[i].getAttribute("icon");
         var WLevel = markers[i].getAttribute("WLevel");
         var Rain = markers[i].getAttribute("Rain");
         var foto_lokasi = markers[i].getAttribute("foto_lokasi");
         var point = new google.maps.LatLng(
             parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
         
      var 	html ="<table id='table-a'>";
			html +="<tr>";
			html +="<td colspan='4' align='center' valign='middle'><img src='gambarpos/"+foto_lokasi+"' hight='180px' width='180px'></td>";
			html +="</tr>";
			html +="<tr>";
			html +="<td bgcolor='#333333'><img src='images/"+img+"' hight='15px' width='15px'><font color='#000'>NAMA LOKASI : </font></td>";
			html +="<td colspan='3'>: <a href='?page=detaildcu&dcusn="+nama_lokasi+"'><font color='#000'>"+nama_lokasi+"</font></a></td>";
			html +="</tr>";
			html +="<tr>";
			html +="<td style='background-image:url(images/iconsiaga3.png); background-repeat:no-repeat; padding-left:30px;'><font color='#000'>LAST UPDATE</font></td>";
			html +="<td colspan='3'>: "+tgl+" / "+jam+"</td>";
			html +="</tr>";
			html +="<tr>";
			html +="<td style='background-image:url(images/iconsiaga3.png); background-repeat:no-repeat; padding-left:30px;'><font color='#000'>Value</font></td>";
			html +="<td colspan='3'>: TMA : "+WLevel+"; CH : "+Rain+"</td>";
			html +="</tr>";
			html +="<tr>";
			html +="<td style='background-image:url(images/iconsiaga3.png); background-repeat:no-repeat; padding-left:30px;'><font color='#000'>Koordinat</font></td>";
			html +="<td>: "+lat+"</td>";
			html +="<td><font color='#000'>,</font></td>";
			html +="<td>"+lng+"</td>";
			html +="</tr>";
			html +="<tr style='border-top:#4eb25c 2px solid;'>";
			html +="<td style='background-image:url(images/iconsiaga3.png); background-repeat:no-repeat; padding-left:30px;'>Elevasi</td>";
			html +="<td colspan='3'>: 50 cm</td>";
			html +="</tr>";
			html +="<tr style='border-top:#4eb25c 2px solid;'>";
			html +="<td style='background-image:url(images/iconsiaga3.png); background-repeat:no-repeat; padding-left:30px;'>Status POS </td>";
			html +="<td colspan='3'>: "+sts+"</td>";
			html +="</tr>";
			html +="<tr>";
			html +="<td colspan='4' align='right'><a href=#><font color='#00F'>Detail Hasil Ukur</font></a> | <a href=#><font color='#00F'>Grafik</font></a></font></td>";
			html +="</tr>";
			html +="</table>";			

         var icon = customIcons[sts] || {};
         var marker = new google.maps.Marker({
           map: map,
           position: point,
           icon: icon.icon,
           shadow: icon.shadow
         });
         bindInfoWindow(marker, map, infoWindow, html);

       }
     });
   }
   function bindInfoWindow(marker, map, infoWindow, html) {
     google.maps.event.addListener(marker, 'click', function() {
       infoWindow.setContent(html);
       infoWindow.open(map, marker);
     });
   }
   function downloadUrl(url, callback) {
     var request = window.ActiveXObject ?
         new ActiveXObject('Microsoft.XMLHTTP') :
         new XMLHttpRequest;
     request.onreadystatechange = function() {
       if (request.readyState == 4) {
         request.onreadystatechange = doNothing;
         callback(request, request.status);
       }
     };
     request.open('GET', url, true);
     request.send(null);
   }
   function doNothing() {}
   //]]>
 </script>
 </head>
</html> 