Elementy sterujące

Omówienie ustawień

Mapy wyświetlane za pomocą interfejsu Maps JavaScript API zawierają elementy interfejsu, które umożliwiają użytkownikom interakcję z mapą. Te elementy są nazywane elementami sterującymi. W aplikacji możesz uwzględnić różne ich wersje. Możesz też nie robić nic i pozwolić interfejsowi Maps JavaScript API na obsługę wszystkich zachowań elementów sterujących.

Poniższa mapa pokazuje domyślny zestaw elementów sterujących wyświetlanych przez interfejs Maps JavaScript API:

Zgodnie z ruchem wskazówek zegara od lewego górnego rogu: Typ mapy, Pełny ekran, Aparat, Street View, Skróty klawiszowe.

Poniżej znajdziesz listę wszystkich elementów sterujących, których możesz używać na mapach:

• Kontrolka typu mapy jest dostępna w stylu menu lub poziomego paska przycisków, co pozwala użytkownikowi wybrać typ mapy (ROADMAP, SATELLITE, HYBRID lub TERRAIN). Domyślnie ta kontrolka pojawia się w lewym górnym rogu mapy.
• Element sterujący pełnym ekranem umożliwia otwarcie mapy w trybie pełnoekranowym. To ustawienie jest domyślnie włączone na komputerach i urządzeniach mobilnych. Uwaga: iOS nie obsługuje funkcji pełnego ekranu. Dlatego element sterujący pełnym ekranem nie jest widoczny na urządzeniach z iOS.
• Sterowanie kamerą obejmuje zarówno powiększanie, jak i przesuwanie.
• Element sterujący Street View zawiera ikonę Pegmana, którą można przeciągnąć na mapę, aby włączyć Street View. Ten element sterujący domyślnie pojawia się w prawym dolnym rogu mapy.
• Element sterujący obracaniem udostępnia kombinację opcji przechylania i obracania map zawierających zdjęcia 3D. Ten element sterujący domyślnie pojawia się w prawym dolnym rogu mapy. Więcej informacji znajdziesz w artykule Omówienie funkcji 3D.
• Kontrolka skali wyświetla element skali mapy. Domyślnie ta opcja jest wyłączona.
• Element sterujący skrótami klawiszowymi wyświetla listę skrótów klawiszowych do interakcji z mapą.

Nie masz bezpośredniego dostępu do tych elementów sterujących mapą i nie możesz ich modyfikować. Zamiast tego modyfikujesz pola MapOptions mapy, które wpływają na widoczność i prezentację elementów sterujących. Możesz dostosować prezentację elementów sterujących podczas tworzenia instancji mapy (za pomocą odpowiedniego obiektu MapOptions) lub dynamicznie modyfikować mapę, wywołując metodę setOptions(), aby zmienić opcje mapy.

Nie wszystkie te ustawienia są domyślnie włączone. Aby dowiedzieć się więcej o domyślnym zachowaniu interfejsu (i o tym, jak je zmienić), zapoznaj się z sekcją Domyślny interfejs poniżej.

Domyślny interfejs użytkownika

Domyślnie wszystkie elementy sterujące znikają, jeśli mapa jest zbyt mała (200 x 200 pikseli). Możesz zastąpić to działanie, ustawiając element sterujący jako widoczny. Zobacz Dodawanie elementów sterujących do mapy.

Działanie i wygląd elementów sterujących są takie same na urządzeniach mobilnych i komputerach, z wyjątkiem elementu sterującego pełnym ekranem (patrz zachowanie opisane na liście elementów sterujących).

Dodatkowo obsługa klawiatury jest domyślnie włączona na wszystkich urządzeniach.

Wyłączanie domyślnego interfejsu

Możesz całkowicie wyłączyć domyślne przyciski interfejsu API. Aby to zrobić, ustaw właściwość disableDefaultUI mapy (w obiekcie MapOptions) na true. Ta właściwość wyłącza wszystkie elementy sterujące interfejsu Maps JavaScript API. Nie ma to jednak wpływu na gesty myszy ani skróty klawiszowe na mapie podstawowej, które są kontrolowane odpowiednio przez właściwości gestureHandling i keyboardShortcuts.

Poniższy kod wyłącza przyciski interfejsu:

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

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

Dodawanie elementów sterujących do mapy

