Steuerelemente

Plattform auswählen: Android iOS JavaScript

Übersicht der Steuerelemente

Die Karten, die über die Maps JavaScript API angezeigt werden, enthalten UI-Elemente, über die Nutzer mit der Karte interagieren können. Diese Elemente werden als Steuerelemente bezeichnet. Sie können Varianten dieser Steuerelemente in Ihre Anwendung einfügen. Alternativ können Sie die Funktionsweise sämtlicher Steuerelemente ganz der Maps JavaScript API überlassen.

Auf der folgenden Karte sehen Sie die Steuerelemente, die standardmäßig von der Maps JavaScript API angezeigt werden:

Die folgende Liste enthält alle Steuerelemente, die Sie in Ihren Karten verwenden können:

  • Die Zoomsteuerung besteht aus den Schaltflächen „+“ und „-“, mit denen die Zoomstufe der Karte geändert werden kann. Sie werden standardmäßig unten rechts auf der Karte angezeigt.
  • Die Kamerasteuerung bietet sowohl Zoom- als auch Schwenkfunktionen und wird standardmäßig anstelle der Zoomsteuerung angezeigt, wenn Sie den Betakanal verwenden.
  • Die Steuerung für den Kartentyp ist als Drop-down-Menü oder horizontale Schaltflächenleiste verfügbar. Nutzer können damit den gewünschten Kartentyp auswählen (ROADMAP, SATELLITE, HYBRID oder TERRAIN). Sie wird standardmäßig links oben auf der Karte angezeigt.
  • Das Street View-Steuerelement besteht aus einem Pegman-Symbol, das auf die Karte gezogen wird, um Street View zu aktivieren. Es wird standardmäßig unten rechts auf der Karte angezeigt.
  • Die Steuerung für die Rotation bietet Neigungs- und Drehoptionen für Karten mit Schrägaufnahmen. Sie wird standardmäßig unten rechts auf der Karte angezeigt. Weitere Informationen finden Sie unter 45°-Bilder.
  • Das Steuerelement für den Maßstab zeigt den Kartenmaßstab an. Es ist standardmäßig deaktiviert.
  • Über das Steuerelement für den Vollbildmodus kann die Karte im Vollbildmodus geöffnet werden. Auf Computern und Mobilgeräten ist es standardmäßig aktiviert. Hinweis: Auf iOS-Geräten wird der Vollbildmodus nicht unterstützt. Das Steuerelement ist dort nicht sichtbar.
  • Über das Steuerelement für Tastenkombinationen wird eine Liste der Tastenkombinationen für die Interaktion mit der Karte angezeigt.

Sie haben keinen direkten Zugriff auf diese Steuerelemente und können sie auch nicht ändern. Sie haben aber die Möglichkeit, die MapOptions-Felder der Karte zu bearbeiten und so die Sichtbarkeit und Darstellung der Steuerelemente zu beeinflussen. Sie können die Darstellung der Steuerelemente nach der Instanziierung der Karte über die entsprechenden MapOptions anpassen oder die Karte dynamisch bearbeiten, indem Sie setOptions() aufrufen, um die Kartenoptionen zu ändern.

Nicht alle Steuerelemente sind standardmäßig aktiviert. Weitere Informationen zum UI-Standardverhalten und möglichen Anpassungen Ihrerseits finden Sie unter Standard-UI unten.

Standard-UI

Wenn die Karte zu klein ist (200 × 200 px), werden standardmäßig alle Steuerelemente ausgeblendet. Sie können dieses Verhalten überschreiben, indem Sie explizit festlegen, dass ein Steuerelement sichtbar sein soll. Entsprechende Informationen finden Sie unter Steuerelemente zur Karte hinzufügen.

Mit Ausnahme des Steuerelements für den Vollbildmodus sind Verhalten und Darstellung der Steuerelemente auf Mobilgeräten und Computern identisch. Informationen zum Verhalten finden Sie in der Liste der Steuerelemente.

Das Tastatursteuerelement ist standardmäßig auf allen Geräten aktiviert.

Standard-UI deaktivieren

Bei Bedarf können Sie die standardmäßigen UI-Steuerschaltflächen der API komplett deaktivieren. Dazu setzen Sie die Eigenschaft disableDefaultUI der Karte (im MapOptions-Objekt) auf true. Dadurch werden alle UI-Steuerschaltflächen der Maps JavaScript API deaktiviert. Die Einstellung hat jedoch keine Auswirkungen auf Mausgesten oder Tastenkombinationen auf der Basiskarte. Diese werden über die Eigenschaften gestureHandling und keyboardShortcuts gesteuert.

