<?php
$style='[
    {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
            {
                "color": "#f2f2f2"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "poi.park",
        "elementType": "geometry",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#bbd983"
            }
        ]
    },
    {
        "featureType": "poi.park",
        "elementType": "labels.text",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "all",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 45
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#056385"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#0795b9"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#0795b9"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#bbd983"
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#bbd983"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#b6c895"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "color": "#46bcec"
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#11acd5"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#ffffff"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    }
]
';


$sqlBBWS = "SELECT * FROM m_bbws WHERE 1=1 AND id_bbws=".$_SESSION['id_bbws']." ";
$queryBBWS = mysql_query($sqlBBWS);
$rowBBWS = mysql_fetch_array($queryBBWS);
//var_dump($rowBBWS);
?>
<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="https://maps.googleapis.com/maps/api/js?key=AIzaSyBA5GVUBNU27Lw461qt7XaKufe3EyLPxbY"></script>

   <script type="text/javascript">

   //<![CDATA[

   var customIcons = {

     'PDAOnlineS4': {

       icon: 'images/sungaisiaga21.png'

     },

     'PDAOnlineS3': {

       icon: 'images/sungaisiaga41.png'

     },

     'PDAOnlineS2': {

       icon: 'images/sungaisiaga31.png'

     },

     'PDAOnlineS1': {

       icon: 'images/sungaisiaga11.png'

     },

     'cerah': {

       icon: 'images/cerah.png'

     },

     'ringan': {

       icon: 'images/ringan.png'

     },

     'lebat': {

       icon: 'images/lebat.png'

     },

     'sangat lebat': {

       icon: 'images/sangatlebat.png'

     },

     'Offline': {

       icon: 'assets/icon_offline.png'

     }

   };





   function load() {

     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(<?php echo $rowBBWS['lat']; ?>, <?php echo $rowBBWS['lng']; ?>),

       zoom: 10,

       mapTypeId: 'roadmap',

	    styles: <?php echo $style; ?>

     });

     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 nama_lokasi_2 = markers[i].getAttribute("nama_lokasi_2");
         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 nama_pengamat = markers[i].getAttribute("nama_pengamat");
         var foto_lokasi = markers[i].getAttribute("foto_lokasi");
         var nama_das = markers[i].getAttribute("nama_das");
         var nama_alat = markers[i].getAttribute("nama_alat");
         var ws = markers[i].getAttribute("ws");
         var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));

         var html = '';
         html += '<table style="width:100%;">';
         html += '<tr>';
         html += '<td style="padding-right:10px;"><img src="<?php echo BASEURL; ?>cctv/default_cctv.png" width="160px;" /></td>';
         html += '<td style="vertical-align:top;"><table>';
         html += '<tr><td style="width:90px;">Lokasi</td><td style="width:10px;">:</td><td style="padding-right:10px;">'+nama_lokasi_2+'</td></tr>';
         html += '<tr><td>Sungai</td><td>:</td><td>'+nama_das+'</td></tr>';
         html += '<tr><td>Pengamat</td><td>:</td><td>'+nama_pengamat+'</td></tr>';
         html += '<tr><td>Last Update</td><td>:</td><td>'+tgl+', '+jam+'</td></tr>';
         html += '<tr><td>Jenis Alat</td><td>:</td><td>Pos Duga Air</td></tr>';
         html += '<tr><td>Pengukuran</td><td>:</td><td>123 cm</td></tr>';
         html += '<tr><td colspan="3">&nbsp;</td></tr>';
         html += '<tr><td colspan="3"><a href="index.php?page=detukur&location='+nama_lokasi+'">Lihat Detail</a></td></tr>';
         html += '</table></td>';
         html += '</tr>';
         html += '</table>';
         /*
      var 	html ="<table class='table-a'>";
			html +="<tr>";
			html +="<td colspan='2' align='center' valign='middle'><img src='http://sdatelemetry.com/gambarpos/"+foto_lokasi+"' hight='100px' width='150px'></td>";
			html +="</tr>";
			html +="<tr>";
			html +="<td>Lokasi : </td>";
			html +="<td>: "+nama_alat+"</td>";
			html +="</tr>";
			html +="<tr>";
			html +="<td>Sungai </td>";
				html +="<td>: "+ws+"</td>";
			html +="</tr>";
			html +="<tr>";
			html +="<td>Tanggal</td>";
				html +="<td>: "+tgl+"</td>";
			html +="</tr>";
			html +="<tr>";
			html +="<td>Jam</td>";
				html +="<td>: "+jam+"</td>";
			html +="</tr>";
			html +="<tr>";
			if(id_tipe=='PDA'){
				html +="<td>TMA</td>";
				html +="<td >: "+WLevel+"</td>";
			} else if(id_tipe=='PCH'){
				html +="<td>Curah Hujan</td>";
				html +="<td >: "+Rain+"</td>";
			}
			html +="</tr>";
			html +="<tr>";
			html +="<td>Pengamat</td>";
				html +="<td>: "+nama_pengamat+"</font></td>";
			html +="</tr>";
			html +="<tr>";
			if(id_tipe=='PDA'){
				html +="<td colspan='2' align='left'><a href='index.php?page=detukur&location="+nama_lokasi+"'><font color='#00F'>LIHAT DATA</font></a></td>";
			} else if(id_tipe=='PCH'){
				html +="<td colspan='2' align='left'><a href='index.php?page=detukurch&location="+nama_lokasi+"'><font color='#00F'>LIHAT DATA</font></a></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> 