Steuerelemente

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Plattform auswählen: Android iOS JavaScript

Übersicht der Steuerelemente

Die über die Maps JavaScript API angezeigten Karten 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 aufnehmen. Alternativ können Sie nichts unternehmen und die Maps JavaScript API das gesamte Steuerungsverhalten übernehmen lassen.

Die folgende Karte zeigt die Standardsteuerelemente, die von der Maps JavaScript API angezeigt werden:

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

  • Über das Zoomsteuerelement können Sie die Schaltflächen „&“ und „+“ aufrufen, um die Zoomstufe der Karte zu ändern. Dieses Steuerelement wird standardmäßig rechts unten auf der Karte angezeigt.
  • Das Kartentyp-Steuerelement ist in einem Drop-down-Menü oder in einer horizontalen Schaltflächenleiste verfügbar, sodass der Nutzer einen Kartentyp auswählen kann (ROADMAP, SATELLITE, HYBRID oder TERRAIN). Dieses Steuerelement wird standardmäßig links oben auf der Karte angezeigt.
  • Das Street View-Steuerelement enthält ein Pegman-Symbol, das zur Aktivierung von Street View auf die Karte gezogen wird. Dieses Steuerelement wird standardmäßig rechts unten auf der Karte angezeigt.
  • Das Drehsteuerelement bietet eine Kombination aus Neigungs- und Drehoptionen für Karten mit Schrägaufnahmen. Dieses Steuerelement wird standardmäßig rechts unten auf der Karte angezeigt. Weitere Informationen findest du unter 45°-Bilder.
  • Das Maßstabssteuerelement zeigt den Kartenmaßstab. Dieses Steuerelement ist standardmäßig deaktiviert.
  • Das Vollbildsteuerelement bietet die Möglichkeit, die Karte im Vollbildmodus zu öffnen. Auf Computern und Mobilgeräten ist diese Steuerung standardmäßig aktiviert. Hinweis:Der Vollbildmodus wird von iOS nicht unterstützt. Die Vollbildsteuerung ist daher auf iOS-Geräten nicht sichtbar.
  • Das Steuerelement für Tastenkombinationen zeigt eine Liste der Tastenkombinationen für die Interaktion mit der Karte an.

Sie können nicht direkt auf diese Kartensteuerelemente zugreifen und sie ändern. Stattdessen ändern Sie die MapOptions-Felder der Karte und beeinflussen dadurch die Sichtbarkeit und Darstellung der Steuerelemente. Sie können die Darstellung der Steuerelemente nach der Instanziierung Ihrer Karte (mit der richtigen MapOptions) anpassen oder eine Karte dynamisch ändern. Rufen Sie dazu setOptions() auf, um die Kartenoptionen zu ändern.

Nicht alle Steuerelemente sind standardmäßig aktiviert. Informationen zum Standardverhalten der Benutzeroberfläche und zum Ändern dieses Verhaltens finden Sie unten unter Standardbenutzeroberfläche.

Die Standardbenutzeroberfläche

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

Die Funktionsweise und die Darstellung sind auf Mobilgeräten und Computern identisch. Die einzige Ausnahme sind Steuerelemente für den Vollbildmodus (siehe Verhalten in der Liste der Steuerelemente).

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

Standardbenutzeroberfläche deaktivieren

Sie können die Standard-UI-Schaltflächen der API auch vollständig deaktivieren. Setze dazu das Attribut disableDefaultUI der Karte (im Objekt MapOptions) auf true. Mit dieser Property werden alle UI-Steuerschaltflächen der Maps JavaScript API deaktiviert. Dies hat jedoch keine Auswirkungen auf Mausbewegungen oder Tastenkombinationen auf der Basiskarte, die über die Properties gestureHandling und keyboardShortcuts gesteuert werden.

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;

JavaScript

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

window.initMap = initMap;
Beispiel ansehen

Beispiel ausprobieren

Steuerelemente zur Karte hinzufügen

Sie können die Oberfläche anpassen, indem Sie UI-Verhalten oder -Steuerelemente entfernen, hinzufügen oder ändern. So sorgen Sie dafür, dass dieses Verhalten durch zukünftige Updates nicht verändert wird. Wenn Sie nur vorhandenes Verhalten hinzufügen oder ändern möchten, müssen Sie sicherstellen, dass das Steuerelement explizit Ihrer Anwendung hinzugefügt wird.