Mit dem folgenden Code werden die UI-Schaltflächen deaktiviert:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      disableDefaultUI: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

window.initMap = initMap;
index.js
Beispiel ansehen

Testbeispiel

Steuerelemente zur Karte hinzufügen

Sie können die Oberfläche durch Entfernen, Hinzufügen oder Ändern von UI-Verhalten oder ‑Steuerelementen anpassen und dafür sorgen, dass künftige Updates keine Auswirkungen auf diese Einstellungen haben. Wenn nur vorhandenes Verhalten ergänzt oder geändert werden soll, müssen Sie das Steuerelement Ihrer Anwendung explizit hinzufügen.

Einige Steuerelemente werden standardmäßig auf der Karte angezeigt, andere nur, wenn Sie dies explizit festlegen. Steuerelemente werden über die folgenden Felder des MapOptions-Objekts hinzugefügt oder entfernt. Sie müssen auf true gesetzt werden, um sie einzublenden, und auf false, um sie auszublenden:

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

Standardmäßig werden alle Steuerelemente ausgeblendet, wenn die Karte kleiner als 200 × 200 px ist. Sie können dieses Verhalten überschreiben, indem Sie explizit festlegen, dass ein Steuerelement sichtbar sein soll. In der folgenden Tabelle sehen Sie beispielsweise, bei welcher Kartengröße und Einstellung des Felds zoomControl die Zoomsteuerung sichtbar ist:

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

Im folgenden Beispiel ist festgelegt, dass die Zoomsteuerung auf der Karte ausgeblendet und stattdessen das Steuerelement für den Maßstab eingeblendet wird. Beachten Sie, dass die Standard-UI nicht explizit deaktiviert wird. Diese Änderungen sind also Ergänzungen des UI-Standardverhaltens.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      zoomControl: false,
      scaleControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    zoomControl: false,
    scaleControl: true,
  });
}

window.initMap = initMap;
index.js
Beispiel ansehen

Testbeispiel

Optionen für Steuerelemente

Sie können verschiedene Steuerelemente konfigurieren und ihr Verhalten oder ihre Darstellung ändern. Die Steuerung für den Kartentyp kann beispielsweise als horizontale Leiste oder als Drop-down-Menü angezeigt werden.

Diese Steuerelemente werden beim Erstellen der Karte geändert, indem die entsprechenden Optionsfelder innerhalb des MapOptions-Objekts angepasst werden.

Optionen zum Ändern der Steuerung für den Kartentyp sind beispielsweise im Feld mapTypeControlOptions angegeben. Die Steuerung für den Kartentyp kann als eine der folgenden style-Optionen angezeigt werden:

  • Bei google.maps.MapTypeControlStyle.HORIZONTAL_BAR werden die einzelnen Steuerelemente als Schaltflächen auf einer horizontalen Leiste wie in Google Maps angezeigt.
  • Bei google.maps.MapTypeControlStyle.DROPDOWN_MENU wird eine einzelne Schaltfläche angezeigt, über die ein Drop-down-Menü zur Auswahl des Kartentyps geöffnet wird.
  • Bei google.maps.MapTypeControlStyle.DEFAULT wird das Standardverhalten verwendet, das sich nach der Bildschirmgröße richtet und in zukünftigen API-Versionen ändern kann.

Wenn Sie Optionen für ein Steuerelement ändern, sollten Sie es zusätzlich explizit aktivieren. Dazu setzen Sie den entsprechenden MapOptions-Wert auf true. Wenn beispielsweise eine Steuerung für den Kartentyp als DROPDOWN_MENU angezeigt werden soll, müssen Sie den folgenden Code im MapOptions-Objekt verwenden:

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

Im folgenden Beispiel wird gezeigt, wie Sie Standardposition und ‑stil von Steuerelementen ändern.

TypeScript

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

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// You can set control options to change the default position or style of many
// of the map controls.
function initMap() {
  const 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"],
    },
  });
}

window.initMap = initMap;
index.js
Beispiel ansehen

Testbeispiel

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

Einstellungen ändern

