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:

Im Uhrzeigersinn von oben links: Kartentyp, Vollbild, Kamera, Street View, Tastenkombinationen.

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

• 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.
• Ü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 Vollbild-Steuerelement ist daher auf iOS-Geräten nicht sichtbar.
• Die Kamerasteuerung bietet sowohl Zoom- als auch Schwenkfunktionen.
• 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 3D-Bildern. Sie wird standardmäßig unten rechts auf der Karte angezeigt. Weitere Informationen finden Sie unter 3D-Übersicht.
• Das Steuerelement für den Maßstab zeigt den Kartenmaßstab an. Es ist standardmäßig deaktiviert.
• Ü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 Desktop-Geräten 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-Steuerelemente 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-Buttons deaktiviert:

TypeScript

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.ts

Hinweis: Lesen Sie sich hierzu den Leitfaden zur Verwendung von TypeScript und Google Maps durch.

JavaScript

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.js

Beispiel ansehen

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:

{
  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 cameraControl die Kamerasteuerung sichtbar ist:

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

Im folgenden Beispiel ist festgelegt, dass die Kamerasteuerung 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

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.ts

Hinweis: Lesen Sie sich hierzu den Leitfaden zur Verwendung von TypeScript und Google Maps durch.

JavaScript

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.js

Beispiel ansehen

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 Buttons auf einer horizontalen Leiste wie in Google Maps angezeigt.
• Bei google.maps.MapTypeControlStyle.DROPDOWN_MENU wird ein einzelner Button angezeigt, über den 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

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [MapTypeId.ROADMAP, MapTypeId.TERRAIN],
        position: ControlPosition.TOP_CENTER,
    },
});
index.ts

Hinweis: Lesen Sie sich hierzu den Leitfaden zur Verwendung von TypeScript und Google Maps durch.

JavaScript

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [MapTypeId.ROADMAP, MapTypeId.TERRAIN],
        position: ControlPosition.TOP_CENTER,
    },
});
index.js

Beispiel ansehen

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:

• cameraControl aktiviert bzw. deaktiviert die Kamerasteuerung, mit der Nutzer die Karte zoomen und schwenken können. Dieses Steuerelement ist standardmäßig auf allen Karten sichtbar. Im Feld cameraControlOptions werden zusätzlich die CameraControlOptions festgelegt, die für diese Steuerung 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 3D-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 3D-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. Das Steuerelement wird nur auf 3D-Basiskarten angezeigt.
• scaleControl aktiviert bzw. deaktiviert das Steuerelement für den Maßstab, das eine Funktion für die Skalierung der Karte beinhaltet. 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.

Es gibt zwei Arten von Kontrollpositionen: Legacy und logisch. Die Verwendung von logischen Werten wird empfohlen, um sowohl Layoutkontexte von links nach rechts (LTR) als auch von rechts nach links (RTL) automatisch zu unterstützen. Referenzhandbuch ansehen

In den folgenden Tabellen sind die unterstützten Positionen für Steuerelemente in LTR- und RTL-Kontexten aufgeführt.

LTR-Positionen

Position (LTR-Kontext)	Logische Konstante (empfohlen)	Legacy-Konstante
Top Left	BLOCK_START_INLINE_START	TOP_LEFT
Oben mittig	BLOCK_START_INLINE_CENTER	TOP_CENTER
Rechts oben	BLOCK_START_INLINE_END	TOP_RIGHT
Links oben	INLINE_START_BLOCK_START	LEFT_TOP
Left Center	INLINE_START_BLOCK_CENTER	LEFT_CENTER
Left Bottom	INLINE_START_BLOCK_END	LEFT_BOTTOM
Right Top	INLINE_END_BLOCK_START	RIGHT_TOP
Rechts mittig	INLINE_END_BLOCK_CENTER	RIGHT_CENTER
Rechts unten	INLINE_END_BLOCK_END	RIGHT_BOTTOM
Bottom Left	BLOCK_END_INLINE_START	BOTTOM_LEFT
Unten in der Mitte	BLOCK_END_INLINE_CENTER	BOTTOM_CENTER
Unten rechts	BLOCK_END_INLINE_END	BOTTOM_RIGHT

