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

Steuerelemente

Übersicht der Steuerelemente

Die Karten, die durch die Google Maps JavaScript API angezeigt werden, enthalten UI-Elemente zur Interaktion des Nutzers mit der Karte. Diese Elemente werden als Steuerelemente bezeichnet. Varianten dieser Steuerelemente können Sie Ihrer Anwendung hinzufügen. Alternativ können Sie der Google Maps JavaScript API die Kontrolle über das Verhalten der Steuerelemente überlassen.

Die folgende Karte enthält die von der Google Maps JavaScript API angezeigten Standardsteuerelemente:

Beispiel anzeigen (control-default.html)

Nachfolgend finden Sie eine Liste der Steuerelemente, die Sie in Ihren Karten verwenden können:

  • Mit den Schaltflächen „+“ und „-“ des Steuerelements „Zoom“ können Benutzer die Vergrößerungsstufe der Karte verändern. Standardmäßig erfolgt die Anzeige dieser Steuerelemente in der unteren rechten Ecke der Karte.
  • Das Steuerelement „Map Type“ ist über eine Auswahlliste oder eine horizontale Symbolleiste verfügbar. Mit diesem Steuerelement können Benutzer einen Kartentyp auswählen, (ROADMAP, SATELLITE, HYBRID oder TERRAIN). Standardmäßig erfolgt die Anzeige dieser Steuerelemente in der oberen linken Ecke der Karte.
  • Das Steuerelement „Street View“ umfasst ein Pegman-Symbol, das auf die Karte gezogen werden kann, um Street View zu aktivieren. Dieses Steuerelement wird standardmäßig unten rechts in der Karte angezeigt.
  • Das Steuerelement „Rotate“ bietet eine Kombination aus Neigungs- und Drehoptionen für Karten, die schiefwinkliges Bildmaterial enthalten. Dieses Steuerelement wird standardmäßig unten rechts in der Karte angezeigt. Weitere Informationen finden Sie im Abschnitt 45 °-Bilder.
  • Das Steuerelement „Scale“ zeigt ein Kartenskalierungselement. Dieses Steuerelement ist standardmäßig deaktiviert.
  • Das Vollbild-Steuerelement bietet die Möglichkeit zum Öffnen der Karte im Vollbildmodus. Dieses Steuerelement ist auf Mobilgeräten standardmäßig aktiviert und auf Desktopgeräten standardmäßig deaktiviert. Hinweis: iOS unterstützt die Vollbildfunktion nicht. Das Vollbild-Steuerelement ist daher auf iOS-Geräten nicht sichtbar.

Das Aufrufen oder Bearbeiten dieser Kartensteuerelemente erfolgt nicht direkt. Stattdessen bearbeiten Sie die Felder MapOptions der Karte, die sich auf die Sichtbarkeit und Darstellung der Steuerelemente auswirken. Sie können die Darstellung der Steuerelemente bei der Instanziierung Ihrer Karte anpassen (mithilfe der entsprechenden MapOptions), oder Sie bearbeiten eine Karte dynamisch, indem Sie setOptions() aufrufen, um die Kartenoptionen zu ändern.

Nicht alle Steuerelemente sind standardmäßig aktiviert. Weitere Informationen zum UI-Verhalten (und zur Bearbeitung dieses Verhaltens) finden Sie im nachfolgenden Abschnitt Die Standardbenutzeroberfläche.

Die Standardbenutzeroberfläche

Standardmäßig werden alle Steuerelemente ausgeblendet, wenn die Karte zu klein ist (200x200 px). Sie können dieses Verhalten übersteuern, indem Sie explizit festlegen, dass das Steuerelement sichtbar sein soll. Siehe Steuerelemente zur Karte hinzufügen.

Verhalten und Erscheinungsbild der Steuerelemente sind auf Mobil- und Desktopgeräten identisch, mit Ausnahme des Vollbild-Steuerelements (eine Beschreibung des Verhaltens finden Sie in der Liste der Steuerelemente).

Außerdem ist die Tastatursteuerung standardmäßig auf allen Geräten aktiviert.

