Drawing-Ebene (Bibliothek)
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
- Übersicht
- Bibliothek verwenden
- DrawingManager-Optionen
- Steuerelement der Zeichentools aktualisieren
- Drawing-Ereignisse
Übersicht
Die Klasse DrawingManager bietet Nutzern eine grafische Oberfläche zum Zeichnen von Polygonen, Rechtecken, Polylinien, Kreisen und Markierungen auf der Karte.
Bibliothek verwenden
Die Zeichentools sind eine eigenständige Bibliothek, die unabhängig vom JavaScript-Hauptcode für die Maps API ist. Damit Sie die Funktionen der Bibliothek nutzen können, müssen Sie sie zuerst mithilfe des libraries-Parameters in der Bootstrap-URL der Maps API laden:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=drawing&callback=initMap">
</script>
So erstellen Sie ein DrawingManager-Objekt, nachdem Sie den Parameter „libraries“ hinzugefügt haben:
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);
DrawingManager-Optionen
Für den DrawingManager-Konstruktor wird eine Reihe von Optionen angegeben, um festzulegen, welche Steuerelemente angezeigt werden sollen, und die Position der Steuerelemente und den anfänglichen Zeichenmodus zu definieren.
- Mit der Eigenschaft
drawingMode für den DrawingManager wird der anfängliche DrawingManager-Zeichnungszustand festgelegt. Für sie kann eine google.maps.drawing.OverlayType-Konstante angegeben werden. Der Standardwert ist null. In diesem Fall befindet sich der Cursor nicht im Zeichenmodus, wenn der DrawingManager initialisiert wird.
- Mit der Eigenschaft
drawingControl für den DrawingManager wird definiert, ob die Oberfläche zur Auswahl der Zeichentools auf der Karte angezeigt werden soll. Die Eigenschaft akzeptiert einen booleschen Wert.
- Mit der Eigenschaft
drawingControlOptions für den DrawingManager lassen sich die Position der Steuerelemente sowie die Overlay-Typen, die dort dargestellt werden sollen, definieren.
position definiert die Position der Zeichensteuerelemente auf der Karte. Der Wert kann eine google.maps.ControlPosition-Konstante sein.drawingModes ist ein Array von google.maps.drawing.OverlayType-Konstanten und definiert die Overlay-Typen, die in der Zeichensteuerelement-Formauswahl enthalten sein sollen. Das Handsymbol ist immer vorhanden. Es ermöglicht dem Nutzer, mit der Karte zu interagieren, ohne zu zeichnen. Die Reihenfolge der Tools in den Steuerelementen entspricht der Reihenfolge, in der sie im Array deklariert sind.
- Jedem Overlay-Typ kann eine Reihe von Standardeigenschaften zugewiesen werden, die die Darstellung des Overlays bei seiner Erstellung definieren. Sie werden in der
{overlay}Options-Eigenschaft des Overlays definiert, wobei {overlay} den Overlay-Typ repräsentiert. Die Füll- und Stricheigenschaften, der Z-Index und die Anklickbarkeit eines Kreises können zum Beispiel über die circleOptions-Eigenschaft definiert werden. Wenn Werte zur Größe, zum Standort oder zur Karte übergeben werden, werden diese ignoriert.
Umfassende Informationen dazu, welche Eigenschaften festgelegt werden können, finden Sie in der API-Referenzdokumentation.
Hinweis: Um eine Form nach ihrer Erstellung für Nutzer bearbeitbar zu machen, setzen Sie ihre editable-Eigenschaft auf true.
Nachdem das DrawingManager-Objekt erstellt wurde, können Sie es durch Aufrufen von setOptions() und Übergeben neuer Werte aktualisieren.
drawingManager.setOptions({
drawingControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT,
drawingModes: ['marker']
}
});
So blenden Sie das Zeichentools-Steuerelement aus oder ein:
// To hide:
drawingManager.setOptions({
drawingControl: false
});
// To show:
drawingManager.setOptions({
drawingControl: true
});
So entfernen Sie das Zeichentools-Steuerelement aus dem map-Objekt:
drawingManager.setMap(null);
Wenn das Zeichensteuerelement ausgeblendet wird, wird das Zeichentools-Steuerelement nicht angezeigt. Sämtliche Funktionen der DrawingManager-Klasse sind aber weiterhin verfügbar.
Auf diese Weise können Sie bei Bedarf eigene Steuerelemente implementieren. Wird der DrawingManager aus dem map-Objekt entfernt, werden alle Zeichenfunktionen deaktiviert. Um sie wiederherzustellen, muss er mit drawingManager.setMap(map) wieder zur Karte hinzugefügt werden oder es muss ein neues DrawingManager-Objekt erstellt werden.
Drawing-Ereignisse
Beim Erstellen eines Form-Overlays werden zwei Ereignisse ausgelöst:
- Ein
{overlay}complete-Ereignis, wobei {overlay} den Overlay-Typ (z. B. circlecomplete oder polygoncomplete) repräsentiert. Es wird ein Verweis auf das Overlay als Argument übergeben.
- Ein
overlaycomplete-Ereignis. Ein Objektliteral, das OverlayType sowie einen Verweis auf das Overlay enthält, wird als Argument übergeben.
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();
}
});
google.maps.Map-Ereignisse wie click und mousemove sind deaktiviert, während auf der Karte gezeichnet wird.
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2025-08-06 (UTC).
[null,null,["Zuletzt aktualisiert: 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."]]
