Denetimler

Kontrollere Genel Bakış

Maps JavaScript API aracılığıyla görüntülenen haritalar, kullanıcının haritayla etkileşim kurmasına olanak tanıyan kullanıcı arayüzü öğeleri içerir. Bu öğeler denetimler olarak bilinir ve uygulamanıza bu denetimlerin varyasyonlarını ekleyebilirsiniz. Alternatif olarak, hiçbir şey yapmadan tüm kontrol davranışlarını Maps JavaScript API'nin işlemesine izin verebilirsiniz.

Aşağıdaki haritada, Maps JavaScript API tarafından gösterilen varsayılan kontrol grubu gösterilmektedir:

Sol üstten saat yönünde: Harita Türü, Tam Ekran, Kamera, Street View, Klavye kısayolları.

Haritalarınızda kullanabileceğiniz tüm kontrollerin listesini aşağıda bulabilirsiniz:

• Harita Türü kontrolü, açılır menü veya yatay düğme çubuğu stilinde kullanılabilir. Bu kontrol, kullanıcının bir harita türü (ROADMAP, SATELLITE, HYBRID veya TERRAIN) seçmesine olanak tanır. Bu kontrol, varsayılan olarak haritanın sol üst köşesinde görünür.
• Tam ekran kontrolü, haritayı tam ekran modunda açma seçeneği sunar. Bu kontrol, masaüstü ve mobil cihazlarda varsayılan olarak etkindir. Not: iOS, tam ekran özelliğini desteklemez. Bu nedenle tam ekran kontrolü iOS cihazlarda görünmez.
• Kamera kontrolü hem yakınlaştırma hem de kaydırma kontrollerini içerir.
• Street View denetimi, Street View'u etkinleştirmek için haritaya sürüklenebilen bir Pegman simgesi içerir. Bu kontrol, varsayılan olarak haritanın sağ alt kısmında görünür.
• Döndürme kontrolü, 3D görüntüler içeren haritalar için eğme ve döndürme seçeneklerinin bir kombinasyonunu sunar. Bu kontrol, varsayılan olarak haritanın sağ alt kısmında görünür. Daha fazla bilgi için 3D'ye genel bakış bölümüne bakın.
• Ölçek kontrolü, bir harita ölçeği öğesi gösterir. Bu kontrol varsayılan olarak devre dışıdır.
• Klavye kısayolları denetimi, haritayla etkileşim kurmak için kullanılabilecek klavye kısayollarının listesini gösterir.

Bu harita kontrollerine doğrudan erişemez veya bunları değiştiremezsiniz. Bunun yerine, haritanın MapOptions alanlarını değiştirerek kontrollerin görünürlüğünü ve sunumunu etkileyebilirsiniz. Haritanızı oluştururken (uygun MapOptions ile) kontrol sunumunu ayarlayabilir veya haritanın seçeneklerini değiştirmek için setOptions() yöntemini çağırarak haritayı dinamik olarak değiştirebilirsiniz.

Bu kontrollerin hepsi varsayılan olarak etkin değildir. Varsayılan kullanıcı arayüzü davranışı (ve bu davranışın nasıl değiştirileceği) hakkında bilgi edinmek için aşağıdaki Varsayılan Kullanıcı Arayüzü bölümüne bakın.

Varsayılan Kullanıcı Arayüzü

Varsayılan olarak, harita çok küçükse (200x200 piksel) tüm kontroller kaybolur. Denetimi açıkça görünür olacak şekilde ayarlayarak bu davranışı geçersiz kılabilirsiniz. Haritaya Kontrol Ekleme başlıklı makaleyi inceleyin.

Tam ekran kontrolü hariç olmak üzere, kontrollerin davranışı ve görünümü mobil ve masaüstü cihazlarda aynıdır (kontroller listesinde açıklanan davranışa bakın).

Ayrıca, klavye kullanımı tüm cihazlarda varsayılan olarak etkindir.

Varsayılan kullanıcı arayüzünü devre dışı bırakma

API'nin varsayılan kullanıcı arayüzü düğmelerini tamamen devre dışı bırakmak isteyebilirsiniz. Bunun için haritanın disableDefaultUI özelliğini (MapOptions nesnesi içinde) true olarak ayarlayın. Bu özellik, Maps JavaScript API'deki tüm kullanıcı arayüzü kontrol düğmelerini devre dışı bırakır. Ancak temel haritadaki fare hareketlerini veya klavye kısayollarını etkilemez. Bunlar sırasıyla gestureHandling ve keyboardShortcuts özellikleri tarafından kontrol edilir.

Aşağıdaki kod, kullanıcı arayüzü düğmelerini devre dışı bırakır:

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

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

Haritaya Kontrol Öğeleri Ekleme