Standardbenutzeroberfläche deaktivieren

Bei Bedarf können Sie die API-Standardeinstellungen für die Steuerelemente komplett deaktivieren. Setzen Sie dazu die Karteneigenschaft disableDefaultUI (im Objekt MapOptions) auf true. Mit dieser Eigenschaft werden alle automatischen UI-Verhaltensweisen aus der Google Maps JavaScript API deaktiviert.

Mit folgendem Code wird die Standardbenutzeroberfläche komplett deaktiviert.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}
<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 map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}

Beispiel anzeigen (control-disableUI.html)

Steuerelemente zur Karte hinzufügen

Gegebenenfalls möchten Sie Ihre Benutzeroberfläche individuell anpassen, indem Sie UI-Verhalten oder Steuerelemente entfernen, hinzufügen oder bearbeiten, und sicherstellen, dass dieses Verhalten durch zukünftige Updates nicht verändert wird. Wenn Sie lediglich Verhalten ergänzen oder vorhandenes Verhalten bearbeiten möchten, müssen Sie sicherstellen, dass das Steuerelement explizit zu Ihrer Anwendung hinzugefügt wird.

Einige Steuerelemente werden standardmäßig auf der Karte angezeigt, während andere nur eingeblendet werden, wenn Sie dies explizit anfordern. Das Hinzufügen und Entfernen von Steuerelementen zur bzw. von der Karte wird mit den folgenden Feldern des Objekts MapOptions definiert, deren Wert Sie auf true setzen, um sie einzublenden, oder auf false, um sie auszublenden:

{
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

Standardmäßig werden alle Steuerelemente ausgeblendet, wenn die Karte kleiner ist als 200x200 px. Sie können dieses Verhalten übersteuern, indem Sie explizit festlegen, dass das Steuerelement sichtbar sein soll. Die nachfolgende Tabelle zeigt beispielsweise, ob das Zoom-Steuerelement sichtbar ist. Dies basiert auf der Kartengröße und der Einstellung des Felds zoomControl:

Kartengröße zoomControl Sichtbar?
Beliebig false Nein
Beliebig true Ja
>= 200x200 px undefined Ja
< 200x200 px undefined Nein

Im folgenden Beispiel ist für die Karte festgelegt, dass das Steuerelement „Zoom“ ausgeblendet und das Steuerelement „Scale“ eingeblendet wird. Beachten Sie, dass wir die Standardbenutzeroberfläche nicht explizit deaktivieren, so dass diese Änderungen das UI-Standardverhalten ergänzen.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    zoomControl: false,
    scaleControl: true
  });
}
<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 map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    zoomControl: false,
    scaleControl: true
  });
}

Beispiel anzeigen (control-simple.html).

Optionen für Steuerelemente

Sie können verschiedene Steuerelemente konfigurieren und ihr Verhalten oder Erscheinungsbild verändern. Das Steuerelement „Map Type“ kann beispielsweise als horizontale Leiste oder als Auswahlliste dargestellt werden.

Sie verändern diese Steuerelemente, indem Sie die entsprechenden Optionsfelder des Steuerelements im Objekt MapOptions beim Erstellen der Karte bearbeiten.

Optionen zum Verändern des Steuerelements „Map Type“ sind beispielsweise im Feld mapTypeControlOptions angegeben. Das Steuerelement „Map Type“ kann mit den folgenden Formatoptionen (style) dargestellt werden:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR: zeigt ein Array von Steuerelementen als Schaltflächen in einer horizontalen Leiste an, wie z. B. in Google Maps.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU: zeigt ein einzelnes Schaltflächensteuerelement, das die Auswahl des Kartentyps über ein Auswahlmenü ermöglicht.
  • google.maps.MapTypeControlStyle.DEFAULT: zeigt das Standardverhalten an, das von der Bildschirmgröße abhängig ist und sich mit der Bereitstellung zukünftiger API-Versionen ändern kann.

