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

Formen

Sie können verschiedenste Formen zu Ihrer Karte hinzufügen. Eine Form ist ein Objekt auf einer Karte, das an eine Längen- und Breitenkoordinate gebunden ist. Folgende Formen sind verfügbar: Linien, Polygone, Kreise und Rechtecke. Sie können Ihre Formen auch so konfigurieren, dass Benutzer sie bearbeiten oder ziehen können.

Polylinien

Um eine Linie auf Ihrer Karte zu zeichnen, verwenden Sie eine Polylinie. Mit der Klasse Polyline wird eine lineare Überlagerung verbundener Liniensegment auf der Karte definiert. Ein Objekt Polyline besteht aus einem Array mit Positionen LatLng; mit dem Objekt wird eine Gruppe von Liniensegmenten erstellt, die diese Positionen in einer geordneten Reihenfolge verbinden.

Polylinien hinzufügen

Der Konstruktor Polyline verwendet eine Reihe PolylineOptions, mit denen die Koordinaten LatLng der Linie angegeben werden, sowie verschiedene Formate zum Anpassen der Polyliniendarstellung.

Objekte vom Typ Polyline werden als gerade Liniensegmente auf der Karte gezeichnet. Sie können beim Erstellen Ihrer Linien benutzerdefinierte Farben, Strichstärken und Deckkraftwerte für die Linien in den PolylineOptions definieren, oder Sie können diese Eigenschaften nach der Erstellung ändern. Folgende Strichformate werden von Polylinien unterstützt:

  • strokeColor – eine hexadezimale HTML-Farbe mit dem Format"#FFFFFF". Benannte Farben werden von der Klasse Polyline nicht unterstützt.
  • Mit strokeOpacity wird ein numerischer Wert zwischen 0.0 und 1.0 angegeben, der die Deckkraft der Linienfarbe bestimmt. Der Standardwert ist 1.0.
  • Mit strokeWeight wird die Strichstärke der Linie in Pixeln angegeben.

Mit der Polylinieneigenschaft editable wird festgelegt, ob der Benutzer die Form bearbeiten kann. Siehe nachfolgenden Abschnitt Formen, die vom Benutzer bearbeitet werden können. Analog können Sie die Eigenschaft draggable setzen, sodass der Benutzer in der Lage ist, Linien zu ziehen.

// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

Beispiel anzeigen (polyline-simple.html).

Polylinien entfernen

Um eine Polylinien aus der Karte zu entfernen, rufen Sie die Methode setMap() auf, und übergeben Sie das Argument null. Im nachfolgenden Beispiel sehen Sie ein Polylinienobjekt flightPath:

flightPath.setMap(null);

Beachten Sie, dass die Polylinie mit der obigen Methode nicht gelöscht wird. Die Polylinie wird lediglich aus der Karte entfernt. Wenn Sie die Polylinie stattdessen löschen möchten, entfernen Sie die Linie aus der Karte, und setzen Sie anschließend die Polylinie selbst auf null.

Beispiel anzeigen (polyline-remove.html).

Polylinien prüfen

Mit einer Polylinie werden verschiedene Koordinaten als Array von Objekten LatLng definiert. Mit diesen Koordinaten wird die Länge der Linienführung bestimmt. Zum Abrufen der Koordinaten rufen Sie getPath() auf; das Ergebnis ist ein Array vom Typ MVCArray. Sie können den Array bearbeiten und prüfen, indem Sie folgende Vorgänge anwenden.

  • Mit getAt() wird der Wert LatLng an einem festgelegten nullbasierten Indexwert zurückgegeben.
  • Mit insertAt() wird ein übergebener Wert LatLng an einem festgelegten nullbasierten Indexwert eingefügt. Beachten Sie, dass jegliche vorhandenen Koordinaten an diesem Indexwert vorwärts verschoben werden.
  • Mit removeAt() wird LatLng an einem festgelegten nullbasierten Indexwert entfernt.
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: 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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}

Beispiel anzeigen (polyline-complex.html).

Polylinien anpassen