RTL-Positionen

Position (RTL-Kontext)	Logische Konstante (empfohlen)	Legacy-Konstante
Rechts oben	BLOCK_START_INLINE_START	TOP_RIGHT
Oben mittig	BLOCK_START_INLINE_CENTER	TOP_CENTER
Top Left	BLOCK_START_INLINE_END	TOP_LEFT
Right Top	INLINE_START_BLOCK_START	RIGHT_TOP
Rechts mittig	INLINE_START_BLOCK_CENTER	RIGHT_CENTER
Rechts unten	INLINE_START_BLOCK_END	RIGHT_BOTTOM
Links oben	INLINE_END_BLOCK_START	LEFT_TOP
Left Center	INLINE_END_BLOCK_CENTER	LEFT_CENTER
Left Bottom	INLINE_END_BLOCK_END	LEFT_BOTTOM
Unten rechts	BLOCK_END_INLINE_START	BOTTOM_RIGHT
Unten in der Mitte	BLOCK_END_INLINE_CENTER	BOTTOM_CENTER
Bottom Left	BLOCK_END_INLINE_END	BOTTOM_LEFT

Klicken Sie auf die Labels, um die Karte zwischen LTR- und RTL-Modus umzuschalten.

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. Es kann nicht garantiert werden, dass die Steuerelemente bei komplizierten Layouts nicht überlappen. Die API wird jedoch versuchen, sie intelligent anzuordnen.

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

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    // Request needed libraries.
    const [{ MapTypeControlStyle }, { ControlPosition }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Set the map's controls options.
    innerMap.setOptions({
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: MapTypeControlStyle.HORIZONTAL_BAR,
            position: ControlPosition.BLOCK_START_INLINE_CENTER,
        },
        zoomControl: true,
        zoomControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_CENTER,
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_START,
        },
        fullscreenControl: true,
    });
}

void init();
index.ts

Hinweis: Lesen Sie sich hierzu den Leitfaden zur Verwendung von TypeScript und Google Maps durch.

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    // Request needed libraries.
    const [{ MapTypeControlStyle }, { ControlPosition }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Set the map's controls options.
    innerMap.setOptions({
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: MapTypeControlStyle.HORIZONTAL_BAR,
            position: ControlPosition.BLOCK_START_INLINE_CENTER,
        },
        zoomControl: true,
        zoomControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_CENTER,
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_START,
        },
        fullscreenControl: true,
    });
}

void init();
index.js

Beispiel ansehen

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. In den folgenden Codebeispielen wird gezeigt, wie Sie ein benutzerdefiniertes Steuerelement sowohl mit deklarativem HTML als auch mit programmatischen Methoden hinzufügen.

Deklaratives CSS

Die folgenden CSS-Stile sorgen für ein Erscheinungsbild, das mit den Standardsteuerelementen übereinstimmt. Verwenden Sie diese Stile für beide Beispiele unten:

.streetview-toggle-button {
  align-items: center;
  background: white;
  border: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  color: rgb(86, 86, 86);
  cursor: pointer;
  display: flex;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  height: 40px;
  justify-content: center;
  margin: 10px 0;
  padding: 0 17px;
}

.streetview-toggle-button:hover {
  background: #f4f4f4;
  color: #000;
}

Deklaratives HTML

Diese Code-Snippets zeigen, wie Sie ein benutzerdefiniertes Steuerelement deklarativ erstellen. Im HTML-Code wird ein DIV-Element mit der ID container verwendet, um das Steuerelement zu positionieren. Dieses ist im gmp-map-Element verschachtelt und die Schaltfläche wird dem DIV-Element hinzugefügt. Das Attribut slot ist auf control-inline-start-block-start festgelegt, um das Steuerelement in der oberen linken Ecke der Karte zu positionieren.