Hinweis: Wenn Sie Optionen für Steuerelemente bearbeiten, müssen Sie das jeweilige Steuerelement außerdem explizit aktivieren, indem Sie den entsprechenden Wert MapOptions auf true setzen. Um beispielsweise für das Steuerelement „Map Type“ das Format DROPDOWN_MENU festzulegen, verwenden Sie den folgenden Code im Objekt MapOptions:

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

Im nachfolgenden Beispiel wird gezeigt, wie Sie die Standardposition und das Standardformat von Steuerelementen ändern.

// You can set control options to change the default position or style of many
// of the map controls.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['roadmap', 'terrain']
    }
  });
}
<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>
// You can set control options to change the default position or style of many
// of the map controls.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['roadmap', 'terrain']
    }
  });
}

Beispiel anzeigen (control-options.html).

Steuerelemente werden üblicherweise beim Erstellen der Karte konfiguriert. Sie können die Darstellung der Steuerelemente jedoch auch dynamisch verändern, indem Sie die Methode setOptions() der Karte (Map) aufrufen und neue Optionen für die Steuerelemente übergeben.

Steuerelemente bearbeiten

Sie legen die Darstellung eines Steuerelements beim Erstellen der Karte über Felder im Kartenobjekt MapOptions fest. Diese Felder werden nachfolgend erläutert:

  • Das Feld zoomControl aktiviert/deaktiviert das Steuerelement „Zoom“. Dieses Steuerelement wird standardmäßig unten rechts in der Karte angezeigt. Das Feld zoomControlOptions definiert zusätzlich die für dieses Steuerelement zu verwendenden Optionen (ZoomControlOptions).
  • Das Feld mapTypeControl aktiviert/deaktiviert das Steuerelement „Map Type“, mit dem der Benutzer zwischen Kartentypen (z. B. „Map“ und „Satellite“) wechseln kann. Standardmäßig wird dieses Steuerelement in der oberen linken Ecke der Karte angezeigt. Das Feld mapTypeControlOptions definiert zusätzlich die für dieses Steuerelement zu verwendenden Optionen (MapTypeControlOptions).
  • Das Feld streetViewControl aktiviert/deaktiviert das Pegman-Steuerelement, mit dem der Benutzer ein Street View-Panorama aktivieren kann. Dieses Steuerelement wird standardmäßig unten rechts in der Karte angezeigt. Das Feld streetViewControlOptions definiert zusätzlich die für dieses Steuerelement zu verwendenden Optionen (StreetViewControlOptions).
  • Das Feld rotateControl aktiviert/deaktiviert die Anzeige eines Steuerelements „Rotate“ zur Steuerung der Ausrichtung von 45 °-Bildern. Standardmäßig ist das Ein- bzw. Ausblenden des Steuerelements abhängig davon, ob 45 °-Grad-Bilder für den jeweiligen Kartentyp bei der aktuellen Vergrößerung und am aktuellen Standort vorhanden sind. Sie können das Verhalten des Steuerelements verändern, indem Sie in den Kartenoptionen rotateControlOptions die zu verwendenden Optionen (RotateControlOptions) festlegen. Sie können das Steuerelement nicht einblenden, wenn derzeit keine 45 °-Bilder verfügbar sind.
  • Das Feld scaleControl aktiviert/deaktiviert das Steuerelement „Scale“, mit dem eine einfache Kartenskalierung bereitgestellt wird. Standardmäßig wird dieses Steuerelement nicht angezeigt. Wenn dieses Steuerelement aktiviert ist, wird es immer in der unteren rechten Ecke der Karte angezeigt. Das Feld scaleControlOptions definiert zusätzlich die für dieses Steuerelement zu verwendenden Optionen (ScaleControlOptions).
  • Mit fullscreenControl wird das Steuerelement aktiviert/deaktiviert, das die Karte im Vollbildmodus öffnet. Auf Smartphones und Mobilgeräten ist dieses Steuerelement standardmäßig sichtbar, auf Desktopgeräten hingegen nicht. Wenn das Steuerelement aktiviert ist, wird es in der Karte oben rechts eingeblendet. Im Feld fullscreenControlOptions wird außerdem angegeben, welche FullscreenControlControlOptions für dieses Steuerelement zu verwenden sind.