Kullanıcı arayüzü davranışını veya kontrollerini kaldırarak, ekleyerek ya da değiştirerek arayüzünüzü özelleştirmek ve gelecekteki güncellemelerin bu davranışı değiştirmemesini sağlamak isteyebilirsiniz. Yalnızca mevcut davranışı eklemek veya değiştirmek istiyorsanız denetimin uygulamanıza açıkça eklendiğinden emin olmanız gerekir.

Bazı kontroller varsayılan olarak haritada görünürken, diğerleri siz özellikle istemediğiniz sürece görünmez. Haritaya kontrol ekleme veya haritadan kontrol kaldırma, aşağıdaki MapOptions nesnesinin alanlarında belirtilir. Bu alanları görünür hale getirmek için true, gizlemek için false olarak ayarlarsınız:

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

Varsayılan olarak, harita 200x200 pikselden küçükse tüm kontroller kaybolur. Denetimi açıkça görünür olacak şekilde ayarlayarak bu davranışı geçersiz kılabilirsiniz. Örneğin, aşağıdaki tabloda, harita boyutuna ve cameraControl alanının ayarına bağlı olarak kamera kontrolünün görünür olup olmadığı gösterilmektedir:

Aşağıdaki örnekte harita, kamera kontrolünü gizleyecek ve ölçek kontrolünü gösterecek şekilde ayarlanmıştır. Varsayılan kullanıcı arayüzünü açıkça devre dışı bırakmadığımızı, bu nedenle bu değişikliklerin varsayılan kullanıcı arayüzü davranışına ek olduğunu unutmayın.

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

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

Kontrol Seçenekleri

Birçok kontrol yapılandırılabilir. Bu sayede, kontrollerin davranışını veya görünümünü değiştirebilirsiniz. Örneğin, Harita Türü denetimi, yatay bir çubuk veya açılır menü olarak görünebilir.

Bu kontroller, harita oluşturulurken MapOptions nesnesindeki uygun kontrol seçenekleri alanları değiştirilerek düzenlenir.

Örneğin, harita türü kontrolünü değiştirme seçenekleri mapTypeControlOptions alanında belirtilir. Harita Türü kontrolü, aşağıdaki style seçeneklerinden birinde görünebilir:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR, kontrol dizisini Google Haritalar'da gösterildiği gibi yatay bir çubukta düğmeler olarak gösterir.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU, açılır menü kullanarak harita türünü seçmenize olanak tanıyan tek bir düğme kontrolü gösterir.
• google.maps.MapTypeControlStyle.DEFAULT, ekran boyutuna bağlı olan ve API'nin gelecekteki sürümlerinde değişebilecek varsayılan davranışı gösterir.

Herhangi bir kontrol seçeneğini değiştirirseniz uygun MapOptions değerini true olarak ayarlayarak kontrolü açıkça etkinleştirmeniz gerektiğini unutmayın. Örneğin, bir harita türü kontrolünü DROPDOWN_MENU stilini gösterecek şekilde ayarlamak için MapOptions nesnesinde aşağıdaki kodu kullanın:

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

Aşağıdaki örnekte, kontrollerin varsayılan konumunun ve stilinin nasıl değiştirileceği gösterilmektedir.

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

Kontroller genellikle harita oluşturulurken yapılandırılır. Ancak, Map'nin setOptions() yöntemini çağırıp yeni kontrol seçenekleri ileterek kontrollerin sunumunu dinamik olarak değiştirebilirsiniz.

Kontrolleri Değiştirme

Haritanızı oluştururken haritanın MapOptions nesnesindeki alanlar aracılığıyla bir kontrolün sunumunu belirtirsiniz. Bu alanlar aşağıda gösterilmiştir:

