Çizim Katmanı (Kitaplık)
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
- Genel Bakış
- Kitaplığı kullanma
- DrawingManager Seçenekleri
- Çizim Araçları Denetimini Güncelleme
- Çizim Etkinlikleri
Genel Bakış
DrawingManager sınıfı, kullanıcıların haritada poligon, dikdörtgen, çoklu çizgi, daire ve işaretçi çizebilmesi için grafik bir arayüz sağlar.
Kitaplığı kullanma
Çizim Araçları, ana Maps API JavaScript kodundan ayrı, kendi kendine yeten bir kitaplıktır. Bu kitaplıktaki işlevleri kullanmak için öncelikle Maps API önyükleme URL'sinde libraries parametresini kullanarak kitaplığı yüklemeniz gerekir:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=drawing&callback=initMap">
</script>
libraries parametresini ekledikten sonra aşağıdaki gibi bir DrawingManager objesi oluşturabilirsiniz:
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);
DrawingManager Seçenekleri
DrawingManager kurucusu, gösterilecek kontrol grubunu, kontrolün konumunu ve ilk çizim durumunu tanımlayan bir dizi seçenek alır.
DrawingManager nesnesinin drawingMode özelliği, DrawingManager nesnesinin ilk çizim durumunu tanımlar. google.maps.drawing.OverlayType sabit değerini kabul eder. Varsayılan değer null'tür. Bu durumda, DrawingManager başlatılırken imleç çizim dışı modda olur.DrawingManager öğesinin drawingControl mülkü, haritadaki çizim araçları seçim arayüzünün görünürlüğünü tanımlar. Boole değeri kabul eder.- Ayrıca,
DrawingManager öğesinin drawingControlOptions özelliğini kullanarak denetimin konumunu ve denetimde gösterilmesi gereken yer paylaşımı türlerini de tanımlayabilirsiniz.
position, çizim denetiminin haritadaki konumunu tanımlar ve google.maps.ControlPosition sabit değerini kabul eder.drawingModes, google.maps.drawing.OverlayType sabitlerinden oluşan bir dizidir ve çizim denetimi şekil seçicisine dahil edilecek yer paylaşımı türlerini tanımlar. El simgesi her zaman gösterilir. Böylece kullanıcı, çizim yapmadan harita üzerinde işlem yapabilir. Kontroldeki araçların sırası, dizi içinde tanımlandıkları sırayla eşleşir.
- Her yer paylaşımı türüne, ilk oluşturulduğunda yer paylaşımının görünümünü tanımlayan bir dizi varsayılan özellik atanabilir. Bunlar, yer paylaşımının
{overlay}Options mülkünde tanımlanır ({overlay}, yer paylaşımı türünü temsil eder). Örneğin, bir dairenin dolgu özellikleri, çizgi özellikleri, z-endeksi ve tıklanabilirliği circleOptions özelliğiyle tanımlanabilir. İletilen boyut, konum veya harita değerleri yoksayılır.
Hangi özelliklerin ayarlanabileceğiyle ilgili tüm ayrıntılar için API Referans dokümanlarına bakın.
Not: Bir şekli oluşturulduktan sonra kullanıcı tarafından düzenlenebilir hale getirmek için editable mülkünü true olarak ayarlayın.
DrawingManager nesnesi oluşturulduktan sonra setOptions()'u çağırıp yeni değerler ileterek nesneyi güncelleyebilirsiniz.
drawingManager.setOptions({
drawingControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT,
drawingModes: ['marker']
}
});
Çizim araçları kontrolünü gizlemek veya göstermek için:
// To hide:
drawingManager.setOptions({
drawingControl: false
});
// To show:
drawingManager.setOptions({
drawingControl: true
});
Çizim araçları denetimini map nesnesinden kaldırmak için:
drawingManager.setMap(null);
Çizim denetimini gizlemek, çizim araçları denetiminin gösterilmemesine neden olur ancak DrawingManager sınıfının tüm işlevleri kullanılabilir durumda kalır.
Bu sayede, dilerseniz kendi denetiminizi uygulayabilirsiniz. DrawingManager nesnesi map nesnesinden kaldırıldığında tüm çizim işlevleri devre dışı bırakılır. Çizim özelliklerinin geri yüklenmesini istiyorsanız DrawingManager nesnesi drawingManager.setMap(map) ile haritaya yeniden eklenmeli veya yeni bir DrawingManager nesnesi oluşturulmalıdır.
Çizim Etkinlikleri
Bir şekil yer paylaşımı oluşturulduğunda iki etkinlik tetiklenir:
- Bir
{overlay}complete etkinliği ({overlay}, yer paylaşımı türünü temsil eder; circlecomplete, polygoncomplete vb.). Yer paylaşımına referans bağımsız değişken olarak iletilir.
overlaycomplete etkinliği. OverlayType ve yer paylaşımına referans içeren bir nesne değişmezi bağımsız değişken olarak iletilir.
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();
}
});
Haritada çizim yaparken click ve mousemove gibi google.maps.Map etkinliklerinin devre dışı bırakıldığını unutmayın.
Aksi belirtilmediği sürece bu sayfanın içeriği Creative Commons Atıf 4.0 Lisansı altında ve kod örnekleri Apache 2.0 Lisansı altında lisanslanmıştır. Ayrıntılı bilgi için Google Developers Site Politikaları'na göz atın. Java, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-08-06 UTC.
[null,null,["Son güncelleme tarihi: 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."]]