Beachten Sie, dass Sie Optionen für Steuerelemente definieren können, die Sie anfänglich deaktivieren.

Positionierung der Steuerelemente

Die meisten Optionen für die Steuerelemente enthalten eine Eigenschaft position (vom Typ ControlPosition), mit der angegeben wird, an welcher Position das Steuerelement auf der Karte platziert wird. Die Positionierung dieser Steuerelemente ist nicht absolut. Stattdessen werden die Steuerelemente von der API intelligent um die vorhandenen Kartenelemente oder andere Steuerelemente innerhalb der gegebenen Grenzen (z. B. die Größe der Karte) angeordnet.

Hinweis: Es kann nicht garantiert werden, dass die Steuerelemente im Fall von komplizierten Layouts nicht überlappen, obwohl durch die API eine intelligente Anordnung versucht wird.

Folgende Positionen werden für Steuerelemente unterstützt:

  • TOP_CENTER gibt an, dass das Steuerelement im oberen Bereich der Karte mittig platziert werden soll.
  • TOP_LEFT gibt an, dass das Steuerelement oben links auf der Karte platziert werden soll, wobei eventuelle untergeordnete Elemente des Steuerelements zur Mitte im oberen Kartenbereich „gleiten“.
  • TOP_RIGHT gibt an, dass das Steuerelement oben rechts auf der Karte platziert werden soll, wobei eventuelle untergeordnete Elemente des Steuerelements zur Mitte im oberen Kartenbereich „gleiten“.
  • LEFT_TOP: gibt an, dass das Steuerelement links oben auf der Karte, jedoch unterhalb von eventuellen Elementen TOP_LEFT platziert werden soll.
  • RIGHT_TOP: gibt an, dass das Steuerelement rechts oben auf der Karte, jedoch unterhalb von eventuellen Elementen TOP_RIGHT platziert werden soll.
  • LEFT_CENTER: gibt an, dass das Steuerelement entlang der linken Seite der Karte platziert werden soll; in der Mitte zwischen den Positionen TOP_LEFT und BOTTOM_LEFT.
  • RIGHT_CENTER: gibt an, dass das Steuerelement entlang der rechten Seite der Karte platziert werden soll; in der Mitte zwischen den Positionen TOP_RIGHT und BOTTOM_RIGHT.
  • LEFT_BOTTOM: gibt an, dass das Steuerelement links unten auf der Karte, jedoch oberhalb von eventuellen Elementen BOTTOM_LEFT platziert werden soll.
  • RIGHT_BOTTOM: gibt an, dass das Steuerelement rechts unten auf der Karte, jedoch oberhalb von eventuellen Elementen BOTTOM_RIGHT platziert werden soll.
  • BOTTOM_CENTER: gibt an, dass das Steuerelement im unteren Bereich der Karte mittig platziert werden soll.
  • BOTTOM_LEFT: gibt an, dass das Steuerelement unten links auf der Karte platziert werden soll, wobei eventuelle untergeordnete Elemente des Steuerelements zur Mitte im unteren Kartenbereich „gleiten“.
  • BOTTOM_RIGHT: gibt an, dass das Steuerelement unten rechts auf der Karte platziert werden soll, wobei eventuelle untergeordnete Elemente des Steuerelements zur Mitte im unteren Kartenbereich „gleiten“.

Beispiel anzeigen (control-positioning-labels.html).

Beachten Sie, dass diese Positionen mit Positionen von UI-Elementen zusammenfallen können, deren Positionierung Sie nicht verändern können (z. B. Copyright-Hinweise und das Google-Logo). In diesen Fällen gleiten die Steuerelemente gemäß der Logik, die für die jeweilige Position definiert ist, und werden so nahe wie möglich an der angegebenen Position angezeigt.

Im nachfolgenden Beispiel wird eine einfache Karte dargestellt, in der alle Steuerelemente aktiviert und an verschiedenen Positionen platziert sind.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: -28.643387, lng: 153.612224},
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
    fullscreenControl: true
  });
}
<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 map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: -28.643387, lng: 153.612224},
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
    fullscreenControl: true
  });
}