• cameraControl, kullanıcının haritayı yakınlaştırmasına ve kaydırmasına olanak tanıyan kamera kontrolünü etkinleştirir/devre dışı bırakır. Bu kontrol, tüm haritalarda varsayılan olarak görünür. cameraControlOptions alanı, bu denetim için kullanılacak CameraControlOptions değerini de belirtir.
• mapTypeControl, kullanıcının harita türleri (ör. Harita ve Uydu) arasında geçiş yapmasına olanak tanıyan Harita Türü kontrolünü etkinleştirir/devre dışı bırakır. Varsayılan olarak bu kontrol görünür durumdadır ve haritanın sol üst köşesinde gösterilir. mapTypeControlOptions alanı, bu kontrol için kullanılacak MapTypeControlOptions değerini de belirtir.
• streetViewControl, kullanıcının Street View panoraması etkinleştirmesini sağlayan Pegman kontrolünü etkinleştirir/devre dışı bırakır. Varsayılan olarak bu kontrol görünür durumdadır ve haritanın sağ alt kısmında yer alır. streetViewControlOptions alanı, bu kontrol için kullanılacak StreetViewControlOptions değerini de belirtir.
• rotateControl, 3D görüntülerin yönünü kontrol etmek için kullanılan döndürme kontrolünün görünümünü etkinleştirir/devre dışı bırakır. Varsayılan olarak, kontrolün varlığı, geçerli yakınlaştırma ve konumda belirli harita türü için 3D görüntülerin varlığına veya yokluğuna göre belirlenir. Kullanılacak RotateControlOptions değerini belirtmek için haritanın rotateControlOptions değerini ayarlayarak kontrolün davranışını değiştirebilirsiniz. Kontrol yalnızca 3D temel haritalarda görünür.
• scaleControl, harita ölçeği sağlayan Ölçek kontrolünü etkinleştirir/devre dışı bırakır. Bu kontrol varsayılan olarak görünmez. Etkinleştirildiğinde, her zaman haritanın sağ alt köşesinde görünür. scaleControlOptions, bu denetim için kullanılacak ScaleControlOptions değerini de belirtir.
• fullscreenControl, haritayı tam ekran modunda açan kontrolü etkinleştirir/devre dışı bırakır. Bu kontrol, masaüstü ve Android cihazlarda varsayılan olarak etkindir. Etkinleştirildiğinde, kontrol haritanın sağ üst kısmında görünür. fullscreenControlOptions, bu denetim için kullanılacak FullscreenControlOptions değerini de belirtir.

Başlangıçta devre dışı bıraktığınız kontroller için seçenekler belirtebileceğinizi unutmayın.

Kontrol Düğmesi Konumu

Kontrol seçeneklerinin çoğunda, kontrolün haritada nereye yerleştirileceğini belirten bir position özelliği (ControlPosition türünde) bulunur. Bu kontrollerin konumu mutlak değildir. Bunun yerine API, kontrolleri mevcut harita öğelerinin veya diğer kontrollerin etrafında, belirli kısıtlamalar (ör. harita boyutu) dahilinde akıllıca yerleştirir.

İki tür kontrol konumu vardır: eski ve mantıksal. Hem soldan sağa (LTR) hem de sağdan sola (RTL) düzen bağlamlarını otomatik olarak destekleyebilmek için mantıksal değerlerin kullanılması önerilir. Referans kılavuzunu inceleyin.

Aşağıdaki tablolarda, soldan sağa ve sağdan sola bağlamlarda desteklenen kontrol konumları gösterilmektedir.

Haritayı soldan sağa ve sağdan sola modları arasında değiştirmek için etiketleri tıklayın.

Bu konumların, yerleşimlerini değiştiremeyeceğiniz kullanıcı arayüzü öğelerinin (telif hakları ve Google logosu gibi) konumlarıyla çakışabileceğini unutmayın. Bu durumlarda kontroller, her konum için belirtilen mantığa göre akar ve belirtilen konumlarına mümkün olduğunca yakın görünür. API, kontrolleri akıllıca düzenlemeye çalışsa da karmaşık düzenler söz konusu olduğunda kontrollerin çakışmayacağına dair garanti verilemez.

Aşağıdaki örnekte, tüm kontrollerin etkinleştirildiği ve farklı konumlarda olduğu temel bir harita gösterilmektedir.

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

Özel Kontroller

Mevcut API kontrollerinin stilini ve konumunu değiştirmenin yanı sıra kullanıcıyla etkileşimi yönetmek için kendi kontrollerinizi de oluşturabilirsiniz. Kontroller, altlarındaki haritayla birlikte hareket eden yer paylaşımlarının aksine, haritanın üstünde mutlak konumlarda yüzen sabit widget'lardır. Daha temel olarak, bir kontrol, harita üzerinde mutlak bir konuma sahip olan, kullanıcıya bir kullanıcı arayüzü gösteren ve genellikle bir etkinlik işleyici aracılığıyla kullanıcıyla veya haritayla etkileşimi yöneten bir <div> öğesidir.

Kendi özel kontrolünüzü oluşturmak için birkaç kural gereklidir. Ancak aşağıdaki yönergeler en iyi uygulama olarak kullanılabilir:

• Kontrol öğelerinin gösterilmesi için uygun CSS'yi tanımlayın.
• Harita özelliği değişiklikleri veya kullanıcı etkinlikleri (ör. 'click' etkinlikleri) için etkinlik işleyiciler aracılığıyla kullanıcıyla veya haritayla etkileşimi yönetin.
• Kontrolü barındıracak bir <div> öğesi oluşturun ve bu öğeyi Map öğesinin controls özelliğine ekleyin.

Bu endişelerin her biri aşağıda ele alınmıştır.

