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

Marker

Einführung

Ein Marker kennzeichnet einen Standort auf einer Karte. Standardmäßig verwendet der Marker eine Standardgrafik. Marker können benutzerdefinierte Symbolbilder darstellen, die in der Regel als „Icons“ bezeichnet werden. Marker und Icons sind Objekte vom Typ Marker. Sie können ein benutzerdefiniertes Icon im Konstruktor des Markers definieren oder, indem Sie setIcon() auf dem Marker aufrufen. Weitere Informationen zum Anpassen des Markerbilds finden Sie weiter unten auf dieser Seite.

Generell betrachtet sind Marker ein Überlagerungstyp. Informationen zu weiteren Überlagerungstypen finden Sie im Eintrag Auf Karten zeichnen.

Marker sind interaktiv. Sie erhalten z. B. standardmäßig ein Ereignis 'click', damit Sie einen Event-Listener hinzufügen können, um ein Info-Fenster mit benutzerdefinierten Informationen anzuzeigen. Sie können es Benutzern ermöglichen, einen Marker auf der Karte zu verschieben, indem Sie die Markereigenschaft draggable auf true setzen. Weitere Informationen zu ziehbaren Markern finden Sie weiter unten auf dieser Seite.

Marker hinzufügen

Der Konstruktor google.maps.Marker verwendet ein einzelnes Objektliteral Marker options, das die anfänglichen Eigenschaften des Markers definiert.

Die nachfolgenden Felder sind besonders wichtig und werden häufig beim Erstellen eines Markers definiert.

  • Die Eigenschaft position (erforderlich) gibt einen Wert LatLng an, mit dem die Anfangsposition des Markers gekennzeichnet wird. Eine Möglichkeit, einen Wert vom Typ LatLng abzurufen, besteht in der Verwendung des Geocoding-Dienstes.
  • Mit der Eigenschaft map (optional) wird die Karte (Map) angegeben, auf der ein Marker gesetzt werden soll. Wenn Sie beim Erstellen des Markers keine Karte angeben, wird der Marker erstellt, aber nicht in der Karte platziert (oder angezeigt). Sie können den Marker zu einem späteren Zeitpunkt hinzufügen, indem Sie die Methode setMap() des Markers aufrufen.

Im nachfolgenden Beispiel wird ein einfacher Marker zu einer Karte in Uluru in Zentralaustralien hinzugefügt:

function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}
<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>
function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}

Im obigen Beispiel wird der Marker während seiner Erstellung mithilfe der Eigenschaft map in den Markeroptionen auf der Karte platziert. Alternativ können Sie den Marker auch direkt zur Karte hinzufügen, indem Sie die Markermethode setMap() verwenden, wie im nachfolgenden Beispiel gezeigt:

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

Der Titel (title) des Markers wird als Quickinfo angezeigt.

Wenn Sie keine Werte für Marker options im Konstruktor des Markers übergeben möchten, übergeben Sie stattdessen ein leeres Objekt {} im letzten Argument des Konstruktors.

Beispiel anzeigen (marker-simple.html).

Marker entfernen

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

marker.setMap(null);

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

Wenn Sie eine Markergruppe verwalten möchten, legen Sie einen Array an, der die Marker enthält. Mit diesem Array können Sie dann setMap() nacheinander für jeden Marker im Array aufrufen, wenn Sie die Marker löschen müssen. Sie können Marker löschen, indem Sie diese aus der Karte entfernen und anschließend die Längeneigenschaft length des Markers auf 0 setzen, sodass alle Referenzen auf den Marker gelöscht werden.

Beispiel anzeigen (marker-remove.html).

Marker animieren

Sie können Marker animieren, sodass sie unter verschiedensten Bedingungen eine dynamische Bewegung vollziehen. Um festzulegen, in welcher Weise ein Marker animiert wird, verwenden Sie die Markereigenschaft animation vom Typ google.maps.Animation. Die folgenden Werte werden für Animation unterstützt:

  • Mit DROP wird angegeben, dass der Marker von oben auf seine endgültige Position auf der Karte fallen soll, wenn er beim ersten Mal auf der Karte platziert wird. Die Animation endet, sobald der Marker seine Position erreicht, und der Wert für animation wechselt wieder zurück auf null. Diese Art der Animation wird in der Regel angegeben, während der Marker erstellt wird.
  • BOUNCE gibt an, dass der Marker an seiner Position springen soll. Ein springender Marker springt so lange weiter, bis seine Eigenschaft animation explizit auf null gesetzt wird.