Die Darstellung eines Steuerelements wird beim Erstellen der Karte im MapOptions-Objekt der Karte über die folgenden Felder konfiguriert:

  • zoomControl aktiviert bzw. deaktiviert die Zoomsteuerung. Sie ist standardmäßig sichtbar und wird unten rechts auf der Karte angezeigt. Im Feld zoomControlOptions werden zusätzlich die ZoomControlOptions festgelegt, die für dieses Steuerelement verwendet werden sollen.
  • cameraControl aktiviert bzw. deaktiviert die Kamerasteuerung. Dieses Steuerelement ist standardmäßig auf Karten im Betakanal sichtbar. Im Feld cameraControlOptions werden zusätzlich die CameraControlOptions festgelegt, die für dieses Steuerelement verwendet werden sollen.
  • mapTypeControl aktiviert bzw. deaktiviert die Steuerung für den Kartentyp, mit der Nutzer zwischen verschiedenen Kartentypen umschalten können, etwa zwischen Standardkarte oder Satellit. Sie ist standardmäßig sichtbar und wird oben links auf der Karte angezeigt. Im Feld mapTypeControlOptions werden zusätzlich die MapTypeControlOptions festgelegt, die für dieses Steuerelement verwendet werden sollen.
  • streetViewControl aktiviert bzw. deaktiviert das Pegman-Steuerelement, mit dem der Nutzer ein Street View-Panorama aktivieren kann. Es ist standardmäßig sichtbar und wird unten rechts auf der Karte angezeigt. Im Feld streetViewControlOptions werden zusätzlich die StreetViewControlOptions festgelegt, die für dieses Steuerelement verwendet werden sollen.
  • Über rotateControl wird eine Steuerung für die Rotation aktiviert bzw. deaktiviert, mit der Nutzer die Ausrichtung von 45°-Bildern steuern können. Ob diese Steuerung angezeigt wird, hängt standardmäßig davon ab, ob für den gegebenen Kartentyp bei der aktuellen Zoomstufe und Position 45°-Bilder vorhanden sind oder nicht. Sie können ihr Verhalten ändern. Dazu legen Sie im Feld rotateControlOptions der Karte fest, welche RotateControlOptions verwendet werden sollen. Die Steuerung wird nicht eingeblendet, wenn keine 45 °-Bilder verfügbar sind.
  • scaleControl aktiviert bzw. deaktiviert das Steuerelement für den Maßstab, das einen Kartenmaßstab enthält. Standardmäßig wird dieses Steuerelement nicht angezeigt. Wenn es aktiviert ist, wird es immer unten rechts auf der Karte angezeigt. Im Feld scaleControlOptions werden zusätzlich die ScaleControlOptions festgelegt, die für dieses Steuerelement verwendet werden sollen.
  • fullscreenControl aktiviert bzw. deaktiviert das Steuerelement für den Vollbildmodus. Auf Computern und Android-Geräten ist dieses Steuerelement standardmäßig aktiviert. Wenn es aktiviert ist, wird es oben rechts auf der Karte angezeigt. Im Feld fullscreenControlOptions werden zusätzlich die FullscreenControlOptions festgelegt, die für dieses Steuerelement verwendet werden sollen.

Hinweis: Sie können Optionen für Steuerelemente festlegen, die Sie anfangs deaktiviert haben.

Positionierung der Steuerelemente

Die meisten Optionen für Steuerelemente enthalten eine position-Eigenschaft des Typs ControlPosition, über die festgelegt wird, wo auf der Karte das Steuerelement platziert werden soll. Die Positionierung dieser Steuerelemente ist nicht absolut. Stattdessen ordnet die API die Steuerelemente auf intelligente Weise an. Dabei werden vorhandene Karten- oder andere Steuerelemente sowie die jeweiligen Einschränkungen (z. B. die Kartengröße) berücksichtigt.

Hinweis: Es kann nicht garantiert werden, dass die Steuerelemente bei komplizierten Layouts nicht überlappen. Die API wird jedoch versuchen, sie intelligent anzuordnen.

