Cara Membuat Drawing Tools Di Google Maps

Cara Membuat Drawing Tools Di Google Maps - Drawing tools di google maps adalah toolbar dengan kumpulan peralatan menggambar di maps seperti marker, line, polygon, circle dan rectangle. Jika sebelumnya kita membuatnya terpisah serta langsung menentukan lokasi dan ukurannya, disini kita bisa berkreasi sesuai keiinginan, kita dapat menggambar semua item tersebut di mana saja seperti di dalam paint. Untuk lebih jelasnya langsung saja kita ke programmya.

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 Siapkan sebuah gambar untuk markernya, ukuran jangan terlalu besar agar tidak menghalangi maps, bisa menggunakan ukuran 64x64px atau 32x32px simpan dalam folder Google_maps.

Sebagi contoh disini kami menggunakan gambar ini :

kemudian buat sebuah file HTML dengan nama drawing_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 Drawing Tools 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&libraries=drawing"></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 drawingManager = new google.maps.drawing.DrawingManager({
   drawingMode: google.maps.drawing.OverlayType.MARKER,
   drawingControl: true,
   drawingControlOptions: {
     position: google.maps.ControlPosition.TOP_CENTER,
     drawingModes: [
    google.maps.drawing.OverlayType.MARKER,
    google.maps.drawing.OverlayType.CIRCLE,
    google.maps.drawing.OverlayType.POLYGON,
    google.maps.drawing.OverlayType.POLYLINE,
    google.maps.drawing.OverlayType.RECTANGLE
     ]
   },
   markerOptions: {
     icon: 'flag_mark.png'
   },
   circleOptions: {
     fillColor: '#ffff00',
     fillOpacity: 1,
     strokeWeight: 5,
     clickable: false,
     editable: true,
     zIndex: 1
   }
    });
    drawingManager.setMap(map);

  }

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

  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Menggambar Drawing Tools 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 pada baris kode :

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing"></script>

Kita memanggil library drawing, library ini harus di load agar kita bisa menggunakan fitur dari drawing.

var drawingManager = new google.maps.drawing.DrawingManager({
   drawingMode: google.maps.drawing.OverlayType.MARKER,
   drawingControl: true,
   drawingControlOptions: {
     position: google.maps.ControlPosition.TOP_CENTER,
     drawingModes: [
    google.maps.drawing.OverlayType.MARKER,
    google.maps.drawing.OverlayType.CIRCLE,
    google.maps.drawing.OverlayType.POLYGON,
    google.maps.drawing.OverlayType.POLYLINE,
    google.maps.drawing.OverlayType.RECTANGLE
     ]
   },
   markerOptions: {
     icon: 'flag_mark.png'
   },
   circleOptions: {
     fillColor: '#ffff00',
     fillOpacity: 1,
     strokeWeight: 5,
     clickable: false,
     editable: true,
     zIndex: 1
   }
    });

var drawingManager ini berisi settingan dari drawing tools.

drawingMode adalah mode pertama yang di gunakan ketika mulai

drawingControllOption adalah settingan toolbar yang ada pada bagian atas map, disinilah kita menentukan tools apa saja yang ingin kita gunakan serta posisi dari toolbarnya

markerOptions ini berisi settingan marker yang kita gunakan disini kita menggunakan icon marker yang berasal dari gambar kita sebelumnya flag_marker.png

circleOptions berisi settingan tools circle gambar kita, seperti setingan warna, opacity, dll.

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 Drawing Layer Google Maps di sini : CEK TKP

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