Einige Steuerelemente werden standardmäßig auf der Karte angezeigt, andere hingegen nur, wenn Sie sie ausdrücklich anfordern. Die Steuerelemente, die der Karte hinzugefügt oder daraus entfernt werden, sind in den folgenden MapOptions-Objektfeldern angegeben. Sie legen sie auf true fest, um sie sichtbar zu machen, oder auf false, um sie auszublenden:

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

Standardmäßig werden alle Steuerelemente ausgeblendet, wenn die Karte kleiner ist als 200x200 px. Sie können dieses Verhalten überschreiben, indem Sie explizit festlegen, dass das Steuerelement sichtbar sein soll. Die folgende Tabelle zeigt beispielsweise, ob das Zoomsteuerelement basierend auf der Kartengröße und der Einstellung des Felds zoomControl 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 wird die Karte so eingestellt, dass das Zoomsteuerelement ausgeblendet und das Steuerelement für die Skalierung angezeigt wird. Beachten Sie, dass die Standard-UI nicht explizit deaktiviert wird. Die Änderungen sind also ein Zusatz zur Standard-UI.

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;

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;
Beispiel ansehen

Beispiel ausprobieren

Optionen für Steuerelemente

Sie können mehrere Steuerelemente konfigurieren, um ihr Verhalten oder die Darstellung anzupassen. Das Kartentyp-Steuerelement kann beispielsweise als horizontale Leiste oder als Drop-down-Menü angezeigt werden.

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

Optionen zum Ändern des Kartentyp-Steuerelements sind beispielsweise im Feld mapTypeControlOptions angegeben. Das Kartentyp-Steuerelement kann in einer der folgenden style-Optionen angezeigt werden:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR zeigt das Array von Steuerelementen als Schaltflächen in einer horizontalen Leiste wie auf Google Maps an.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU zeigt ein einzelnes Steuerelement an, mit dem du den Kartentyp über ein Drop-down-Menü auswählen kannst.
  • google.maps.MapTypeControlStyle.DEFAULT zeigt das Standardverhalten an, das von der Bildschirmgröße abhängig ist und sich in zukünftigen Versionen der API ändern kann.

Wenn Sie Steuerelementoptionen ändern, sollten Sie das Steuerelement auch explizit aktivieren, indem Sie den entsprechenden MapOptions-Wert auf true setzen. Wenn du beispielsweise ein Kartentyp-Steuerelement für den DROPDOWN_MENU-Stil festlegen möchtest, verwende den folgenden Code im MapOptions-Objekt:

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

Im folgenden Beispiel wird gezeigt, wie Sie die Standardposition und den 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;

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;
Beispiel ansehen

Beispiel ausprobieren

Steuerelemente werden üblicherweise beim Erstellen der Karte konfiguriert. Sie können jedoch die Darstellung der Steuerelemente dynamisch ändern. Rufen Sie dazu die Methode setOptions() von Map auf und übergeben Sie neue Steuerelemente.

Steuerelemente bearbeiten