Beispiel anzeigen (control-positioning.html).

Benutzerdefinierte Steuerelemente

Sie können nicht nur die Formate und Positionen vorhandener API-Steuerelemente bearbeiten, sondern auch eigene Steuerelemente für die Interaktion mit dem Benutzer erstellen. Steuerelemente sind unbewegte Widgets, die – im Gegensatz zu Überlagerungen, die sich mit der zugrundeliegenden Karte verschieben – unverankert an absoluten Positionen über einer Karte liegen. Ganz grundsätzlich ist eine Steuerelement lediglich ein Element <div>, mit einer absoluten Position auf der Karte, das dem Benutzer einige UIs anzeigt und die Interaktion mit dem Benutzer oder der Karte steuert (in der Regel über einen Ereignishandler).

Beim Erstellen benutzerdefinierter Steuerelemente sind einige Regeln zu beachten. Die nachfolgenden Richtlinien können jedoch als bewährte Methoden angesehen werden.

  • Definieren Sie geeignete CSS für die anzuzeigenden Steuerelemente.
  • Lassen Sie die Interaktion mit dem Benutzer oder der Karte über Ereignishandler erfolgen, entweder für Änderungen der Karteneigenschaften oder für Benutzerereignisse (z. B. 'click'-Ereignisse).
  • Erstellen Sie ein Element <div>, in dem das Steuerelement enthalten sein soll, und fügen Sie dieses Element zur Eigenschaft controls der Karte (Map) hinzu.

Diese Punkte werden nachfolgend im Einzelnen erläutert.

Benutzerdefinierte Steuerelemente zeichnen

Es liegt bei Ihnen, wie Sie Ihre Steuerelemente zeichnen. Generell empfehlen wir die gesamte Darstellung der benutzerdefinierten Steuerelemente in einem einzigen Element <div>, damit Sie Ihre Steuerelemente als eine Einheit bearbeiten können. Wir verwenden dieses Entwurfsmuster in den nachfolgenden Beispielen.

Um attraktive Steuerelemente zu entwickeln sind gewisse Kenntnisse der CSS- und DOM-Struktur erforderlich. Das folgende Codebeispiel zeigt die Erstellung eines einfachen Steuerelements aus einem enthaltenden Element <div>, einem Element <div>, das den Schaltflächenrahmen enthält, und einem weiteren Element <div>, in dem das Innere der Schaltfläche enthalten ist.

// Create a div to hold the control.
var controlDiv = document.createElement('div');

// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Center Map';
controlUI.appendChild(controlText);

Ereignisse von benutzerdefinierten Steuerelementen bearbeiten

Damit ein Steuerelement sinnvoll ist, muss es einer Interaktion dienen. Um welche Interaktion es sich dabei handelt, liegt bei Ihnen. Das Steuerelement kann auf eine Benutzereingabe oder eine Änderung des Zustands der Karte (Map) reagieren.

Für Reaktionen auf Nutzereingaben stellt die Google Maps JavaScript API die browserübergreifende Ereignisverarbeitungsmethode addDomListener() bereit, mit der die meisten vom Browser unterstützten DOM-Ereignisse behandelt werden. Im folgenden Codebeispiel wird ein Listener zu einem 'click'-Ereignis des Browsers hinzugefügt: Beachten Sie, dass dieses Ereignis aus dem DOM und nicht von der Karte empfangen wird.

// Setup the click event listener: simply set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

google.maps.event.addDomListener(outer, 'click', function() {
  map.setCenter(chicago)
});

Benutzerdefinierte Steuerelemente positionieren

Benutzerdefinierte Steuerelemente werden auf der Karte angeordnet, indem sie mithilfe der Eigenschaft controls im Objekt Map an geeigneten Positionen platziert werden. Diese Eigenschaft enthält ein Array von google.maps.ControlPositions. Sie fügen ein benutzerdefiniertes Steuerelement zur Karte hinzu, indem Sie den Knoten (Node; in der Regel das Element <div>) zu einer geeigneten Position (ControlPosition) hinzufügen. (Weitere Informationen zu diesen Positionen finden Sie im obenstehenden Abschnitt Steuerelemente positionieren.)

