Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Die Google Maps JavaScript API aktivieren

Zum Einstieg führen wir Sie durch die Google Developers Console, wo Sie vorab Folgendes tun müssen:

  1. Ein Projekt erstellen oder auswählen
  2. Die Google Maps JavaScript API und zugehörige Dienste aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Drawing-Ebene (Bibliothek)

  1. Übersicht
  2. Bibliothek verwenden
  3. DrawingManager-Optionen
  4. Steuerelement der Zeichenwerkzeuge aktualisieren
  5. Drawing-Ereignisse

Übersicht

Die Klasse drawing bietet eine grafische Benutzeroberfläche zum Zeichnen von Polygonen, Rechtecken, Polylinien, Kreisen und Markern auf der Karte.

Bibliothek verwenden

Die Drawing Tools sind eine eigenständige Bibliothek, die unabhängig vom Maps API JavaScript-Hauptcode ist. Um die in dieser Bibliothek enthaltenen Funktionen nutzen zu können, müssen Sie die Bibliothek zunächst mithilfe des Parameters libraries in die Maps API Bootstrap-URL laden:

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

Sobald Sie den Parameter „libraries“ hinzugefügt haben, können Sie ein Objekt DrawingManager wie folgt erstellen:

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

DrawingManager-Optionen

Der Konstruktor DrawingManager verwendet eine Reihe von Optionen, mit denen die anzuzeigenden Steuerelemente, die Position der Steuerelemente sowie der anfängliche Zeichnungszustand definiert werden.

  • Mit der Eigenschaft drawingMode vom DrawingManager wird der anfängliche Zeichnungszustand vom DrawingManager definiert. Die Eigenschaft akzeptiert eine Konstante google.maps.drawing.OverlayType. Der Standardwert ist null; in diesem Fall befindet sich der Cursor bei DrawingManager-Initialisierung in einem Nicht-Zeichen-Modus.
  • Mit der Eigenschaft drawingControl vom DrawingManager wird festgelegt, ob die Oberfläche zur Auswahl der Zeichenwerkzeuge auf der Karte sichtbar ist. Die Eigenschaft akzeptiert einen Booleschen Wert.
  • Außerdem können Sie die Position des Steuerelements und die im Steuerelement darzustellenden Überlagerungstypen mithilfe der Eigenschaft drawingControlOptions vom DrawingManager definieren.
    • position definiert die Position des Zeichensteuerelementes auf der Karte und akzeptiert eine Konstante google.maps.ControlPosition.
    • drawingModes ist ein Array von Konstanten google.maps.drawing.OverlayType und definiert die Überlagerungstypen, die in der Formauswahl des Zeichensteuerelements enthalten sein sollen. Das Handsymbol ist immer vorhanden und ermöglicht den Benutzern die Interaktion mit der Karte, ohne zu zeichnen. Die Reihenfolge der Werkzeuge im Steuerelement entspricht der Reihenfolge, in der sie im Array deklariert werden.
  • Jedem Überlagerungstyp kann eine Reihe Standardeigenschaften zugeordnet werden, mit denen das Erscheinungsbild der Überlagerung beim ersten Erstellen definiert wird. Sie werden in der Eigenschaft {overlay}Options der Überlagerung definiert (wobei {overlay} für den Überlagerungstyp steht). Beispielsweise können die Fülleigenschaften, die Stricheigenschaften, der z-Index und die Klickbarkeit eines Kreises in der Eigenschaft circleOptions definiert werden. Wenn Werte zur Größe, zum Standort oder zur Karte übergeben werden, werden diese ignoriert. Umfassende Informationen zu den definierbaren Eigenschaften finden Sie in der API-Referenzdokumentation.

Hinweis: Damit eine Form nach dem Erstellen durch Benutzer bearbeitet werden kann ist die Eigenschaft editable auf true zu setzen.

// 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);
}

Beispiel anzeigen (drawing-tools.html).

Steuerelement der Zeichenwerkzeuge aktualisieren

Sobald Sie das Objekt DrawingManager angelegt haben, können Sie es aktualisieren, indem Sie setOptions() aufrufen und neue Werte übergeben.

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

So blenden Sie das Steuerelement der Zeichenwerkzeuge aus bzw. ein:

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

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

So entfernen Sie das Steuerelement der Zeichenwerkzeuge aus dem Objekt map:

drawingManager.setMap(null);

Ausblenden bedeutet, dass das Steuerelement der Zeichenwerkzeuge nicht angezeigt wird; es sind jedoch weiterhin alle Funktionen der Klasse DrawingManager verfügbar. Auf diese Weise können Sie bei Bedarf eigene Steuerelemente implementieren. Durch Entfernen von DrawingManager aus dem Objekt map werden alle Zeichenfunktionen deaktiviert; das Objekt muss mithilfe von drawingManager.setMap(map) erneut zur Karte hinzugefügt werden, oder Sie müssen ein neues Objekt DrawingManager konstruieren, um die Zeichenfunktionen wiederherzustellen.

Drawing-Ereignisse

Beim Erstellen einer Formüberlagerung werden zwei Ereignisse ausgelöst:

  • Ein Ereignis {overlay}complete (wobei {overlay} den Überlagerungstyp angibt, z. B. circlecomplete, polygoncomplete etc.). Ein Verweis auf die Überlagerung wird als Argument übergeben.
  • Ein Ereignis overlaycomplete. Ein Objektliteral mit OverlayType und ein Verweis auf die Überlagerung werden 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();
  }
});

Beachten Sie, dass Ereignisse vom Typ google.maps.Map, z. B. click und mousemove beim Zeichnen auf der Karte deaktiviert sind.

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API