Możesz dostosować interfejs, usuwając, dodając lub modyfikując zachowanie lub elementy sterujące interfejsu, i upewnić się, że przyszłe aktualizacje nie zmienią tego zachowania. Jeśli chcesz tylko dodać lub zmodyfikować istniejące zachowanie, musisz upewnić się, że element sterujący został wyraźnie dodany do aplikacji.

Niektóre elementy sterujące są domyślnie wyświetlane na mapie, a inne nie pojawią się, dopóki nie zostaną wyraźnie zażądane. Dodawanie i usuwanie elementów sterujących z mapy jest określone w tych polach obiektu MapOptions, które ustawiasz na true, aby były widoczne, lub na false, aby je ukryć:

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

Domyślnie wszystkie elementy sterujące znikają, jeśli mapa jest mniejsza niż 200 x 200 pikseli. Możesz zastąpić to działanie, ustawiając element sterujący jako widoczny. Na przykład w poniższej tabeli pokazano, czy element sterujący aparatu jest widoczny, czy nie, w zależności od rozmiaru mapy i ustawienia pola cameraControl:

W tym przykładzie mapa jest ustawiona tak, aby ukrywać element sterujący aparatu i wyświetlać element sterujący skali. Pamiętaj, że nie wyłączamy domyślnego interfejsu, więc te modyfikacje są dodawane do domyślnego zachowania interfejsu.

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

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

Opcje ustawień

Niektóre elementy sterujące można konfigurować, co pozwala na zmianę ich zachowania lub wyglądu. Na przykład element sterujący Typ mapy może być wyświetlany jako pasek poziomy lub menu.

Te elementy sterujące można modyfikować, zmieniając odpowiednie pola opcji w obiekcie MapOptions podczas tworzenia mapy.

Na przykład opcje zmiany elementu sterującego Typ mapy są wskazane w polu mapTypeControlOptions. Element sterujący Typ mapy może być wyświetlany w jednej z tych opcji style:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR wyświetla tablicę elementów sterujących jako przyciski na poziomym pasku, tak jak w Mapach Google.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU wyświetla pojedynczy przycisk, który umożliwia wybranie typu mapy za pomocą menu.
• google.maps.MapTypeControlStyle.DEFAULT wyświetla działanie domyślne, które zależy od rozmiaru ekranu i może ulec zmianie w przyszłych wersjach interfejsu API.

Pamiętaj, że jeśli zmodyfikujesz opcje ustawienia, musisz je też wyraźnie włączyć, ustawiając odpowiednią wartość MapOptions na true. Aby na przykład ustawić kontrolkę typu mapy na styl DROPDOWN_MENU, użyj tego kodu w obiekcie MapOptions:

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

Poniższy przykład pokazuje, jak zmienić domyślne położenie i styl elementów sterujących.

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

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

Elementy sterujące są zwykle konfigurowane podczas tworzenia mapy. Możesz jednak dynamicznie zmieniać sposób wyświetlania elementów sterujących, wywołując metodę setOptions() obiektu Map i przekazując jej nowe opcje elementów sterujących.

Modyfikuj ustawienia

Sposób prezentacji elementu sterującego określasz podczas tworzenia mapy za pomocą pól w obiekcie MapOptions mapy. Te pola są oznaczone poniżej:

• cameraControl włącza lub wyłącza element sterujący kamery, który umożliwia użytkownikowi powiększanie i przesuwanie mapy. Ten element sterujący jest domyślnie widoczny na wszystkich mapach. Pole cameraControlOptions dodatkowo określa CameraControlOptions, którego należy użyć w przypadku tego elementu sterującego.
• mapTypeControl włącza lub wyłącza element sterujący Typ mapy, który umożliwia użytkownikowi przełączanie się między typami map (np. Mapa i Satelita). Domyślnie ten element sterujący jest widoczny i pojawia się w lewym górnym rogu mapy. Pole mapTypeControlOptions dodatkowo określa MapTypeControlOptions, którego należy użyć w przypadku tego elementu sterującego.
• streetViewControl włącza lub wyłącza element sterujący Pegman, który umożliwia użytkownikowi aktywowanie panoramy Street View. Domyślnie ten element sterujący jest widoczny i pojawia się w prawym dolnym rogu mapy. Pole streetViewControlOptions dodatkowo określa StreetViewControlOptions, którego należy użyć w przypadku tego elementu sterującego.
• rotateControl włącza lub wyłącza wyświetlanie elementu sterującego obracaniem, który służy do kontrolowania orientacji zdjęć 3D. Domyślnie obecność elementu sterującego jest określana na podstawie obecności lub braku zdjęć 3D dla danego typu mapy przy bieżącym powiększeniu i lokalizacji. Możesz zmienić zachowanie elementu sterującego, ustawiając właściwość rotateControlOptions mapy, aby określić, którego elementu RotateControlOptions chcesz użyć. Element sterujący będzie widoczny tylko na mapach podstawowych 3D.
• scaleControl włącza lub wyłącza element sterujący Skala, który wyświetla skalę mapy. Domyślnie ta opcja jest niewidoczna. Gdy jest włączony, zawsze pojawia się w prawym dolnym rogu mapy. scaleControlOptions dodatkowo określa ScaleControlOptions, którego należy użyć w przypadku tego elementu sterującego.
• fullscreenControl włącza/wyłącza element sterujący, który otwiera mapę w trybie pełnoekranowym. Domyślnie to ustawienie jest włączone na komputerach i urządzeniach z Androidem. Gdy jest włączony, pojawia się w prawym górnym rogu mapy. fullscreenControlOptions dodatkowo określa FullscreenControlOptions, którego należy użyć w przypadku tego elementu sterującego.

Pamiętaj, że możesz określić opcje dla ustawień, które początkowo wyłączysz.

Umieszczenie elementów sterujących

Większość opcji elementów sterujących zawiera właściwość position (typu ControlPosition), która wskazuje, gdzie na mapie umieścić element sterujący. Położenie tych elementów sterujących nie jest bezwzględne. Zamiast tego interfejs API inteligentnie rozmieści elementy sterujące, umieszczając je wokół istniejących elementów mapy lub innych elementów sterujących w ramach określonych ograniczeń (takich jak rozmiar mapy).

Istnieją 2 rodzaje pozycji elementów sterujących: starsze i logiczne. Zalecamy używanie wartości logicznych, aby automatycznie obsługiwać układy od lewej do prawej (LTR) i od prawej do lewej (RTL). Zobacz przewodnik

W poniższych tabelach przedstawiono obsługiwane pozycje elementów sterujących w kontekstach LTR i RTL.

Kliknij etykiety, aby przełączyć mapę między trybami LTR i RTL.

Pamiętaj, że te pozycje mogą pokrywać się z pozycjami elementów interfejsu, których nie można modyfikować (takich jak informacje o prawach autorskich i logo Google). W takich przypadkach elementy sterujące będą się przemieszczać zgodnie z logiką opisaną dla każdej pozycji i będą wyświetlane jak najbliżej wskazanej pozycji. Nie możemy zagwarantować, że elementy sterujące nie będą się nakładać w przypadku skomplikowanych układów, ale interfejs API spróbuje je rozmieścić w inteligentny sposób.

Poniższy przykład pokazuje podstawową mapę z włączonymi wszystkimi elementami sterującymi w różnych pozycjach.

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

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

Elementy sterujące niestandardowe

Oprócz modyfikowania stylu i pozycji istniejących elementów sterujących interfejsu API możesz tworzyć własne elementy sterujące do obsługi interakcji z użytkownikiem. Elementy sterujące to nieruchome widżety, które unoszą się nad mapą w bezwzględnych pozycjach, w przeciwieństwie do nakładek, które poruszają się wraz z mapą. Mówiąc bardziej ogólnie, element sterujący to element <div>, który ma bezwzględną pozycję na mapie, wyświetla użytkownikowi interfejs i obsługuje interakcję z użytkownikiem lub mapą, zwykle za pomocą modułu obsługi zdarzeń.

Aby utworzyć własne ustawienie niestandardowe, musisz przestrzegać kilku reguł. Możesz jednak skorzystać z tych sprawdzonych metod:

• Zdefiniuj odpowiedni kod CSS dla elementów sterujących, które mają być wyświetlane.
• Obsługuj interakcje z użytkownikiem lub mapą za pomocą modułów obsługi zdarzeń, które reagują na zmiany właściwości mapy lub zdarzenia użytkownika (np. zdarzenia 'click').
• Utwórz element <div>, który będzie zawierał element sterujący, i dodaj go do właściwości controls elementu Map.

Każdy z tych problemów został omówiony poniżej.

Rysowanie elementów sterujących niestandardowych