Özel Kontroller Çizme

Kontrolünüzü nasıl çizeceğiniz size bağlıdır. Genellikle, kontrolünüzü tek bir birim olarak yönetebilmeniz için tüm kontrol sunumunuzu tek bir <div> öğesine yerleştirmenizi öneririz. Aşağıda gösterilen örneklerde bu tasarım kalıbını kullanacağız.

Çekici kontroller tasarlamak için CSS ve DOM yapısı hakkında biraz bilgi sahibi olmak gerekir. Aşağıdaki kod örneklerinde, hem açıklayıcı HTML hem de programatik yöntemler kullanılarak özel kontrol ekleme işlemi gösterilmektedir.

Bildirime dayalı CSS

Aşağıdaki CSS stilleri, varsayılan kontrollerle tutarlı bir görünüm sağlar. Bu stilleri aşağıdaki örneklerin her ikisinde de kullanın:

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

Bildirime dayalı HTML

Bu kod snippet'leri, özel bir kontrolün bildirimli olarak nasıl oluşturulacağını gösterir. HTML'de, denetimi konumlandırmak için container kimliğine sahip bir DIV kullanılır. Bu DIV, gmp-map öğesinin içine yerleştirilir ve düğme DIV'e eklenir. Denetimi haritanın sol üst köşesine yerleştirmek için slot özelliği control-inline-start-block-start olarak ayarlanır.

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

JavaScript'te getElementById(), DIV ve düğmeyi bulmak için kullanılır, düğmeye bir etkinlik işleyici eklenir ve düğme DIV'ye eklenir.

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

Programatik JavaScript

Bu kod snippet'i, programatik olarak düğme kontrolü oluşturmayı gösterir. CSS stilleri yukarıda tanımlanmıştır.

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

Özel kontrollerden gelen etkinlikleri işleme

Bir kontrolün faydalı olması için gerçekten bir şey yapması gerekir. Kontrolün ne yapacağı size bağlıdır. Denetim, kullanıcı girişine veya Map durumundaki değişikliklere yanıt verebilir.

Kullanıcı girişine yanıt vermek için desteklenen DOM etkinliklerini işleyen addEventListener() kullanın. Aşağıdaki kod snippet'i, tarayıcının 'click' etkinliği için bir dinleyici ekler. Bu etkinliğin haritadan değil, DOM'dan alındığını unutmayın.

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

Özel Kontrolleri Erişilebilir Hale Getirme

Kontrollerin klavye etkinliklerini aldığından ve ekran okuyuculara doğru şekilde göründüğünden emin olmak için:

• Düğmeler, form öğeleri ve etiketler için her zaman yerel HTML öğeleri kullanın. DIV öğesini yalnızca yerel kontrolleri barındıran bir kapsayıcı olarak kullanın. DIV'yi hiçbir zaman etkileşimli bir kullanıcı arayüzü öğesi olarak yeniden kullanmayın.
• Bir kullanıcı arayüzü öğesi hakkında bilgi vermek için uygun yerlerde label öğesini, title özelliğini veya aria-label özelliğini kullanın.

Özel Kontrolleri Konumlandırma

Özel kontrolleri konumlandırmak için slot özelliğini kullanarak gerekli kontrol konumunu belirtin. Bu konumlar hakkında bilgi için yukarıdaki Kontrol Konumlandırma bölümüne bakın.

Her ControlPosition, o konumda gösterilen kontrollerin MVCArray değerini depolar. Sonuç olarak, pozisyona kontroller eklendiğinde veya pozisyondan kontroller kaldırıldığında API, kontrolleri buna göre günceller.

Aşağıdaki kod, yeni bir özel kontrol oluşturur (oluşturucusu gösterilmez) ve bunu BLOCK_START_INLINE_END konumunda (soldan sağa bağlamda sağ üstte) haritaya ekler.

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

Özel bir kontrolün konumunu bildirimli olarak ayarlamak için HTML'de slot özelliğini ayarlayın:

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

Özel Kontrol Örneği

Aşağıdaki kontrol basittir (ancak pek kullanışlı değildir) ve yukarıda gösterilen kalıpları birleştirir. Bu kontrol, haritayı belirli bir varsayılan konuma ortalayarak DOM 'click' etkinliklerine yanıt verir:

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

Kontrollere Eyalet Ekleme

Denetimler, durumu da depolayabilir. Aşağıdaki örnek, daha önce gösterilene benzer ancak denetim, yeni bir ev konumunu gösterecek şekilde ayarlayan ek bir "Ana Sayfa Ayarla" düğmesi içerir. Bunu yapmak için denetim içinde bu durumu depolayacak bir home_ özelliği oluşturur ve bu durum için alıcılar ve ayarlayıcılar sağlarız.

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