BLANTERORBITv102

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

    Rabu, 10 Februari 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.

    Terimakasih sudah berkesempatan untuk menimba ilmu dari blog JSC, semoga ilmu yang di share dapat bermanfaat. Jika ada pertanyaan mengenai ilmu yang terkait ataupun tidak, mari kita berdiskusi di dalam kolom komentar ini.

    Keep Learning and Keep Sharing