Cara Membuat Editable Shape Di Google Maps

Cara Membuat Editable Shape Di Google Maps - Kali ini kita akan membuat Editable Shapes di Google Maps, Editable Shapes adalah shape atau bentuk bangun datar yang dapat di ubah, dalam kasus ini adalah dapat di resize atau diubah ukurannya diperkecil dan di perbesar. Jika sebelumnya anda hanya dapat mengatur ukurannya langsung di script di sini kita dapat mengubah ukurannya dengan menarik sudut-sudut dari shapenya. Sebagai contoh pada kali ini kita menggunakan bentuk persegi. Untuk lebih jelasnya langsung saja 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 editable_map.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 Editable 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: 10,
   center: new google.maps.LatLng(-6.397809, 106.839022),
   mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
     mapOptions);
     
    var bounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(-6.397809, 106.839022),
     new google.maps.LatLng(-6.497809, 106.939022)
    );
     
    var rectangle = new google.maps.Rectangle({
   bounds: bounds,
   editable: true
    });
    
    rectangle.setMap(map);
  }

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

  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Menggambar Editable 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 :

var bounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(-6.397809, 106.839022),
     new google.maps.LatLng(-6.497809, 106.939022)
    );

Berbeda dengan segitiga yang menharuskan kita membuat jalur titk kordinat penggambarnya var bounds ini berisi kordinat batas dari persegi yang anda buat.

var rectangle = new google.maps.Rectangle({
   bounds: bounds,
   editable: true
    });

var rectangle ini berisi objek persegi yang kita buat, kita dapat mensetting objek persegi kita disini, dan yang membuat persegi ini dapat di ubah ukurannya adalah kita mensetting editable=true.

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 Shapes Circle Google Maps di sini : CEK TKP

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