New!
×Close

Notifications

Disqus Logo
MASIGNCLEAN104

Cara Membuat Marker Bisa di Drag atau di Pindahkan Pada Google Maps

Membuat marker dapat di drag merupakan suatu keuntungan. Terutama nantinya dalam mengambil data koordinat pada maps dan menampilkannya dalam sebuah textbox. Cukup mudah dalam membuat marker dapat di drag , yaitu dengan menambahkan fungsi : [code]draggable: true[/code] , berikut keseluruhan kode yang benar .
<!DOCTYPE html>
<html>
  <head>
  <title>Java Sc Developer - MAPS</title>
    <style type="text/css">
      html, body {
        width: 600px;
      height: 400px;
      margin: 0 auto ;
      padding: 0;
      }
      h1 {
        text-align: center;
        text-transform: uppercase;
      }
      p {
        text-align: center;
        font-size: 14px;
        text-transform: uppercase;
      }
      button {
        background-color: #1d98e0;
        text-align: center;
        color: #fff;
        padding: 8px;
        border-radius: 10px;
      }
      #map {
      height: 100%;
      }
    </style>
  </head>
    <script type="text/javascript">
    var map , penanda;
    var posisi = {lat:0.512574, lng:  101.448355};
function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,
          center: posisi
        });
        var penanda = new google.maps.Marker({
          position: posisi,
          map: map,
          draggable: true,
          title: 'Java Source Code'
        });
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={API KEY ANDA}&callback=initMap">
    </script>
  <body>
  <h1>Membuat Marker Bisa di Drag atau di Pindahkan Pada Google Maps</h1>
  <p>Java Source Code</p>
    <div id="map"></div>
</p>
  </body>
</html>

Penjelasan :
Pada baris 5 sampai 31 adalah style menggunakan css.
Pada baris 33 sampai 48 merupakan javascrip yang digunakan untuk menampilkan dan mengkostum google maps. Perhatikan pada baris 44 , dimana fungsi drag di letakan bernilai benar atau true.
Pada baris 54 adalah frame untuk menampilakn maps.
Share This :