Sie geben die Darstellung eines Steuerelements an, wenn Sie die Karte über Felder im MapOptions-Objekt der Karte erstellen. Diese Felder sind unten dargestellt:

  • zoomControl aktiviert/deaktiviert das Zoomsteuerelement. Standardmäßig ist dieses Steuerelement sichtbar und wird rechts unten auf der Karte angezeigt. Im Feld zoomControlOptions wird zusätzlich die ZoomControlOptions angegeben, die für dieses Steuerelement verwendet werden soll.
  • mapTypeControl aktiviert/deaktiviert das Kartentyp-Steuerelement, mit dem Nutzer zwischen Kartentypen wechseln können (z. B. Karte und Satellit). Dieses Steuerelement ist standardmäßig sichtbar und wird links oben auf der Karte angezeigt. Im Feld mapTypeControlOptions wird zusätzlich die MapTypeControlOptions angegeben, die für dieses Steuerelement verwendet werden soll.
  • streetViewControl aktiviert/deaktiviert das Pegman-Steuerelement, mit dem der Nutzer ein Street View-Panorama aktivieren kann. Dieses Steuerelement ist standardmäßig sichtbar und wird rechts unten auf der Karte angezeigt. Im Feld streetViewControlOptions wird zusätzlich die StreetViewControlOptions angegeben, die für dieses Steuerelement verwendet werden soll.
  • rotateControl aktiviert/deaktiviert die Anzeige eines Drehsteuerelements zur Steuerung der Ausrichtung von 45°-Bildern. Standardmäßig wird die Anwesenheit des Steuerelements anhand des Vorhandenseins oder Fehlens von 45°-Bildern für den angegebenen Kartentyp beim aktuellen Zoom- und Standort bestimmt. Sie können das Verhalten des Steuerelements ändern, indem Sie die rotateControlOptions der Karte festlegen und die zu verwendende RotateControlOptions angeben. Sie können das Steuerelement nicht anzeigen lassen, wenn derzeit keine 45°-Bilder verfügbar sind.
  • scaleControl aktiviert/deaktiviert das Scale-Steuerelement, das eine einfache Kartenskalierungsfunktion beinhaltet. Standardmäßig wird dieses Steuerelement nicht angezeigt. Wenn Sie diese Option aktivieren, wird sie immer unten rechts auf der Karte angezeigt. scaleControlOptions gibt außerdem die ScaleControlOptions an, die für dieses Steuerelement verwendet werden soll.
  • fullscreenControl aktiviert/deaktiviert das Steuerelement, mit dem die Karte im Vollbildmodus geöffnet wird. Auf Computern und Android-Geräten ist dieses Steuerelement standardmäßig aktiviert. Wenn das Steuerelement aktiviert ist, wird es in der Karte oben rechts eingeblendet. fullscreenControlOptions gibt außerdem die FullscreenControlOptions an, die für dieses Steuerelement verwendet werden soll.

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

Positionierung der Steuerelemente

Die meisten Steuerelementoptionen enthalten die Property position (vom Typ ControlPosition), die angibt, wo auf der Karte das Steuerelement platziert werden soll. Die Positionierung dieser Steuerelemente ist nicht absolut. Stattdessen werden die Steuerelemente von der API intelligent um die vorhandenen Kartenelemente oder andere Steuerelemente innerhalb der gegebenen Einschränkungen (wie der Kartengröße) fließen.

Hinweis: Es kann nicht garantiert werden, dass die Steuerelemente keine vorgegebenen komplizierten Layouts überschneiden. Die API versucht jedoch, sie intelligent anzuordnen.

Folgende Positionen werden für Steuerelemente unterstützt:

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

Diese Positionen können mit den Positionen von UI-Elementen zusammenfallen, deren Placements du nicht ändern kannst (z. B. Urheberrechte und das Google-Logo). In diesen Fällen fließen die Steuerelemente gemäß der für jede Position angegebenen Logik und werden so nah wie möglich an der angegebenen Position angezeigt.

Das folgende Beispiel zeigt eine einfache Karte, bei der alle Steuerelemente an verschiedenen Positionen aktiviert 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;

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;
Beispiel ansehen

Beispiel ausprobieren

Benutzerdefinierte Steuerelemente

Neben der Änderung des Stils und der Position vorhandener API-Steuerelemente kannst du auch eigene Steuerelemente für die Interaktion mit dem Nutzer erstellen. Steuerelemente sind unbewegliche Widgets, die an einer absoluten Position über einer Karte schweben. Sie stehen im Gegensatz zu Overlays, die sich mit der zugrunde liegenden Karte bewegen. Im Grunde ist ein Steuerelement ein <div>-Element, das eine absolute Position auf der Karte hat, dem Nutzer ein UI-Element anzeigt und Interaktionen mit dem Nutzer oder mit der Karte verarbeitet, normalerweise über einen Ereignis-Handler.

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

  • Definieren Sie geeignete CSS für die anzuzeigenden Steuerelemente.
  • Verarbeiten Sie die Interaktion mit dem Nutzer oder der Karte über Ereignis-Handler entweder für Änderungen an den Karteneigenschaften oder für Nutzerereignisse, z. B. 'click'-Ereignisse.
  • Erstelle ein <div>-Element, das das Steuerelement enthält, und füge dieses Element zum Attribut controls von Map hinzu.

Diese Punkte werden nachfolgend im Einzelnen erläutert.

Benutzerdefinierte Steuerelemente zeichnen

Es liegt bei Ihnen, wie Sie Ihre Steuerelemente zeichnen. Im Allgemeinen empfehlen wir, dass du die gesamte Darstellung deines Steuerelements in einem einzelnen <div>-Element unterteilst, damit du dein Steuerelement als eine Einheit bearbeiten kannst. Wir verwenden dieses Entwurfsmuster in den nachfolgenden Beispielen.