Sie können vektorbasierte Grafiken mit der Form von Symbolen zu einer Polylinie hinzufügen. Werden Symbole mit der Klasse PolylineOptions kombiniert, haben Sie umfassende Einflussmöglichkeiten auf das Erscheinungsbild der Polylinien auf Ihrer Karte. Im Abschnitt Symbole erhalten Sie Informationen zu Pfeilen, gestrichelten Linien, benutzerdefinierten Symbolen und animierten Symbolen.

Polygone

Ein Polygon stellt einen durch einen geschlossenen Pfad (oder Kreis) umrahmten Bereich dar, der durch eine Reihe von Koordinaten definiert ist. Objekte vom Typ Polygon ähneln Objekten vom Typ Polylinie dahingehend, dass sie ebenfalls aus einer Reihe von Koordinaten in einer bestimmten Reihenfolge bestehen. Polygone werden mit einem Strich und einem Füllbereich gezeichnet. Sie können benutzerdefinierte Farben, Strichstärken und Deckkraftwerte für den Rand des Polygons (den Strich) sowie benutzerdefinierte Farben und Deckkraftwerte für den eingeschlossenen Bereich (den Füllbereich) definieren. Farben müssen in einem hexadezimalen HTML-Format angegeben werden. Farbnamen werden nicht unterstützt.

Objekt vom Typ Polygon können komplexe Formen beschreiben, z. B.:

  • Mehrere nicht zusammenhängende Bereiche, die durch ein einzelnes Polygon definiert sind.
  • Bereiche, die „Löcher“ enthalten.
  • Überschneidungen in einem oder mehreren Bereichen.

Um eine komplexe Form zu definieren, verwenden Sie ein Polygon mit mehreren Pfaden.

Hinweis: Die Data-Ebene bietet eine einfache Möglichkeit zum Zeichnen von Polygonen. Sie übernimmt die Windung der Polygone für Sie und vereinfacht so das Zeichnen von Polygonen mit Löchern. Weitere Informationen finden Sie in der Dokumentation für die Data-Ebene.

Polygone hinzufügen

Da ein polygonaler Bereich mehrere separate Pfade umfassen kann, wird mit der Eigenschaft paths des Objekts Polygon ein Array von Arrays definiert, jeder einzelne vom Typ MVCArray. Mit jedem Array ist eine separate Folge sortierter Koordinaten LatLng definiert.

Bei einfachen Polygonen, die aus nur einem Pfad bestehen, können Sie ein Polygon konstruieren, indem Sie einen einzigen Array mit Koordinaten LatLng verwenden. Google Maps JavaScript API konvertiert den einfachen Array während der Erstellung in einen Array von Arrays, wenn dieser in der Eigenschaft paths gespeichert wird. Die API bietet eine einfache Methode getPath() für Polygone, die aus einem Pfad bestehen.

Mit der Polygoneigenschaft editable wird festgelegt, ob der Benutzer die Form bearbeiten kann. Siehe nachfolgenden Abschnitt Formen, die vom Benutzer bearbeitet werden können. Analog können Sie die Eigenschaft draggable setzen, sodass der Benutzer in der Lage ist, die Form zu ziehen.

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

Beispiel anzeigen (polygon-simple.html).

Autovervollständigen von Polygonen

Das Polygon im obenstehenden Beispiel besteht aus vier Koordinatensätzen LatLng; beachten Sie jedoch, dass der erste und der letzte Satz denselben Ort bezeichnen, um die Form zu schließen. Da Polygone geschlossene Bereiche definieren, ist es in der Praxis jedoch nicht erforderlich, diesen letzten Koordinatensatz zu definieren. Sämtliche Polygone werden durch Google Maps JavaScript API automatisch „geschlossen“; dazu wird für sämtliche angegebenen Pfade die letzte Position wiederum mit der ersten Position durch einen Strich verbunden.

Das nachfolgende Beispiel stimmt mit dem vorangehenden Beispiel überein; es wurde lediglich der letzte Wert LatLng ausgelassen: Beispiel anzeigen (polygon-autoclose.html).

Polygone entfernen

