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

Symbole

  1. Einführung
  2. Eigenschaften von Symbolen
  3. Vordefinierte Symbole
  4. Symbole zu Markern hinzufügen
  5. Symbole zu Polylinien hinzufügen
  6. Symbole animieren

Einführung

Symbole sind hilfreich, wenn Sie ein vektorbasiertes Icon für einen Marker verwenden oder ein Bild zu einer Polylinie hinzufügen möchten.

Ein Symbol ist eine vektorbasierte Grafik, die auf einem Objekt Marker oder Polyline dargestellt werden kann. Die Form des Symbols wird durch einen Pfad mithilfe einer SVG-Pfadnotation definiert. Obwohl path die einzige erforderliche Eigenschaft ist, werden durch das Objekt Symbol verschiedenste Eigenschaften unterstützt, die Ihnen die Anpassung visueller Aspekte, z. B. Farbe, Strichstärke und Füllung, ermöglichen. Weitere Informationen finden Sie in der nachfolgenden Liste der Eigenschaften.

Über die Klasse SymbolPath sind verschiedene vordefinierte Symbole verfügbar. Siehe nachfolgende Liste.

Eigenschaften von Symbolen

Beachten Sie, dass das Standardverhalten bei einem Symbol abhängig davon, ob es auf einem Marker oder einer Polylinie dargestellt wird, leicht abweichen kann. Diese Abweichungen sind in der nachfolgenden Liste der Eigenschaften beschrieben.

Ein Symbol unterstützt folgende Eigenschaften:

  • path (erforderlich) bezeichnet den Pfad zur Definition der Form des Symbols. Sie können einen der vordefinierten Pfade in google.maps.SymbolPath verwenden oder einen benutzerdefinierten Pfad mithilfe der SVG-Pfadnotation definieren. Hinweis: Vektorpfade auf einer Polylinie müssen in ein Quadrat mit den Abmessungen 22x22 Pixel passen. Wenn Ihr Pfad Punkte außerhalb dieses Quadrats umfasst, müssen Sie die Symboleigenschaft scale auf einen Teilwert, z. B. 0,2, ändern, damit die daraus resultierenden skalierten Punkte in das Quadrat passen.
  • Mit der Eigenschaft anchor wird die Position des Symbols relativ zum Marker oder zur Polylinie definiert. Die Koordinaten des Symbolpfads werden links und oben gemäß den X- und Y-Koordinaten des Ankers umgerechnet. Standardmäßig ist ein Symbol bei (0, 0) verankert. Die Position wird mit demselben Koordinatensystem ausgedrückt wie der Pfad des Symbols.
  • Die Eigenschaft fillColor bezeichnet die Füllfarbe des Symbols (also den Bereich, der durch den Strich umrahmt wird). Alle CSS3-Farben mit Ausnahme von Farben mit erweiterten Namen werden unterstützt. Für Symbole auf Markern ist die Standardfarbe „schwarz“. Für Symbole auf Polylinien entspricht die Standardfarbe der Strichfarbe der jeweiligen Polylinie.
  • Mit der Eigenschaft fillOpacity ist die relative Deckkraft (d. h. das Fehlen an Transparenz) der Symbolfüllung definiert. Der Wertebereich liegt von 0,0 (komplett transparent) bis 1,0 (vollständig deckend). Der Standardwert ist 0,0.
  • Die Eigenschaft rotation bezeichnet den Winkel, in dem das Symbol gedreht wird. Die Rotation erfolgt im Uhrzeigersinn in Grad. Standardmäßig hat ein Symbolmarker eine Rotation 0, und ein Symbol auf einer Polylinie wird um den Winkel des Rands gedreht, an dem es liegt. Durch Einstellen der Rotation eines Symbols auf einer Polylinie wird die Rotation des Symbols so fixiert, dass sie nicht mehr der Kurve der Linie folgt.
  • Mit der Eigenschaft scale wird der Wert festgelegt, um den die Größe des Symbols skaliert wird. Für Symbolmarker beträgt die Standardskalierung 1. Nach der Skalierung kann das Symbol jede beliebige Größe haben. Für Symbole auf Polylinien entspricht die Standardskalierung der Strichstärke der entsprechenden Polylinie. Nach der Skalierung muss das Symbol innerhalb eines Quadrats von 22x22 Pixel, zentriert am Anker des Symbols, liegen.
  • Die Eigenschaft fillColor bezeichnet die Füllfarbe des Symbols (also den Bereich, der durch den Strich umrahmt wird). Alle CSS3-Farben mit Ausnahme von Farben mit erweiterten Namen werden unterstützt. Für Symbole auf Markern ist die Standardfarbe „schwarz“. Für Symbole auf einer Polylinie entspricht die Standardfarbe der Strichfarbe der Polylinie.
  • Mit der Eigenschaft strokeOpacity wird die relative Deckkraft (d. h. das Fehlen von Transparenz) des Symbolstrichs bestimmt. Der Wertebereich liegt von 0,0 (komplett transparent) bis 1,0 (vollständig deckend). Der Standardwert für Symbolmarker ist 1,0. Für Symbole auf Polylinien ist der Standardwert die Strichdeckkraft der entsprechenden Polylinie.
  • Mit der Eigenschaft strokeWeight wird die Strichstärke des Rahmens des Symbols definiert. Der Standardwert ist die Skalierung (scale) des Symbols.

Vordefinierte Symbole