Folgende Positionen werden für Steuerelemente unterstützt:

  • Mit TOP_CENTER wird festgelegt, dass das Steuerelement oben in der Mitte der Karte platziert werden soll.
  • Mit TOP_LEFT wird festgelegt, dass das Steuerelement links oben auf der Karte platziert werden soll. Eventuell vorhandene Unterelemente werden in Richtung der oberen Kartenmitte verteilt.
  • Mit TOP_RIGHT wird festgelegt, dass das Steuerelement rechts oben auf der Karte platziert werden soll. Eventuell vorhandene Unterelemente werden in Richtung der oberen Kartenmitte verteilt.
  • Mit LEFT_TOP wird festgelegt, dass das Steuerelement oben links auf der Karte, aber unter den TOP_LEFT-Elementen platziert werden soll.
  • Mit RIGHT_TOP wird festgelegt, dass das Steuerelement rechts oben auf der Karte, aber unter den TOP_RIGHT-Elementen platziert werden soll.
  • Mit LEFT_CENTER wird festgelegt, dass das Steuerelement links auf der Karte zwischen den TOP_LEFT- und BOTTOM_LEFT-Positionen platziert werden soll.
  • Mit RIGHT_CENTER wird festgelegt, dass das Steuerelement rechts auf der Karte zwischen den TOP_RIGHT- und BOTTOM_RIGHT-Positionen platziert werden soll.
  • Mit LEFT_BOTTOM wird festgelegt, dass das Steuerelement links unten auf der Karte, aber über den BOTTOM_LEFT-Elementen platziert werden soll.
  • Mit RIGHT_BOTTOM wird festgelegt, dass das Steuerelement rechts unten auf der Karte, aber über den BOTTOM_RIGHT-Elementen platziert werden soll.
  • Mit BOTTOM_CENTER wird festgelegt, dass das Steuerelement unten in der Mitte der Karte platziert werden soll.
  • Mit BOTTOM_LEFT wird festgelegt, dass das Steuerelement links unten auf der Karte platziert werden soll. Eventuell vorhandene Unterelemente werden in Richtung der unteren Kartenmitte verteilt.
  • Mit BOTTOM_RIGHT wird festgelegt, dass das Steuerelement rechts unten auf der Karte platziert werden soll. Eventuell vorhandene Unterelemente werden in Richtung der unteren Kartenmitte verteilt.

Diese Positionen können mit denen von UI-Elementen überlappen, die sie nicht verschieben können (z. B. das Copyright und Google-Logo). In diesen Fällen werden die Steuerelemente gemäß der für jede Position angegebenen Logik so nah wie möglich an der angegebenen Position platziert.

Das folgende Beispiel zeigt eine einfache Karte, auf der alle Steuerelemente aktiviert und an verschiedenen Positionen platziert sind.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      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,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const 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,
  });
}

window.initMap = initMap;
index.js
Beispiel ansehen

Testbeispiel

Benutzerdefinierte Steuerelemente

Sie können nicht nur den Stil und die Position vorhandener API-Steuerelemente ändern, sondern auch Ihre eigenen Steuerelemente für die Interaktion mit Nutzern erstellen. Steuerelemente sind unbewegliche Widgets, die an einer absoluten Position über einer Karte schweben. Im Unterschied dazu bewegen sich Overlays zusammen mit der zugrunde liegenden Karte mit. Grundsätzlich ist ein Steuerelement ein <div>-Element, das eine absolute Position auf der Karte hat, dem Nutzer ein UI-Element anzeigt und die Interaktion mit dem Nutzer oder der Karte ermöglicht, in der Regel über einen Event-Handler.

Beim Erstellen benutzerdefinierter Steuerelemente sind einige Regeln zu beachten. Die folgenden Richtlinien können jedoch als Best Practices herangezogen werden:

  • Definieren Sie geeignete CSS für die anzuzeigenden Steuerelemente.
  • Lassen Sie Interaktionen mit dem Nutzer oder der Karte über Event-Handler verarbeiten, entweder für Änderungen an den Karteneigenschaften oder für Nutzerereignisse, z. B. 'click'-Ereignisse.
  • Erstellen Sie ein <div>-Element für das Steuerelement und fügen Sie es der Eigenschaft controls der Map hinzu.

Diese Punkte werden nachfolgend einzeln erläutert.

Benutzerdefinierte Steuerelemente entwerfen

Wie Sie Ihr Steuerelement gestalten, bleibt Ihnen überlassen. Allgemein empfehlen wir, dass Sie die gesamte Darstellung Ihres Steuerelements in einem einzelnen <div>-Element unterbringen, damit Sie das Steuerelement als eine Einheit bearbeiten können. Dieser Ansatz wird in den Beispielen unten verwendet.

Für das Entwerfen ansprechender Steuerelemente sind Kenntnisse über CSS und die DOM-Struktur erforderlich. Der folgende Code zeigt eine Funktion zum Erstellen eines Schaltflächenelements, mit dem die Karte so geschwenkt wird, dass sie auf Chicago zentriert ist.

function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";

  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

Ereignisse von benutzerdefinierten Steuerelementen verarbeiten

Damit ein Steuerelement nützlich ist, muss es eine bestimmte Funktion erfüllen. Welche das ist, liegt ganz bei Ihnen. Das Steuerelement kann auf Nutzereingaben oder Änderungen am Status der Map reagieren.

