<!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 = {
     'PDA': {
       icon: 'images/sungai.png'
     },
     'PCH': {
       icon: 'images/hujan.png'
     },
	 'KLIMAT': {
       icon: 'images/logo_klimatologi.png'
	 }
   };


   function load() {
     var map = new google.maps.Map(document.getElementById("map"), {
//       center: new google.maps.LatLng(-7.8008, 110.380643),
       center: new google.maps.LatLng(-6.211544, 106.845172),
       zoom: 11,
       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 point = new google.maps.LatLng(
             parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
         var html = "<b>" + nama_lokasi + "</b> <br/>" + id_tipe;
         var icon = customIcons[id_tipe] || {};
         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> 