Google Maps JavaScript API bietet einige integrierte Symbole, die Sie mithilfe der Klasse SymbolPath zu Markern oder Polylinien hinzufügen können.

Zu den Standardsymbolen gehören ein Kreis und zwei verschiedene Pfeile. Es sind vorwärts und rückwärts zeigende Pfeile verfügbar. Dies ist insbesondere bei Polylinien hilfreich, da die Ausrichtung eines Symbols auf einer Polylinie fest ist. Vorwärts gerichtete Pfeile zeigen in die Richtung des Endpunktes der Polylinie.

Sie können die Strichstärke oder die Füllung vordefinierter Symbole mithilfe der vorhandenen Standardsymboloptionen ändern.

Folgende vordefinierte Symbole sind verfügbar:

Name Beschreibung Beispiel
google.maps.SymbolPath.CIRCLE Ein Kreis.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Ein rückwärts zeigender Pfeil, der auf allen Seiten geschlossen ist.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Ein vorwärts zeigender Pfeil, der auf allen Seiten geschlossen ist.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Ein rückwärts zeigender Pfeil, der auf einer Seite geöffnet ist.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Ein vorwärts zeigender Pfeil, der auf einer Seite geöffnet ist.

Symbole zu Markern hinzufügen

Um ein vektorbasiertes Icon auf einem Marker anzuzeigen, übergeben Sie ein Objektliteral Symbol mit dem gewünschten Pfad an die Markereigenschaft icon.

Im nachfolgenden Beispiel wird ein Icon mithilfe eines vordefinierten Vektorpfads erstellt.

// This example uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

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

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    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 uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

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

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: map
  });

}

Beispiel anzeigen (vordefiniertes Markersymbol).

Im nachfolgenden Beispiel wird eine SVG-Pfadnotation zum Erstellen eines benutzerdefinierten Icons für einen Marker verwendet.

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

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

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    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 uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

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

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: map
  });
}

Beispiel anzeigen (benutzerdefiniertes Markersymbol).

Symbole zu Polylinien hinzufügen

Um Symbole auf einer Polylinie anzuzeigen, definieren Sie die Eigenschaft icons[] des Objekts PolylineOptions. Der Array icons[] übernimmt ein oder mehrere Objektliterale IconSequence mit folgenden Eigenschaften:

  • icon (erforderlich) entspricht dem auf der Linie wiederzugebenden Symbol.
  • Mit offset wird die Entfernung von Startpunkt der Linie bestimmt, auf der ein Icon dargestellt werden soll. Dieser Abstand kann als prozentualer Wert der Linienlänge (z. B. 50 %) oder als Pixel-Wert (z. B. 50 px) ausgedrückt werden. Der Standardwert ist 100 %.
  • Mit repeat wird der Abstand zwischen aufeinanderfolgenden Icons auf der Linie bestimmt. Dieser Abstand kann als prozentualer Wert der Linienlänge (z. B. 50 %) oder als Pixel-Wert (z. B. 50 px) ausgedrückt werden. Um die Wiederholung des Icons zu deaktivieren, geben Sie den Wert 0 an. Der Standardwert ist 0.

Werden Symbole mit der Klasse PolylineOptions kombiniert, haben Sie umfassende Einflussmöglichkeiten auf das Erscheinungsbild der Polylinien auf Ihrer Karte. Nachfolgend sind einige Beispiele für Anpassungsmöglichkeiten aufgeführt.

Pfeile

Um Pfeile zum Start- und Endpunkt Ihrer Polylinie hinzuzufügen, verwenden Sie die Eigenschaft IconSequence.offset.

// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

// Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  icons: [{
    icon: lineSymbol,
    offset: '100%'
  }],
  map: map
});

Beispiel anzeigen (Überlagerung-Symbol-Pfeil).

Gestrichelte Linien

Sie können den Effekt einer gestrichelten Linie erzielen, indem Sie die Deckkraft Ihrer Polylinie auf 0 setzen und die Linie in regelmäßigen Abständen durch ein deckendes Symbol überlagern.

// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

Beispiel anzeigen (Überlagerung-Symbol-gestrichelt).

Benutzerdefinierte Pfade

Mithilfe von benutzerdefinierten Symbolen können Sie viele verschiedene Formen zu einer Polylinie hinzufügen.

// Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
  var symbolOne = {
    path: 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
  };

  var symbolTwo = {
    path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
    strokeColor: '#00F',
    rotation: 45
  };

  var symbolThree = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#292',
    strokeWeight: 4
  };

  // Create the polyline and add the symbols via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [
      {
        icon: symbolOne,
        offset: '0%'
      }, {
        icon: symbolTwo,
        offset: '50%'
      }, {
        icon: symbolThree,
        offset: '100%'
      }
    ],
    map: map
  });

Beispiel anzeigen (Überlagerung-Symbol-benutzerdefiniert).

Symbole animieren

Sie können Symbole auf einem Pfad mithilfe der DOM-Funktion window.setInterval() animieren, um den Offset des Symbols in festen Intervallen zu ändern.

// This example adds an animated symbol to a polyline.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 20.291, lng: 153.027},
    zoom: 6,
    mapTypeId: 'terrain'
  });

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}
<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 an animated symbol to a polyline.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 20.291, lng: 153.027},
    zoom: 6,
    mapTypeId: 'terrain'
  });

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}

Beispiel anzeigen (Überlagerung-Symbol-animieren).

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API