Layer (Pustaka) Gambar
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
- Ringkasan
- Menggunakan Library
- Opsi DrawingManager
- Mengupdate Kontrol Alat Gambar
- Peristiwa Menggambar
Ringkasan
Class DrawingManager menyediakan antarmuka grafis bagi pengguna untuk menggambar
poligon, persegi panjang, polyline, lingkaran, dan penanda pada peta.
Menggunakan Library
Alat Gambar adalah library mandiri, yang terpisah dari kode utama
Maps API JavaScript. Untuk menggunakan fungsi yang ada dalam library ini,
Anda harus memuatnya terlebih dahulu menggunakan parameter libraries di
URL bootstrap Maps API:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=drawing&callback=initMap">
</script>
Setelah menambahkan parameter library, Anda dapat membuat objek DrawingManager
sebagai berikut:
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);
Opsi DrawingManager
Konstruktor DrawingManager menggunakan sekumpulan opsi yang mendefinisikan seperangkat kontrol untuk menampilkan, posisi kontrol, dan status awal gambar.
- Properti
drawingMode dari DrawingManager menentukan status
gambar awal DrawingManager. Properti ini menerima konstanta google.maps.drawing.OverlayType. Defaultnya adalah null, dengan kursor berada dalam mode non-gambar
saat DrawingManager diinisialisasi.
- Properti
drawingControl dari DrawingManager menentukan
visibilitas antarmuka pemilihan alat gambar pada peta. Properti ini menerima nilai boolean.
- Anda juga dapat menentukan posisi kontrol, dan jenis
overlay yang harus ditampilkan dalam kontrol, menggunakan
properti
drawingControlOptions dari DrawingManager.
position menentukan posisi kontrol gambar pada peta, dan menerima konstanta google.maps.ControlPosition.drawingModes adalah array konstanta
google.maps.drawing.OverlayType, dan
menentukan jenis overlay yang akan disertakan dalam alat pilih bentuk kontrol
gambar. Ikon tangan akan selalu ada, yang memungkinkan pengguna berinteraksi dengan peta tanpa menggambar. Urutan alat dalam kontrol akan disesuaikan dengan urutannya dalam array.
- Setiap jenis overlay dapat diberikan satu kumpulan properti default, yang mendefinisikan penampilan overlay saat pertama kali dibuat. Properti default ini ditentukan dalam
properti
{overlay}Options overlay tersebut (dengan {overlay} mewakili
jenis overlay). Misalnya, properti pengisian lingkaran,
properti goresan, zIndex, dan kemampuan diklik dapat ditentukan dengan
properti circleOptions. Jika ukuran, lokasi, atau nilai peta diteruskan, semua itu akan diabaikan.
Untuk mengetahui detail selengkapnya tentang properti yang dapat ditetapkan,
lihat dokumentasi Referensi API.
Catatan: Untuk membuat bentuk yang dapat diedit pengguna
setelah dibuat, tetapkan properti editable-nya ke true.
Setelah objek DrawingManager dibuat, Anda dapat memperbaruinya dengan
memanggil setOptions() dan meneruskan nilai baru.
drawingManager.setOptions({
drawingControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT,
drawingModes: ['marker']
}
});
Untuk menyembunyikan atau menampilkan kontrol alat gambar:
// To hide:
drawingManager.setOptions({
drawingControl: false
});
// To show:
drawingManager.setOptions({
drawingControl: true
});
Untuk menghapus kontrol alat gambar dari objek map:
drawingManager.setMap(null);
Menyembunyikan kontrol gambar menyebabkan kontrol alat gambar tidak ditampilkan, tetapi semua fungsi class DrawingManager masih tersedia.
Dengan cara ini, Anda bisa mengimplementasikan kontrol sendiri, jika diinginkan. Menghapus
DrawingManager dari objek map akan menonaktifkan semua fungsi gambar; fungsi ini
harus disertakan kembali ke peta dengan drawingManager.setMap(map), atau objek
DrawingManager baru yang dibuat, jika fitur gambar ingin dipulihkan.
Peristiwa Menggambar
Jika overlay bentuk telah dibuat, dua peristiwa akan diaktifkan:
- Peristiwa
{overlay}complete (dengan {overlay} mewakili
jenis overlay, seperti circlecomplete, polygoncomplete, dll.). Referensi ke overlay diteruskan sebagai argumen.
- Peristiwa
overlaycomplete. Literal objek, yang 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 bahwa peristiwa google.maps.Map, seperti click dan mousemove dinonaktifkan saat menggambar pada peta.
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-08-06 UTC.
[null,null,["Terakhir diperbarui pada 2025-08-06 UTC."],[[["\u003cp\u003eThe \u003ccode\u003eDrawingManager\u003c/code\u003e class in the Google Maps JavaScript API enables users to draw shapes like polygons, circles, and markers directly on the map.\u003c/p\u003e\n"],["\u003cp\u003eTo utilize the Drawing Tools, include the \u003ccode\u003elibraries=drawing\u003c/code\u003e parameter in the Maps API bootstrap URL when loading the API.\u003c/p\u003e\n"],["\u003cp\u003eCustomize the drawing experience by configuring options like \u003ccode\u003edrawingMode\u003c/code\u003e, \u003ccode\u003edrawingControl\u003c/code\u003e, and shape-specific properties using the \u003ccode\u003eDrawingManager\u003c/code\u003e constructor and \u003ccode\u003esetOptions()\u003c/code\u003e method.\u003c/p\u003e\n"],["\u003cp\u003eDrawing events such as \u003ccode\u003e{overlay}complete\u003c/code\u003e and \u003ccode\u003eoverlaycomplete\u003c/code\u003e are triggered when shapes are created, providing access to the drawn overlay for further manipulation.\u003c/p\u003e\n"],["\u003cp\u003eWhile drawing is active, standard Google Maps events like \u003ccode\u003eclick\u003c/code\u003e and \u003ccode\u003emousemove\u003c/code\u003e are temporarily disabled on the map.\u003c/p\u003e\n"]]],[],null,["1. [Overview](#overview)\n2. [Using the Library](#using_the_library)\n3. [DrawingManager Options](#drawingmanager_options)\n4. [Updating the Drawing Tools Control](#updating_the_drawing_tools_control)\n5. [Drawing Events](#drawing_events)\n\nOverview\n\nThe `DrawingManager` class provides a graphical interface for users to draw\npolygons, rectangles, polylines, circles, and markers on the map.\n\nUsing the Library\n\nThe Drawing Tools are a self-contained library, separate from the main Maps\nAPI JavaScript code. To use the functionality contained within this library,\nyou must first load it using the [`libraries`](/maps/documentation/javascript/libraries) parameter in the\nMaps API bootstrap URL: \n\n```html\n\u003cscript async\n src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=drawing&callback=initMap\"\u003e\n\u003c/script\u003e\n```\n\nOnce you've added the libraries parameter, you can create a `DrawingManager`\nobject as follows: \n\n```javascript\nvar drawingManager = new google.maps.drawing.DrawingManager();\ndrawingManager.setMap(map);\n```\n\nDrawingManager Options\n\nThe `DrawingManager` constructor takes a set of options that define the set of\ncontrols to display, the position of the control, and the initial drawing\nstate.\n\n- The `drawingMode` property of the `DrawingManager` defines the initial drawing state of the DrawingManager. It accepts a [`google.maps.drawing.OverlayType`](/maps/documentation/javascript/reference#OverlayType) constant. Default is `null`, in which case the cursor is in a non-drawing mode when the DrawingManager is initialized.\n- The `drawingControl` property of the `DrawingManager` defines the visibility of the drawing tools selection interface on the map. It accepts a boolean value.\n- You can also define the position of the control, and the types of overlays that should be represented in the control, using the `drawingControlOptions` property of the `DrawingManager`.\n - `position` defines the position of the drawing control on the map, and accepts a [`google.maps.ControlPosition`](/maps/documentation/javascript/reference#ControlPosition) constant.\n - `drawingModes` is an array of [`google.maps.drawing.OverlayType`](/maps/documentation/javascript/reference#OverlayType) constants, and defines the overlay types to include in the drawing control shape picker. The hand icon will always be present, allowing the user to interact with the map without drawing. The order of the tools in the control will match the order in which they are declared in the array.\n- Each type of overlay can be assigned a set of default properties, that define the appearance of the overlay when first created. These are defined in that overlay's `{overlay}Options` property (where `{overlay}` represents the overlay type). For example, a circle's fill properties, stroke properties, zIndex, and clickability can be defined with the `circleOptions` property. If any size, location, or map values are passed, they are ignored. For full details of which properties can be set, refer to the [API Reference documentation](/maps/documentation/javascript/reference#DrawingManagerOptions).\n\n**Note:** To make a shape [user-editable](/maps/documentation/javascript/shapes#editable) after it has\nbeen created, set its `editable` property to `true`. \n\nTypeScript \n\n```typescript\n// This example requires the Drawing library. Include the libraries=drawing\n// parameter when you first load the API. For example:\n// \u003cscript src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing\"\u003e\n\nfunction initMap(): void {\n const map = new google.maps.Map(\n document.getElementById(\"map\") as HTMLElement,\n {\n center: { lat: -34.397, lng: 150.644 },\n zoom: 8,\n }\n );\n\n const drawingManager = new google.maps.drawing.DrawingManager({\n drawingMode: google.maps.drawing.OverlayType.MARKER,\n drawingControl: true,\n drawingControlOptions: {\n position: google.maps.ControlPosition.TOP_CENTER,\n drawingModes: [\n google.maps.drawing.OverlayType.MARKER,\n google.maps.drawing.OverlayType.CIRCLE,\n google.maps.drawing.OverlayType.POLYGON,\n google.maps.drawing.OverlayType.POLYLINE,\n google.maps.drawing.OverlayType.RECTANGLE,\n ],\n },\n markerOptions: {\n icon: \"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png\",\n },\n circleOptions: {\n fillColor: \"#ffff00\",\n fillOpacity: 1,\n strokeWeight: 5,\n clickable: false,\n editable: true,\n zIndex: 1,\n },\n });\n\n drawingManager.setMap(map);\n}\n\ndeclare global {\n interface Window {\n initMap: () =\u003e void;\n }\n}\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/drawing-tools/index.ts#L8-L55\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\n// This example requires the Drawing library. Include the libraries=drawing\n// parameter when you first load the API. For example:\n// \u003cscript src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing\"\u003e\nfunction initMap() {\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n center: { lat: -34.397, lng: 150.644 },\n zoom: 8,\n });\n const drawingManager = new google.maps.drawing.DrawingManager({\n drawingMode: google.maps.drawing.OverlayType.MARKER,\n drawingControl: true,\n drawingControlOptions: {\n position: google.maps.ControlPosition.TOP_CENTER,\n drawingModes: [\n google.maps.drawing.OverlayType.MARKER,\n google.maps.drawing.OverlayType.CIRCLE,\n google.maps.drawing.OverlayType.POLYGON,\n google.maps.drawing.OverlayType.POLYLINE,\n google.maps.drawing.OverlayType.RECTANGLE,\n ],\n },\n markerOptions: {\n icon: \"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png\",\n },\n circleOptions: {\n fillColor: \"#ffff00\",\n fillOpacity: 1,\n strokeWeight: 5,\n clickable: false,\n editable: true,\n zIndex: 1,\n },\n });\n\n drawingManager.setMap(map);\n}\n\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/drawing-tools/docs/index.js#L7-L44\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n[View example](/maps/documentation/javascript/examples/drawing-tools)\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/drawing-tools/jsfiddle) [Google Cloud Shell](https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https%3A%2F%2Fgithub.com%2Fgooglemaps%2Fjs-samples&cloudshell_git_branch=sample-drawing-tools&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=.)\n\nUpdating the Drawing Tools Control\n\nOnce the `DrawingManager` object has been created, you can update it by\ncalling `setOptions()` and passing new values. \n\n```javascript\ndrawingManager.setOptions({\n drawingControlOptions: {\n position: google.maps.ControlPosition.BOTTOM_LEFT,\n drawingModes: ['marker']\n }\n});\n```\n\nTo hide or show the drawing tools control: \n\n```javascript\n// To hide:\ndrawingManager.setOptions({\n drawingControl: false\n});\n\n// To show:\ndrawingManager.setOptions({\n drawingControl: true\n});\n```\n\nTo remove the drawing tools control from the `map` object: \n\n```javascript\ndrawingManager.setMap(null);\n```\n\n*Hiding* the drawing control causes the drawing tools control to not display,\nbut all of the functionality of the `DrawingManager` class is still available.\nIn this way, you can implement your own control, if desired. *Removing* the\n`DrawingManager` from the `map` object disables all drawing functionality; it\nmust be reattached to the map with `drawingManager.setMap(map)`, or a new\n`DrawingManager` object constructed, if drawing features are to be restored.\n\nDrawing Events\n\nWhen a shape overlay is created, two events are fired:\n\n- An `{overlay}complete` event (where `{overlay}` represents the overlay type, such as `circlecomplete`, `polygoncomplete`, etc). A reference to the overlay is passed as an argument.\n- An `overlaycomplete` event. An object literal, containing the `OverlayType` and a reference to the overlay, is passed as an argument.\n\n```javascript\ngoogle.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {\n var radius = circle.getRadius();\n});\n\ngoogle.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {\n if (event.type == 'circle') {\n var radius = event.overlay.getRadius();\n }\n});\n```\n\nNote that [`google.maps.Map`](/maps/documentation/javascript/reference#Map)\nevents, such as `click` and `mousemove` are disabled while drawing on the map."]]