Sie können eine Animation für einen vorhandenen Marker starten, indem Sie setAnimation() im Objekt Marker aufrufen.

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 59.325, lng: 18.070}
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 59.327, lng: 18.067}
  });
  marker.addListener('click', toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
<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>
// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 59.325, lng: 18.070}
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 59.327, lng: 18.067}
  });
  marker.addListener('click', toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

Beispiel anzeigen (marker-animations.html).

Wenn Sie viele Marker verwenden, möchten Sie ggf. dass nicht alle Marker gleichzeitig auf die Karte fallen. Sie können die Eigenschaft setTimeout() verwenden, um Abstände zwischen den Animationen der Marker einzurichten. Sie können beispielsweise ein Muster wie im nachfolgenden Beispiel verwenden:

function drop() {
  for (var i =0; i < markerArray.length; i++) {
    setTimeout(function() {
      addMarkerMethod();
    }, i * 200);
  }
}

Beispiel anzeigen (marker-animations-iteration.html).

Markerbilder anpassen

Wenn Sie einen Buchstaben oder eine Zahl anzeigen möchten, können Sie ein Marker-Label verwenden. Wenn Sie Anpassungen in größerem Umfang verwenden möchten, können Sie ein Icon definieren, das anstelle des Markerstandardbilds angezeigt wird. Um ein Icon zu definieren, müssen Sie verschiedene Eigenschaften festlegen, mit denen das Anzeigeverhalten eines Markers bestimmt wird.

In den nachfolgenden Abschnitten sind Marker-Label, einfache Icons, komplexe Icons und Symbole (Vektorgrafiken) beschrieben.

Marker-Label

Ein Marker-Label ist ein Buchstabe oder eine Zahl, der bzw. die innerhalb eines Markers angezeigt wird. Das Markerbild in diesem Abschnitt zeigt ein Marker-Label mit dem Buchstaben „B“. Sie können ein Marker-Label entweder als Zeichenfolge oder als Objekt MarkerLabel angeben, das eine Zeichenfolge und weitere Label-Eigenschaften enthält.

Beim Anlegen eines Markers können Sie eine Eigenschaft label im Objekt MarkerOptions angeben. Alternativ können Sie setLabel() im Objekt Marker aufrufen, um das Label für einen vorhandenen Marker zu definieren.

Im nachfolgenden Beispiel werden Marker mit Bezeichnungen angezeigt, wenn der Benutzer auf die Karte klickt:

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
<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"></script>
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Beispiel anzeigen (marker-labels.html).

Einfache Icons

Im einfachsten Fall stellt ein Icon lediglich ein Bild dar, das anstelle des Google Maps-Standardsymbols für Ortsmarken verwendet wird. Um ein Icon wie dieses zu definieren, setzen Sie die Markereigenschaft icon auf die URL eines Bilds. Die Größe des Icons wird durch die Google Maps JavaScript API automatisch angepasst.

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151}
  });

  var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
  var beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map: map,
    icon: image
  });
}
<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 marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151}
  });

  var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
  var beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map: map,
    icon: image
  });
}

Beispiel anzeigen (icon-simple.html).

Komplexe Icons

Bei Bedarf können Sie auch komplexe Formen definieren, um anklickbare Bereiche zu kennzeichnen, und festlegen, wie diese Icons im Verhältnis zu anderen Überlagerungen angezeigt werden sollen („Stapelreihenfolge“). Für Icons, die auf diese Weise definiert sind, muss ihre Eigenschaft icon auf ein Objekt vom Typ Icon gesetzt werden.

Objekte vom Typ Icon definieren ein Bild. Außerdem definieren sie die Größe (size) eines Icons, den Ursprung (origin) des Icons (wenn das gewünschte Bild z. B. Teil eines größeren Bilds in einem Sprite ist) und den Anker (anchor), an dem der Hotspot des Icons sich befinden soll (basierend auf dem Ursprung).

Wenn Sie ein label mit einem benutzerdefinierten Marker verwenden, können Sie das Label in der Eigenschaft labelOrigin im Objekt Icon positionieren.

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

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

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  var image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
  }
}
<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>
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

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

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  var image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
  }
}

Beispiel anzeigen (icon-complex.html).

Objekte vom Typ MarkerImage in den Typ Icon konvertieren

Bis Version 3.10 von Google Maps JavaScript API waren komplexe Icons als Objekte vom Typ MarkerImage definiert. Das Objektliteral Icon wurde in Version 3.10 hinzugefügt; ab Version 3.11 ersetzt es das Objekt MarkerImage. Objektliterale vom Typ Icon unterstützen dieselben Parameter wie MarkerImage, sodass Sie ein Objekt MarkerImage ganz einfach in ein Objekt Icon umwandeln können, indem Sie den Konstruktor entfernen, die vorherigen Parameter in {} einschließen und die Namen der einzelnen Parameter hinzufügen. Beispiel:

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

wird

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

Symbole

Zusätzlich zu Rasterbildern unterstützen Marker die Anzeige von Vektorpfaden mit der Bezeichnung Symbols. Um einen Vektorpfad anzuzeigen, übergeben Sie ein Objektliteral Symbol mit dem gewünschten Pfad an die Markereigenschaft icon. Sie können einen der vordefinierten Pfade in google.maps.SymbolPath verwenden oder einen benutzerdefinierten Pfad mithilfe der SVG-Pfadnotation erstellen.

Weitere Informationen finden Sie in der Dokumentation zu Symbolen.

Ziehen von Markern ermöglichen

Um es Benutzern zu ermöglichen, einen Marker an eine andere Position auf der Karte zu ziehen, setzen Sie die Eigenschaft draggable in den Markeroptionen auf true.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API