Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps JavaScript API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps JavaScript API dan layanan terkait
  3. Buat kunci yang sesuai
Lanjutkan

Layer (Pustaka) Gambar

  1. Ringkasan
  2. Menggunakan Pustaka
  3. Opsi DrawingManager
  4. Memperbarui Kontrol Drawing Tools
  5. Kejadian Menggambar

Ringkasan

Kelas DrawingManager menyediakan antarmuka grafik bagi pengguna untuk menggambar poligon, persegi panjang, polyline, lingkaran, dan marker pada peta.

Menggunakan Pustaka

Drawing Tools adalah pustaka mandiri, terpisah dari kode utama Maps API JavaScript. Untuk menggunakan fungsionalitas yang ada dalam pustaka ini, terlebih dahulu Anda harus memuatnya menggunakan parameter libraries di URL bootstrap Maps API:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
</script>

Setelah menambahkan parameter libraries, Anda bisa membuat objek DrawingManager sebagai berikut:

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

Opsi DrawingManager

Konstruktor DrawingManager menggunakan satu set opsi yang mendefinisikan seperangkat kontrol untuk menampilkan, posisi kontrol, dan status awal gambar.

  • Properti drawingMode dari DrawingManager mendefinisikan status awal gambar dari DrawingManager. Properti ini menerima konstanta google.maps.drawing.OverlayType. Default-nya adalah null, dalam hal ini kursor berada pada mode non-gambar saat DrawingManager diinisialisasi.
  • Properti drawingControl dari DrawingManager mendefinisikan visibilitas antarmuka pemilihan alat menggambar pada peta. Properti ini menerima nilai boolean.
  • Anda juga bisa mendefinisikan posisi kontrol, dan tipe overlay yang harus dinyatakan dalam kontrol, dengan menggunakan properti drawingControlOptions dari DrawingManager.
    • position mendefinisikan posisi kontrol gambar pada peta, dan menerima konstanta google.maps.ControlPosition.
    • drawingModes adalah larik konstanta google.maps.drawing.OverlayType, dan mendefinisikan tipe overlay untuk disertakan pemilih bentuk kontrol gambar. Ikon tangan akan selalu ada, yang memungkinkan pengguna berinteraksi dengan peta tanpa menggambar. Urutan alat dalam kontrol akan menyesuaikan dengan urutan dideklarasikannya dalam larik.
  • Setiap tipe overlay bisa diberikan satu set properti default, yang mendefinisikan penampilan overlay saat pertama kali dibuat. Hal ini didefinisikan dalam properti {overlay}Options (di mana {overlay} merupakan tipe overlay). Misalnya, properti pengisi lingkaran, properti garis luar, zIndex, dan kemampuan klik bisa didefinisikan dengan properti circleOptions. Jika ukuran, lokasi, atau nilai peta diteruskan, semua itu akan diabaikan. Untuk detail lengkap tentang properti yang bisa diatur, lihat dokumentasi Referensi API.

Catatan: Untuk membuat bentuk yang bisa diedit pengguna setelah dibuat, atur properti editable ke true.

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=initMap"
     async defer></script>
// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}

Lihat contoh (drawing-tools.html)

Memperbarui Kontrol Drawing Tools

Setelah objek DrawingManager dibuat, Anda bisa memperbaruinya dengan memanggil setOptions() dan meneruskan nilai-nilai baru.

drawingManager.setOptions({
  drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: ['marker']
  }
});

Untuk menyembunyikan atau menampilkan kontrol alat menggambar:

// To hide:
drawingManager.setOptions({
  drawingControl: false
});

// To show:
drawingManager.setOptions({
  drawingControl: true
});

Untuk membuang kontrol alat menggambar dari objek map:

drawingManager.setMap(null);

Menyembunyikan kontrol gambar menyebabkan kontrol alat menggambar tidak ditampilkan, namun semua fungsionalitas kelas DrawingManager tetap tersedia. Dengan cara ini, Anda bisa mengimplementasikan kontrol sendiri, jika diinginkan. Menghilangkan DrawingManager dari objek map akan menonaktifkan semua fungsionalitas gambar; itu harus dihubungkan kembali ke peta dengan drawingManager.setMap(map), atau sebuah objek DrawingManager baru yang dibangun, jika ingin mengembalikan fitur gambar.

Kejadian Menggambar

Bila overlay bentuk telah dibuat, dua kejadian akan dipicu:

  • Kejadian {overlay}complete (di sini {overlay} menyatakan tipe overlay, seperti circlecomplete, polygoncomplete, dll). Referensi ke overlay diteruskan sebagai argumen.
  • Kejadian overlaycomplete. Literal objek berisi OverlayType dan referensi ke overlay, diteruskan sebagai argumen.
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  var radius = circle.getRadius();
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == 'circle') {
    var radius = event.overlay.getRadius();
  }
});

Perhatikan, kejadian google.maps.Map, seperti click dan mousemove dinonaktifkan saat menggambar di peta.

Kirim masukan tentang...

Google Maps JavaScript API
Google Maps JavaScript API
Butuh bantuan? Kunjungi halaman dukungan kami.