<!-- page head start-->
<div class="page-head">
	<h3>
		Dashboard
	</h3>
	<span class="sub-title">Selamat Datang di Halaman Admin</span>
</div>
<!-- page head end-->
<!--body wrapper start-->

<div class="wrapper">
	<section class="panel">
		<header class="panel-heading">
			Peta Lokasi Pariwisata Laut Banda
		</header>
		<div class="panel-body">
			<div id="mapa"></div>
		</div>
	</section>
</div>
<script type="text/javascript">
	if (GBrowserIsCompatible())
	{
		map = new GMap2(document.getElementById("mapa"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl(3));
		map.setCenter( new GLatLng(-4.5407415, 129.8852402), 12,0);

		// Create a marker
		GDownloadUrl("phpsqlajax_genxml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var nama = markers[i].getAttribute("nama");
            var ikan = markers[i].getAttribute("ikan");
            var karang = markers[i].getAttribute("karang");
            var foto = markers[i].getAttribute("foto");
			
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, nama, ikan, karang, foto);
            map.addOverlay(marker);
          }
        });
	
	}
	 function createMarker(point, nama, ikan, karang, foto) {
      var marker = new GMarker(point);
      var html = "<b>" + nama + "</b> <br/> <b> Jenis Ikan : </b>" + ikan + "<br/> <b> Jenis Terumbu Karang : </b>" + karang + "</br>";
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
</script>
<!--body wrapper end-->