<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>IBS Map</title>
  
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAssH94kOodra9mncIoHPEWbySo4Np0V-w" type="text/javascript"></script>

	
	
    <link rel="stylesheet" type="text/css" href="css/layout.css">
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
	<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.css">
    <link rel="stylesheet" type="text/css" href="css/jquery_notification.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css"/>
    <link rel="stylesheet" type="text/css" href="css/jpaging.css">
    <link rel="stylesheet" type="text/css" href="css/ui.datepicker.css"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
    <script type='text/javascript' src='js/jquery.paginate.js'></script>
    <script type="text/javascript" src="js/ui.core.js"></script>
    <script type='text/javascript' src="js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="js/ui.datepicker.js"></script>
    <script type="text/javascript" src="js/jquery.PrintArea.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/clock.js"></script>
    <script type="text/javascript" src="js/jquery_notification_v.1.js"></script>
<script>
// variabel global marker
var marker;
function taruhMarker(peta, posisiTitik){
    // membuat Marker
    var marker = new google.maps.Marker({
        position: posisiTitik,
        map: peta
    });
	 document.getElementById("lat").value = posisiTitik.lat();
    document.getElementById("lng").value = posisiTitik.lng();
}
  
// function taruhMarker(peta, posisiTitik){
    
  //  if( marker ){
      // pindahkan marker
  //    marker.setPosition(posisiTitik);
  //  } else {
      // buat marker baru
  //    marker = new google.maps.Marker({
  //      position: posisiTitik,
  //      map: peta
  //    });
  //  }
  
     // isi nilai koordinat ke form
  //  document.getElementById("lat").value = posisiTitik.lat();
  //  document.getElementById("lng").value = posisiTitik.lng();
    
//}
  
function initialize() {
  var propertiPeta = {
    center:new google.maps.LatLng(-2.940783, 104.724832),
    zoom:12,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  
  var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
  
  // even listner ketika peta diklik
  google.maps.event.addListener(peta, 'click', function(event) {
    taruhMarker(this, event.latLng);
  });

}


// event jendela di-load  
google.maps.event.addDomListener(window, 'load', initialize);
  

</script>
  
</head>
<body>

  <div id="googleMap" style="width:100%;height:420px;"></div>
  
  <form action="simpanmap.php" method="post">
    <input style='width:100px' type="text" id="lat" name="lat" value="">
    <input style='width:100px' type="text" id="lng" name="lng" value="">
	<input style='width:100px' type="text" id="nama" name="nama" value="">
	<td align='center' >																							
		<button  type='submit' style='width:40px' ><i class='hover' ></i><b align='center' >OK</b></button>						
	</td>
  </form>
  
</body>
</html>