<gmp-map
  center="41.027748173921374, -92.41852445367961"
  zoom="13"
  map-id="DEMO_MAP_ID">
  <div id="container" slot="control-inline-start-block-start">
    <input type="button"
    id="streetview-toggle-button"
    class="button"
    value="Click this button" />
  </div>
</gmp-map>

Im JavaScript wird getElementById() verwendet, um das DIV-Element und den Button zu finden. Dem Button wird ein Event-Listener hinzugefügt und der Button wird an das DIV-Element angehängt.

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Get the control button from the HTML page.
const controlButton = document.getElementById("streetview-toggle-button");

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

Programmatisches JavaScript

In diesem Code-Snippet wird gezeigt, wie ein Schaltflächen-Steuerelement programmatisch erstellt wird. Die CSS-Stile sind oben definiert.

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Position the control in the top left corner of the map.
container.slot = "control-block-start-inline-start";

// Create the control.
const controlButton = document.createElement("button");
controlButton.classList.add("streetview-toggle-button");
controlButton.textContent = "Click this button";
controlButton.type = "button";

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(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 Buttons, 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

Verwenden Sie das Attribut slot, um benutzerdefinierte Steuerelemente zu positionieren, und geben Sie die gewünschte Position an. 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.

Mit dem folgenden Code wird ein neues benutzerdefiniertes Steuerelement erstellt und an der Position BLOCK_START_INLINE_END (rechts oben im LTR-Kontext) auf der Karte eingefügt. Der Konstruktor wird nicht angezeigt.

// 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);

// Push the control to the BLOCK_START_INLINE_END position.
innerMap.controls[google.maps.ControlPosition.BLOCK_START_INLINE_END].push(centerControlDiv);

Wenn Sie die Position für ein benutzerdefiniertes Steuerelement deklarativ festlegen möchten, legen Sie das Attribut slot im HTML-Code fest:

<gmp-map center="30.72851568848909, -81.54675994068873" zoom="12">
  <div slot="control-block-start-inline-end">
    <!-- Control HTML -->
  </div>
</gmp-map>

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

Hinweis: Lesen Sie sich hierzu den Leitfaden zur Verwendung von TypeScript und Google Maps durch.

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

Hinweis: Der JavaScript-Code wird aus dem TypeScript-Snippet kompiliert.

Beispiel ansehen

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 den Button „Set Home“, mit dem 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 innerMap: google.maps.Map;
const mapElement = document.querySelector('gmp-map')!;

let center: google.maps.LatLngLiteral | google.maps.LatLng = {
    lat: 41.85,
    lng: -87.65,
};

async function init() {
    await google.maps.importLibrary('maps');

    innerMap = mapElement.innerMap;

    // Get the button UI elements.
    const centerMapButton = document.getElementById(
        'btnCenterMap'
    ) as HTMLInputElement;
    const setCenterButton = document.getElementById(
        'btnSetCenter'
    ) as HTMLInputElement;

    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    centerMapButton.addEventListener('click', () => {
        const currentCenter = center;
        innerMap.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterButton.addEventListener('click', () => {
        const newCenter = innerMap.getCenter();

        if (newCenter) {
            center = newCenter;
        }
    });
}

void init();
index.ts

Hinweis: Lesen Sie sich hierzu den Leitfaden zur Verwendung von TypeScript und Google Maps durch.

JavaScript

let innerMap;
const mapElement = document.querySelector('gmp-map');

let center = {
    lat: 41.85,
    lng: -87.65,
};

async function init() {
    await google.maps.importLibrary('maps');

    innerMap = mapElement.innerMap;

    // Get the button UI elements.
    const centerMapButton = document.getElementById('btnCenterMap');
    const setCenterButton = document.getElementById('btnSetCenter');

    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    centerMapButton.addEventListener('click', () => {
        const currentCenter = center;
        innerMap.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterButton.addEventListener('click', () => {
        const newCenter = innerMap.getCenter();

        if (newCenter) {
            center = newCenter;
        }
    });
}

void init();
index.js

Beispiel ansehen