MASIGNASUKAv101
4551133496077351792

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

Cara Membuat Marker Bisa di Drag atau di Pindahkan Pada Google Maps
Add Comments
Wednesday, 10 February 2016
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.
Hady Eka Saputra

Belajarlah ketika orang lain sedang malas-malasan, dan malas-malasan lah ketika orang sudah mulai sadar untuk belajar. :v