Für jede ControlPosition ist ein MVCArray der an dieser Position angezeigten Steuerelemente hinterlegt. Dies hat zur Folge, dass die Steuerelemente durch die API aktualisiert werden, wenn Steuerelemente hinzugefügt oder entfernt werden.

Die API platziert Steuerelemente an jeder Position in der Reihenfolge einer Eigenschaft index; Steuerelemente mit einem niedrigeren Index werden zuerst platziert. So werden beispielsweise zwei benutzerdefinierte Steuerelemente an der Position BOTTOM_RIGHT entsprechend diesem Index angeordnet, wobei der niedrigere Index Vorrang hat. Standardmäßig werden alle benutzerdefinierten Steuerelemente nach dem Platzieren sämtlicher API-Standardsteuerelemente platziert. Sie können dieses Verhalten übersteuern, indem Sie für die Eigenschaft index eines Steuerelements explizit einen negativen Wert festlegen. Links vom Logo oder rechts von den Copyright-Hinweisen können keine benutzerdefinierten Steuerelemente platziert werden.

Mit dem nachfolgenden Code wird ein neues benutzerdefiniertes Steuerelement erstellt (der zugehörige Konstruktor wird nicht gezeigt) und an der Position TOP_RIGHT zur Karte hinzugefügt.

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Construct your control in whatever manner is appropriate.
// Generally, your constructor will want access to the
// DIV on which you'll attach the control UI to the Map.
var controlDiv = document.createElement('div');
var myControl = new MyControl(controlDiv);

// We don't really need to set an index value here, but
// this would be how you do it. Note that we set this
// value as a property of the DIV itself.
controlDiv.index = 1;

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);

Beispiel für ein benutzerdefiniertes Steuerelement

Das folgende Steuerelement ist einfach (wenn auch nicht besonders sinnvoll) und kombiniert die oben dargestellten Muster. Dieses Steuerelement reagiert auf 'click'-Ereignisse des DOM, indem die Karte an einem bestimmten Standardstandort zentriert wird:

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
<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>
var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

Beispiel anzeigen (control-custom.html).

Zustand zu Steuerelementen hinzufügen

In Steuerelementen kann auch ein Zustand hinterlegt werden. Das folgende Beispiel ähnelt dem zuvor gezeigten Beispiel; das Steuerelement enthält jedoch eine zusätzliche Schaltfläche „Set Home“, mit dem für das Steuerelement definiert wird, dass ein neuer Heimatstandort verwendet werden soll. Dazu erstellen wir im Steuerelement eine Eigenschaft home_, um diesen Zustand sowie Getter und Setter für diesen Zustand zu hinterlegen.

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * @constructor
 * @param {!Element} controlDiv
 * @param {!google.maps.Map} map
 * @param {?google.maps.LatLng} center
 */
function CenterControl(controlDiv, map, center) {
  // We set up a variable for this since we're adding event listeners
  // later.
  var control = this;

  // Set the center property upon construction
  control.center_ = center;
  controlDiv.style.clear = 'both';

  // Set CSS for the control border
  var goCenterUI = document.createElement('div');
  goCenterUI.id = 'goCenterUI';
  goCenterUI.title = 'Click to recenter the map';
  controlDiv.appendChild(goCenterUI);

  // Set CSS for the control interior
  var goCenterText = document.createElement('div');
  goCenterText.id = 'goCenterText';
  goCenterText.innerHTML = 'Center Map';
  goCenterUI.appendChild(goCenterText);

  // Set CSS for the setCenter control border
  var setCenterUI = document.createElement('div');
  setCenterUI.id = 'setCenterUI';
  setCenterUI.title = 'Click to change the center of the map';
  controlDiv.appendChild(setCenterUI);

  // Set CSS for the control interior
  var setCenterText = document.createElement('div');
  setCenterText.id = 'setCenterText';
  setCenterText.innerHTML = 'Set Center';
  setCenterUI.appendChild(setCenterText);

  // Set up the click event listener for 'Center Map': Set the center of
  // the map
  // to the current center of the control.
  goCenterUI.addEventListener('click', function() {
    var currentCenter = control.getCenter();
    map.setCenter(currentCenter);
  });

  // Set up the click event listener for 'Set Center': Set the center of
  // the control to the current center of the map.
  setCenterUI.addEventListener('click', function() {
    var newCenter = map.getCenter();
    control.setCenter(newCenter);
  });
}