Sposób narysowania elementu sterującego zależy od Ciebie. Zasadniczo zalecamy umieszczenie całej prezentacji elementu sterującego w jednym elemencie <div>, aby można było nim manipulować jako jedną jednostką. W poniższych przykładach użyjemy tego wzorca projektowego.

Projektowanie atrakcyjnych elementów sterujących wymaga pewnej znajomości CSS i struktury DOM. Poniższe przykłady kodu pokazują, jak dodać element sterujący niestandardowy za pomocą deklaratywnego kodu HTML i metod programistycznych.

Deklaratywna usługa porównywania cen

Podane niżej style CSS zapewniają wygląd zgodny z domyślnymi elementami sterującymi. Użyj tych stylów w obu poniższych przykładach:

.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;
}

Deklaratywny kod HTML

Te fragmenty kodu pokazują, jak utworzyć niestandardowy element sterujący w sposób deklaratywny. W kodzie HTML do pozycjonowania elementu sterującego używany jest element DIV o identyfikatorze container. Jest on zagnieżdżony w elemencie gmp-map, a przycisk jest dodawany do elementu DIV. Atrybut slot jest ustawiony na control-inline-start-block-start, aby umieścić element sterujący w lewym górnym rogu mapy.

<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>

W kodzie JavaScript getElementById() służy do znajdowania elementu DIV i przycisku, do przycisku dodawany jest detektor zdarzeń, a przycisk jest dołączany do elementu DIV.

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

Automatyzacja JavaScriptu

Ten fragment kodu pokazuje, jak programowo utworzyć element sterujący przycisku. Style CSS są zdefiniowane powyżej.

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

Obsługa zdarzeń z niestandardowych elementów sterujących

Aby element sterujący był przydatny, musi coś robić. To, co robi element sterujący, zależy od Ciebie. Element sterujący może reagować na dane wejściowe użytkownika lub na zmiany stanu Map.

Aby reagować na dane wejściowe użytkownika, użyj addEventListener(), który obsługuje obsługiwane zdarzenia DOM. Ten fragment kodu dodaje detektor zdarzenia 'click' przeglądarki. Pamiętaj, że to zdarzenie jest odbierane z DOM, a nie z mapy.

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

Ułatwianie dostępu do niestandardowych elementów sterujących

Aby mieć pewność, że elementy sterujące otrzymują zdarzenia klawiatury i są prawidłowo wyświetlane w czytnikach ekranu:

• Zawsze używaj natywnych elementów HTML w przypadku przycisków, elementów formularzy i etykiet. Elementu DIV używaj tylko jako kontenera do przechowywania natywnych elementów sterujących. Nigdy nie używaj go jako interaktywnego elementu interfejsu.
• Użyj elementu label, atrybutu title lub atrybutu aria-label, aby podać informacje o elemencie interfejsu.

Pozycja niestandardowych elementów sterujących

Użyj atrybutu slot, aby umieścić elementy sterujące w odpowiednim miejscu. Informacje o tych pozycjach znajdziesz w sekcji Pozycjonowanie elementów sterujących powyżej.

Każdy element ControlPosition przechowuje element MVCArray elementów sterujących wyświetlanych na tej pozycji. W rezultacie, gdy elementy sterujące zostaną dodane do pozycji lub z niej usunięte, interfejs API odpowiednio je zaktualizuje.

Poniższy kod tworzy nowy element sterujący (jego konstruktor nie jest widoczny) i dodaje go do mapy w pozycji BLOCK_START_INLINE_END (w prawym górnym rogu w kontekście LTR).

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

Aby ustawić pozycję elementu sterującego w sposób deklaratywny, ustaw atrybut slot w kodzie HTML:

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

Przykład ustawienia niestandardowego

Poniższy element sterujący jest prosty (choć niezbyt przydatny) i łączy wzorce pokazane powyżej. Ten element sterujący reaguje na zdarzenia DOM 'click', wyśrodkowując mapę w określonej domyślnej lokalizacji:

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

Dodaj stan do ustawień

Elementy sterujące mogą też przechowywać stan. Poniższy przykład jest podobny do poprzedniego, ale element sterujący zawiera dodatkowy przycisk „Ustaw dom”, który ustawia element sterujący tak, aby wyświetlał nową lokalizację domu. W tym celu tworzymy w elemencie sterującym właściwość home_, która będzie przechowywać ten stan, oraz udostępniamy metody pobierające i ustawiające ten stan.

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

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