Um ein Polygon aus der Karte zu entfernen, rufen Sie die Methode setMap() auf, und übergeben Sie das Argument null. Im nachfolgenden Beispiel sehen Sie ein Polygonobjekt bermudaTriangle:

bermudaTriangle.setMap(null);

Beachten Sie, dass das Polygon mit der obigen Methode nicht gelöscht wird. Das Polygon wird lediglich aus der Karte entfernt. Wenn Sie das Polygon stattdessen löschen möchten, entfernen Sie es aus der Karte, und setzen Sie anschließend das Polygon selbst auf null.

Polygone prüfen

Für ein Polygon werden die Koordinatensätze als Array von Arrays angegeben, wobei jeder Array vom Typ MVCArray ist. Jeder „Blatt-Array“ ist ein Array mit Koordinaten LatLng, die einen einzigen Pfad definieren. Um diese Koordinaten abzurufen, rufen Sie die Methode getPaths() des Objekts Polygon auf. Da der Array vom Typ MVCArray ist, müssen Sie ihn mit folgenden Vorgängen bearbeiten und prüfen:

  • Mit getAt() wird der Wert LatLng an einem festgelegten nullbasierten Indexwert zurückgegeben.
  • Mit insertAt() wird ein übergebener Wert LatLng an einem festgelegten nullbasierten Indexwert eingefügt. Beachten Sie, dass jegliche vorhandenen Koordinaten an diesem Indexwert vorwärts verschoben werden.
  • Mit removeAt() wird LatLng an einem festgelegten nullbasierten Indexwert entfernt.
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

Beispiel anzeigen (polygon-arrays.html).

Loch in einem Polygon erstellen

Wenn Sie innerhalb eines Polygons einen leeren Bereich erstellen möchten, müssen Sie zwei Pfade erstellen, wobei der eine sich innerhalb des anderen befindet. Zum Erstellen des Lochs müssen die Koordinaten, die den inneren Pfad definieren, in umgekehrter Reihenfolge der Koordinaten vorliegen, die den äußeren Pfad definieren. Wenn die Koordinaten des äußeren Pfads beispielsweise im Uhrzeigersinn angegeben werden, müssen die des inneren Pfads gegen den Uhrzeigersinn angegeben werden.

Hinweis: Die Data-Ebene legt die Reihenfolge für die inneren und äußeren Pfade für Sie fest und vereinfacht so das Zeichnen von Polygonen mit Löchern. Weitere Informationen finden Sie in der Dokumentation für die Data-Ebene.

Im folgenden Beispiel wird ein Polygon mit zwei Pfaden gezeichnet, wobei sich der innere Pfad sich in die entgegengesetzte Richtung des äußeren Pfad windet.

// This example creates a triangular polygon with a hole in it.

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

  // Define the LatLng coordinates for the polygon's  outer path.
  var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  var innerCoords = [
    {lat: 28.745, lng: -70.579},
    {lat: 29.570, lng: -67.514},
    {lat: 27.339, lng: -66.668}
  ];

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates a triangular polygon with a hole in it.

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

  // Define the LatLng coordinates for the polygon's  outer path.
  var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  var innerCoords = [
    {lat: 28.745, lng: -70.579},
    {lat: 29.570, lng: -67.514},
    {lat: 27.339, lng: -66.668}
  ];

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

Beispiel anzeigen (polygon-hole.html).

Rechtecke

Zusätzlich zu einer allgemeinen Klasse Polygon umfasst Google Maps JavaScript API außerdem eine spezielle Klasse Rectangle, um das Konstruieren von Rechtecken zu erleichtern.

Rechtecke hinzufügen

Ein Rechteck (Rectangle) ähnelt einem Polygon dahingehend, dass Sie benutzerdefinierte Farben, Strichstärken und Deckkraftwerte für den Rahmen des Rechtecks (den Strich) sowie benutzerdefinierte Farben und Deckkraftwerte für den eingeschlossenen Bereich des Rechtecks (den Füllbereich) definieren können. Farben müssen in einem numerischen hexadezimalen HTML-Format angegeben werden.

