Cara Membuat Draggable Shape Di Google Maps

Cara Membuat Draggable Shape Di Google Maps - Draggable shape adalah shape atau bangun datar di google maps yang dapat anda geser atau pindahkan dengan cara drag and drop. Jika sebelumnya kita sudah membuat shape dapat di resize kali ini kita membuat shape dapat di pindahkan sesuka anda. Pada contoh kali ini kita akan membuat dua buah jenis shape yaitu segitiga dan persegi. untuk lebih jelasnya langsung saja kita ke prakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

HTML

Jika anda belum membuat folder Google_maps buatlah sebuah folder dengan nama Google_maps kemudian buat sebuah file HTML dengan nama draggable_shape.html kemudian masukan script :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Menggambar Draggable Shape di Google Maps</title>
    <style>
   html { height: 100% }
   #map-canvas { height: 400px;}
   *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .wrap {
   background: #f3f8fb;
   width:900px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
  .copy{
   margin-top: 20px;
   clear: both;
  }
  @media print {
   #map-canvas {
     height: 500px;
     margin: 0;
   }
    }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
  function initialize() {
   var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(-6.497809, 107.022),
    mapTypeId: google.maps.MapTypeId.TERRAIN
     };

     var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
      
   // [START region_blue_Rectangle]
     var blueCoords = new google.maps.LatLngBounds(
     new google.maps.LatLng(-6.397809, 106.839022),
     new google.maps.LatLng(-6.497809, 106.939022)
     );

   // [START region_red_triangle]
     var redCoords = [
    new google.maps.LatLng(-6.497809, 107.022),
    new google.maps.LatLng(-6.397809, 107.082),
    new google.maps.LatLng(-6.497809, 107.142)
     ];

     // Construct a draggable red triangle with geodesic set to true.
     new google.maps.Polygon({
    map: map,
    paths: redCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    draggable: true,
    geodesic: true
     });
     // [END region_red_triangle]

     // Construct a draggable blue rectangle with geodesic set to false.
     new google.maps.Rectangle({
    map: map,
    bounds: blueCoords,
    strokeColor: '#0000FF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000FF',
    fillOpacity: 0.35,
    draggable: true,
    geodesic: false
     });

  }

  google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Menggambar Draggable Shape di Google Maps</h1>
  <div id="map-canvas"></div>
  <p class='copy'>Copyright &copy <a href="http://jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
 </div> 
  </body>
</html>

Perhatikan baris kode berikut :

// [START region_blue_Rectangle]
var blueCoords = new google.maps.LatLngBounds(
 new google.maps.LatLng(-6.397809, 106.839022),
 new google.maps.LatLng(-6.497809, 106.939022)
);

// [START region_red_triangle]
var redCoords = [
 new google.maps.LatLng(-6.497809, 107.022),
 new google.maps.LatLng(-6.397809, 107.082),
 new google.maps.LatLng(-6.497809, 107.142)
];

var blueCoords berisi array kordinat bounds dari shape persegi.

var redCoords berisi array kordinat path dari shape segitiga.

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
 map: map,
 paths: redCoords,
 strokeColor: '#FF0000',
 strokeOpacity: 0.8,
 strokeWeight: 2,
 fillColor: '#FF0000',
 fillOpacity: 0.35,
 draggable: true,
 geodesic: true
});


// Construct a draggable blue rectangle with geodesic set to false.
new google.maps.Rectangle({
 map: map,
 bounds: blueCoords,
 strokeColor: '#0000FF',
 strokeOpacity: 0.8,
 strokeWeight: 2,
 fillColor: '#0000FF',
 fillOpacity: 0.35,
 draggable: true,
 geodesic: false
});

Yang atas digunakan untuk membuat objek shape segitiga baru di map dengan settingan draggable=true sehingga bisa di geser dan geodesic=true sehingga ketika di geser bentuk segitiga akan mengikuti bentuk geografis dari peta (karena segitiga disini kecil jadi ketika digeser tidak terlalu terlihat perubhannya, akan tetapi apabila segitiga ini besar akan terlihat lengkungan atau perubahan bentuk pada segitiganya)

Script di bawahnya digunakan untuk membuat objek shape persegi baru di map dengan settingan draggable=true sehingga bisa di geser dan geodesic=false sehingga ketia di geser bentuk shape akan tetap berbentuk persegi kemanapun anda menggesernya.

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Apabila masih ada yang binggung anda juga dapat membacanya dari refrensi langsung di dokumentasi Make a Shape Draggable Google Maps di sini : CEK TKP

Draggable Shape Di Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.