Steuerelemente

Ü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 in der 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 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:

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

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

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:

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.

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

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

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.

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

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

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. Es ist standardmäßig auf allen Karten sichtbar. Im Feld cameraControlOptions wird zusätzlich die CameraControlOptions festgelegt, die für dieses Steuerelement verwendet werden soll.
• 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 wird zusätzlich die MapTypeControlOptions festgelegt, die für dieses Steuerelement verwendet werden soll.
• 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 wird zusätzlich die StreetViewControlOptions festgelegt, die für dieses Steuerelement verwendet werden soll.
• Ü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. Die Steuerung 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 wird zusätzlich die ScaleControlOptions festgelegt, die für dieses Steuerelement verwendet werden soll.
• 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 wird zusätzlich die FullscreenControlOptions festgelegt, die für dieses Steuerelement verwendet werden soll.

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 logische Kontrollpositionen. Die Verwendung von logischen Werten wird empfohlen, um automatisch sowohl Layoutkontexte von links nach rechts (LTR) als auch von rechts nach links (RTL) zu unterstützen. Referenzhandbuch ansehen

In den folgenden Tabellen sind die unterstützten Steuerpositionen in LTR- und RTL-Kontexten aufgeführt.

Klicken Sie auf die Labels, um zwischen dem LTR- und dem RTL-Modus zu wechseln.

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.

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

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

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 zeichnen

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. Die folgenden Codebeispiele zeigen, 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

In diesen Code-Snippets wird gezeigt, 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 Element ist im gmp-map-Element verschachtelt und die Schaltfläche wird dem DIV-Element hinzugefügt. Das Attribut slot wird auf control-inline-start-block-start gesetzt, um das Steuerelement oben links auf 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 und die Schaltfläche zu finden. Der Schaltfläche wird ein Event-Listener hinzugefügt und die Schaltfläche wird an das DIV 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ächensteuerelement 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 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

Mit dem Attribut slot können Sie benutzerdefinierte Steuerelemente positionieren. Geben Sie dazu 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 auf der Karte eingefügt (rechts oben im LTR-Kontext). 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:

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

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

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.

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

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