Im Gegensatz zu Polygon definieren Sie keine Pfade (paths) für ein Rechteck (Rectangle). Stattdessen hat ein Rechteck eine Eigenschaft bounds, mit der die Form angegeben wird, indem die Grenzen (google.maps.LatLngBounds) für das Rechteck definiert werden.

Mit der Rechteckeigenschaft editable wird festgelegt, ob Benutzer die Form bearbeiten können. Siehe nachfolgenden Abschnitt Formen, die vom Benutzer bearbeitet werden können. Analog können Sie die Eigenschaft draggable setzen, sodass der Benutzer in der Lage ist, das Rechteck zu ziehen.

// This example adds a red rectangle to a map.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 33.678, lng: -116.243},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}
<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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example adds a red rectangle to a map.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 33.678, lng: -116.243},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}

Beispiel anzeigen (rectangle-simple.html).

Mit dem folgenden Code erstellen Sie jedes Mal ein Rechteck, wenn der Benutzer den Zoom auf der Karte ändert. Die Größe des Rechtecks wird durch den Viewport bestimmt.

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 40.748520, lng: -73.981687},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle();

  map.addListener('zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}
<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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 40.748520, lng: -73.981687},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle();

  map.addListener('zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}

Beispiel anzeigen (rectangle-zoom.html).

Rechtecke entfernen

Um ein Rechteck aus der Karte zu entfernen, rufen Sie die Methode setMap() auf, und übergeben Sie das Argument null.

rectangle.setMap(null);

Beachten Sie, dass das Rechteck mit der obigen Methode nicht gelöscht wird. Das Rechteck wird lediglich aus der Karte entfernt. Wenn Sie das Rechteck stattdessen löschen möchten, entfernen Sie es aus der Karte, und setzen Sie anschließend das Rechteck selbst auf null.

Kreise

Zusätzlich zur generischen Klasse Polygon bietet Google Maps JavaScript API eine spezielle Klasse für Objekte vom Typ Circle, um die Erstellung von Kreisen zu vereinfachen.

Kreise hinzufügen

Ein Kreis (Circle) ähnelt einem Polygon dahingehend, dass Sie benutzerdefinierte Farben, Strichstärken und Deckkraftwerte für den Rahmen des Kreises (den Strich) sowie benutzerdefinierte Farben und Deckkraftwerte für den eingeschlossenen Bereich des Kreises (den Füllbereich) definieren können. Farben müssen in einem numerischen hexadezimalen HTML-Format angegeben werden.

Im Gegensatz zu einem Polygon definieren Sie keine Pfade (paths) für einen Kreis (Circle). Stattdessen verfügt ein Kreis über zwei zusätzliche Eigenschaften, mit denen seine Form definiert wird:

  • Mit center werden die Koordinaten google.maps.LatLng in der Mitte des Kreises definiert.
  • Mit radius wird der Radius des Kreises in Metern angegeben.

Mit der Kreiseigenschaft editable wird festgelegt, ob Benutzer die Form bearbeiten können. Siehe nachfolgenden Abschnitt Formen, die vom Benutzer bearbeitet werden können. Analog können Sie die Eigenschaft draggable setzen, sodass der Benutzer in der Lage ist, den Kreis zu ziehen.

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: 'terrain'
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}
<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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: 'terrain'
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}

Beispiel anzeigen (circle-simple.html).

Kreise entfernen

Um einen Kreis aus der Karte zu entfernen, rufen Sie die Methode setMap() auf, und übergeben Sie das Argument null.

circle.setMap(null);

Beachten Sie, dass der Kreis mit der obigen Methode nicht gelöscht wird. Der Kreis wird lediglich aus der Karte entfernt. Wenn Sie den Kreis stattdessen löschen möchten, entfernen Sie ihn aus der Karte, und setzen Sie anschließend den Kreis selbst auf null.

Formen, die vom Benutzer bearbeitet und gezogen werden können

Um es Benutzern zu ermöglichen, eine Form zu bearbeiten, werden Ziehpunkte zur Form hinzugefügt, mit denen die Form direkt auf der Karte neu positioniert, umgeformt oder in der Größe verändert werden kann. Sie können auch einstellen, dass eine Form gezogen werden kann, damit der Benutzer sie an eine andere Position auf der Karte verschieben kann.