/**
 * Define a property to hold the center state.
 * @private
 */
CenterControl.prototype.center_ = null;

/**
 * Gets the map center.
 * @return {?google.maps.LatLng}
 */
CenterControl.prototype.getCenter = function() {
  return this.center_;
};

/**
 * Sets the map center.
 * @param {?google.maps.LatLng} center
 */
CenterControl.prototype.setCenter = function(center) {
  this.center_ = center;
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor
  // passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, chicago);

  centerControlDiv.index = 1;
  centerControlDiv.style['padding-top'] = '10px';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
<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;
}
#goCenterUI, #setCenterUI {
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  cursor: pointer;
  float: left;
  margin-bottom: 22px;
  text-align: center;
}
#goCenterText, #setCenterText {
  color: rgb(25,25,25);
  font-family: Roboto,Arial,sans-serif;
  font-size: 15px;
  line-height: 25px;
  padding-left: 5px;
  padding-right: 5px;
}
#setCenterUI {
  margin-left: 12px;
}
 <!-- 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>
var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * @constructor
 * @param {!Element} controlDiv
 * @param {!google.maps.Map} map
 * @param {?google.maps.LatLng} center
 */
function CenterControl(controlDiv, map, center) {
  // We set up a variable for this since we're adding event listeners
  // later.
  var control = this;

  // Set the center property upon construction
  control.center_ = center;
  controlDiv.style.clear = 'both';

  // Set CSS for the control border
  var goCenterUI = document.createElement('div');
  goCenterUI.id = 'goCenterUI';
  goCenterUI.title = 'Click to recenter the map';
  controlDiv.appendChild(goCenterUI);

  // Set CSS for the control interior
  var goCenterText = document.createElement('div');
  goCenterText.id = 'goCenterText';
  goCenterText.innerHTML = 'Center Map';
  goCenterUI.appendChild(goCenterText);

  // Set CSS for the setCenter control border
  var setCenterUI = document.createElement('div');
  setCenterUI.id = 'setCenterUI';
  setCenterUI.title = 'Click to change the center of the map';
  controlDiv.appendChild(setCenterUI);

  // Set CSS for the control interior
  var setCenterText = document.createElement('div');
  setCenterText.id = 'setCenterText';
  setCenterText.innerHTML = 'Set Center';
  setCenterUI.appendChild(setCenterText);

  // Set up the click event listener for 'Center Map': Set the center of
  // the map
  // to the current center of the control.
  goCenterUI.addEventListener('click', function() {
    var currentCenter = control.getCenter();
    map.setCenter(currentCenter);
  });

  // Set up the click event listener for 'Set Center': Set the center of
  // the control to the current center of the map.
  setCenterUI.addEventListener('click', function() {
    var newCenter = map.getCenter();
    control.setCenter(newCenter);
  });
}

/**
 * Define a property to hold the center state.
 * @private
 */
CenterControl.prototype.center_ = null;

/**
 * Gets the map center.
 * @return {?google.maps.LatLng}
 */
CenterControl.prototype.getCenter = function() {
  return this.center_;
};

/**
 * Sets the map center.
 * @param {?google.maps.LatLng} center
 */
CenterControl.prototype.setCenter = function(center) {
  this.center_ = center;
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor
  // passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, chicago);

  centerControlDiv.index = 1;
  centerControlDiv.style['padding-top'] = '10px';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

Beispiel anzeigen (control-custom-state.html).

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API