Für das Design attraktiver Steuerelemente sind Kenntnisse über CSS- und DOM-Strukturen erforderlich. Der folgende Code zeigt eine Funktion zum Erstellen eines Schaltflächenelements, mit dem die Karte so schwenkt 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 bearbeiten

Damit ein Steuerelement sinnvoll ist, muss es einer Interaktion dienen. Die Kontrolle liegt bei Ihnen. Das Steuerelement kann auf Nutzereingaben oder auf Änderungen im Status von Map reagieren.

Verwenden Sie zum Beantworten von Nutzereingaben addEventListener(), das unterstützte DOM-Ereignisse verarbeitet. Mit dem folgenden Code-Snippet wird ein Listener für das Browserereignis 'click' hinzugefügt. Beachten Sie, dass dieses Ereignis aus dem DOM und nicht von der Karte empfangen wird.

// 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 zugänglich machen

So sorgen Sie dafür, dass die Steuerelemente Tastaturereignisse empfangen und den Screenreadern korrekt angezeigt werden:

  • Verwenden Sie für Schaltflächen, Formularelemente und Labels immer native HTML-Elemente. Verwenden Sie nur ein DIV-Element als Container für native Steuerelemente und verwenden Sie es niemals als interaktives UI-Element.
  • Verwende gegebenenfalls das label-Attribut, das title-Attribut oder das aria-label-Attribut, um Informationen zu einem UI-Element anzugeben.

Benutzerdefinierte Steuerelemente positionieren

Benutzerdefinierte Steuerelemente werden auf der Karte platziert, indem sie innerhalb der controls-Property des Map-Objekts an geeigneten Positionen platziert werden. Dieses Attribut enthält ein Array von google.maps.ControlPositions. Sie fügen der Karte ein benutzerdefiniertes Steuerelement hinzu. Dazu fügen Sie Node (in der Regel <div>) einem entsprechenden ControlPosition hinzu. Informationen zu diesen Positionen finden Sie oben unter Positionierung steuern.

Jedes ControlPosition-Element speichert ein MVCArray der Steuerelemente, die an dieser Position angezeigt werden. Wenn Steuerelemente an der Position hinzugefügt oder entfernt werden, werden die Steuerelemente entsprechend von der API aktualisiert.

Die API platziert Steuerelemente an jeder Position in der Reihenfolge einer index-Property. Steuerelemente mit einem niedrigeren Indexeintrag werden zuerst platziert. So werden beispielsweise zwei benutzerdefinierte Steuerelemente an der Position BOTTOM_RIGHT gemäß dieser Indexreihenfolge angeordnet, wobei niedrigere Indexwerte Vorrang haben. Standardmäßig werden alle benutzerdefinierten Steuerelemente nach der Platzierung von API-Standardsteuerelementen platziert. Sie können dieses Verhalten überschreiben, indem Sie das Attribut index eines Steuerelements als negativen Wert festlegen. Benutzerdefinierte Steuerelemente dürfen nicht links neben dem Logo oder rechts neben den Urheberrechten platziert werden.

Mit dem folgenden Code wird ein neues benutzerdefiniertes Steuerelement erstellt und an der Position TOP_RIGHT der Karte hinzugefü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

Das folgende Steuerelement ist einfach (wenn auch nicht besonders nützlich) und kombiniert die oben beschriebenen Muster. Dieses Steuerelement reagiert auf DOM-'click'-Ereignisse, indem es die Karte auf einen bestimmten Standardstandort 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;

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;
Beispiel ansehen

Beispiel ausprobieren

Zustand zu Steuerelementen hinzufügen

In Steuerelementen kann auch ein Zustand hinterlegt werden. Das folgende Beispiel ähnelt dem oben gezeigten Beispiel, aber das Steuerelement enthält eine zusätzliche Schaltfläche „Als Startpunkt festlegen“, mit der das Steuerelement zum Anzeigen eines neuen Ausgangsstandorts festgelegt wird. Dazu erstellen wir eine home_-Property im Steuerelement, um diesen Status zu speichern und Getter und Setter für diesen Status bereitzustellen.

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;

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;
Beispiel ansehen

Beispiel ausprobieren