Vom Benutzer vorgenommene Änderungen am Objekt haben nur für die Dauer der jeweiligen Sitzung Gültigkeit. Wenn die Änderungen des Benutzers gespeichert werden sollen, müssen Sie diese Informationen selbst erfassen und hinterlegen.

Ermöglichen, dass eine Form bearbeitet werden kann

Jede Form (Polylinien, Polygone, Kreise und Rechtecke) kann so definiert werden, dass sie bearbeitet werden kann. Dazu setzen Sie die Eigenschaft editable in den Optionen der Form auf true.

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

Beispiel anzeigen (user-editable-shapes.html).

Ermöglichen, dass eine Form gezogen werden kann

Standardmäßig ist die Position einer auf der Karte gezeichneten Form nicht veränderbar. Um es Benutzern zu ermöglichen, eine Form an eine andere Position auf der Karte zu ziehen, setzen Sie die Eigenschaft draggable in den Optionen der Form auf true.

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

Wenn Sie das Ziehen von Polygonen oder Polylinien ermöglichen, erwägen Sie außerdem, das Polygon oder die Polylinie als geodätisch einzustellen, indem Sie die Eigenschaft geodesic auf true setzen.

Ein geodätisches Polygon behält seine eigentliche geografische Form beim Verschieben bei, so dass das Polygon verzerrt dargestellt wird, wenn es in Mercator-Projektion nach Norden oder Süden verschoben wird. Nicht-geodätische Polygone behalten ihre anfängliches Erscheinungsbild auf dem Bildschirm.

Bei einer geodätischen Polylinie werden die Segmente der Polylinie als kürzester Weg zwischen zwei Punkten auf der Erdoberfläche gezeichnet, wobei angenommen wird, dass die Erde eine Kugel ist – im Gegensatz zu Geraden bei der Mercator-Projektion.

Weitere Informationen zu Koordinatensystemen finden Sie in der Dokumentation MapTypes.

Die folgende Karte zeigt zwei Dreiecke, deren Größe und Maße in etwa übereinstimmen. Für das rote Dreieck ist die Eigenschaft geodesic auf true gesetzt. Beachten Sie, wie sich seine Form ändert, während es nach Norden verschoben wird.

Beispiel anzeigen (polygon-draggable.html).

Reaktionen auf Bearbeitungsereignisse

Wenn eine Form bearbeitet wird, wird nach Abschluss der Bearbeitung ein Ereignis ausgelöst. Diese Ereignisse sind nachfolgend aufgelistet.

Form Ereignisse
Kreis radius_changed
center_changed
Polygon insert_at
remove_at
set_at

Der Listener muss auf den Pfad des Polygons gesetzt sein. Wenn das Polygon über mehrere Pfade verfügt, muss auf jedem Pfad des Polygons ein Listener gesetzt sein.

Polylinie insert_at
remove_at
set_at

Der Listener muss auf den Pfad der Polylinie gesetzt sein.

Rechteck bounds_changed

Einige hilfreiche Codebeispiele:

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

Hier sehen Sie ein Beispiel für die Verarbeitung eines Bearbeitungsereignisses für ein Rechteck: Beispiel anzeigen (rectangle-event.html).

Reaktionen auf Ziehereignisse

Wenn eine Form gezogen wird, werden zu Beginn, während und nach Abschluss des Ziehens Ereignisse ausgelöst. Die folgenden Ereignisse werden für Polylinien, Polygone, Kreise und Rechtecke ausgelöst.

Ereignis Beschreibung
dragstart Wird ausgelöst, wenn der Benutzer mit dem Ziehen der Form beginnt.
drag Wird wiederholt ausgelöst, während der Benutzer die Form zieht.
dragend Wird ausgelöst, wenn der Benutzer das Ziehen der Form beendet.

Weitere Informationen zur Verarbeitung von Ereignissen finden Sie in der Dokumentation zu Ereignissen.

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API