Verwenden Sie zum Reagieren auf Nutzereingaben den addEventListener(), der unterstützte DOM-Ereignisse verarbeitet. Mit dem folgenden Code-Snippet wird ein Listener für 'click'-Ereignisse im Browser hinzugefügt. Dieses Ereignis wird aus dem DOM und nicht von der Karte empfangen.

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

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

Benutzerdefinierte Steuerelemente barrierefrei machen

So sorgen Sie dafür, dass Steuerelemente auf Tastatureingaben reagieren und Screenreadern korrekt angezeigt werden:

  • Verwenden Sie für Schaltflächen, Formularelemente und Labels immer native HTML-Elemente. Setzen Sie DIV-Elemente nur als Container für native Steuerelemente ein, nie als interaktives UI-Element.
  • Verwenden Sie gegebenenfalls das Element label, das Attribut title oder das Attribut aria-label, um Angaben zu einem UI-Element zu machen.

Benutzerdefinierte Steuerelemente positionieren

Um benutzerdefinierte Steuerelemente auf der Karte zu positionieren, werden sie an den entsprechenden Stellen innerhalb der Eigenschaft controls des Map-Objekts platziert. Diese Eigenschaft enthält ein Array mit google.maps.ControlPosition-Werten. Um der Karte ein benutzerdefiniertes Steuerelement hinzuzufügen, fügen Sie den Node (in der Regel das <div>-Element) an einer entsprechenden ControlPosition ein. Informationen zu diesen Positionen finden Sie oben unter Positionierung der Steuerelemente.

Jede ControlPosition speichert ein MVCArray der Steuerelemente, die an dieser Position angezeigt werden. Wenn also Steuerelemente zu einer Position hinzugefügt oder von ihr entfernt werden, aktualisiert die API die Steuerelemente entsprechend.

Die API platziert Steuerelemente an den einzelnen Positionen in der Reihenfolge einer index-Eigenschaft. Die Steuerelemente mit einem niedrigeren Wert werden zuerst platziert. Zum Beispiel werden zwei benutzerdefinierte Steuerelemente an der Position BOTTOM_RIGHT entsprechend dieser Indexreihenfolge angeordnet, wobei niedrigere Indexwerte Vorrang haben. Standardmäßig werden alle benutzerdefinierten Steuerelemente nach den API-Standardsteuerelementen platziert. Sie können dieses Verhalten überschreiben, indem Sie für die Eigenschaft index eines Steuerelements einen negativen Wert festlegen. Links vom Logo oder rechts vom Copyright können keine benutzerdefinierten Steuerelemente platziert werden.

Mit dem folgenden Code wird ein neues benutzerdefiniertes Steuerelement erstellt und an der Position TOP_RIGHT auf der Karte eingefügt. Der Konstruktor wird nicht angezeigt.

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

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// 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_CENTER].push(centerControlDiv);

Beispiel für ein benutzerdefiniertes Steuerelement

Mit dem folgenden Code wird ein einfaches, wenn auch nicht besonders sinnvolles, Steuerelement erstellt. Dabei werden die Muster oben kombiniert. Dieses Steuerelement reagiert auf DOM-'click'-Ereignisse, indem es die Karte auf einen bestimmten standardmäßigen Standort zentriert:

TypeScript

let map: google.maps.Map;

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

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

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

  return controlButton;
}

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

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

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

/**
 * Creates a control that recenters the map on Chicago.
 */
function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

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

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement("div");
  // Create the control.
  const centerControl = createCenterControl(map);

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js
Beispiel ansehen

Testbeispiel

Status zu Steuerelementen hinzufügen

Steuerelemente können auch einen Status speichern. Das folgende Beispiel ist dem vorhergehenden ähnlich, das Steuerelement enthält aber zusätzlich die Schaltfläche „Set Home“, mit der ein neuer Startort für das Steuerelement festgelegt wird. Dazu wird innerhalb des Steuerelements die Eigenschaft home_ erstellt, um den Status zu speichern und Getter und Setter für den Status zu liefern.

TypeScript

let map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const 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", () => {
      const currentCenter = this.center_;

      this.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", () => {
      const newCenter = this.map_.getCenter()!;

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

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

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

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

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

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  map_;
  center_;
  constructor(controlDiv, map, center) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const 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", () => {
      const currentCenter = this.center_;

      this.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", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

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.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js
Beispiel ansehen

Testbeispiel