Denetimler

Platform seçin: Android iOS JavaScript

Denetimlere Genel Bakış

Maps JavaScript API aracılığıyla gösterilen haritalar, kullanıcının haritayla etkileşimde bulunmasına olanak tanıyan kullanıcı arayüzü öğeleri içerir. Bu öğeler kontroller olarak bilinir ve uygulamanıza bu kontrollerin varyasyonlarını ekleyebilirsiniz. Alternatif olarak, hiçbir şey yapmayıp 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 başlayarak saat yönünde: Harita Türü, Tam Ekran, Kamera, Street View, Klavye kısayolları.

Aşağıda, haritalarınızda kullanabileceğiniz kontrollerin tam listesi verilmiştir:

  • Harita Türü kontrolü, açılır liste veya yatay düğme çubuğu şeklinde 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ü özelliği hem yakınlaştırma hem de kaydırma kontrollerini içerir.
  • Street View kontrolü, Street View'u etkinleştirmek için haritaya sürüklenebilen bir Pegman simgesi içerir. Bu denetim, varsayılan olarak haritanın sağ alt kısmına yakın bir yerde görünür.
  • Döndürme kontrolü, 3D görüntü içeren haritalar için eğme ve döndürme seçeneklerinin bir kombinasyonunu sunar. Bu denetim, varsayılan olarak haritanın sağ alt kısmına yakın bir yerde görünür. Daha fazla bilgi için 3D'ye genel bakış başlıklı makaleyi inceleyin.
  • Ölçek kontrolü, bir harita ölçeği öğesi gösterir. Bu denetim varsayılan olarak devre dışıdır.
  • Klavye kısayolları kontrolü, haritayla etkileşim kurmak için kullanılan klavye kısayollarının listesini gösterir.

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

Bu kontrollerin tümü varsayılan olarak etkin değildir. Varsayılan kullanıcı arayüzü davranışı (ve bu tür davranışları nasıl değiştireceğiniz) 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. Kontrolü 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ç (Kontrol listesinde açıklanan davranışa bakın), kontrollerin davranışı ve görünümü mobil ve masaüstü cihazlarda aynıdır.

Ayrıca, klavye işleme özelliği 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 kapatmak isteyebilirsiniz. Bunu yapmak 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 bu ayar, sırasıyla gestureHandling ve keyboardShortcuts özellikleri tarafından kontrol edilen temel haritadaki fare hareketlerini veya klavye kısayollarını etkilemez.

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

TypeScript

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

JavaScript

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.js
Örneği görüntüleyin

Örneği deneyin

Haritaya Kontroller 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 kontrolün uygulamanıza açıkça eklendiğinden emin olmanız gerekir.

Bazı kontroller varsayılan olarak haritada görünürken bazıları siz özellikle istemediğiniz sürece görünmez. Haritaya kontrol ekleme veya haritadan kontrol kaldırma işlemi, aşağıdaki MapOptions nesnesinin alanlarında belirtilir. Bu alanları true olarak ayarlayarak görünür hale getirebilir veya false olarak ayarlayarak gizleyebilirsiniz:

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

Varsayılan olarak, harita 200x200 pikselden küçükse tüm kontroller kaybolur. Kontrolü 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 göre kamera kontrolünün görünür olup olmadığı gösterilmektedir:

Harita boyutu cameraControl Görünür mü?
Tümü false Hayır
Tümü true Evet
>= 200x200 piksel undefined Evet
< 200x200 piksel undefined Hayır

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 olarak yapıldığını unutmayın.

TypeScript

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

JavaScript

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.js
Örneği görüntüleyin

Örneği deneyin

Kontrol Seçenekleri

Çeşitli kontroller yapılandırılabilir. Bu sayede kontrollerin davranışını değiştirebilir veya görünümünü düzenleyebilirsiniz. Örneğin, harita türü kontrolü yatay çubuk veya açılır menü olarak görünebilir.

Bu denetimler, harita oluşturulduktan sonra MapOptions nesnesindeki uygun denetim 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çeneklerden birinde görünebilir:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR, Google Haritalar'da gösterildiği gibi, kontrol dizisini yatay bir çubukta düğmeler halinde gösterir.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU, açılır menüden 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ü de 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.

TypeScript

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

JavaScript

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
Örneği görüntüleyin

Örneği deneyin

Kontroller genellikle harita oluşturulurken yapılandırılır. Ancak, Map'nın 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 bir kontrolün sunumunu, haritanın MapOptions nesnesindeki alanlar aracılığıyla belirtirsiniz. Bu alanlar aşağıda belirtilmiş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 denetim, varsayılan olarak tüm haritalarda 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. Bu kontrol varsayılan olarak görünür ve haritanın sol üst köşesinde yer alır. mapTypeControlOptions alanı, bu denetim için kullanılacak MapTypeControlOptions değerini de belirtir.
  • streetViewControl, kullanıcının bir Street View panoramasını etkinleştirmesine olanak tanıyan Pegman kontrolünü etkinleştirir/devre dışı bırakır. Bu kontrol varsayılan olarak görünür ve haritanın sağ alt kısmına yakın bir yerde yer alır. streetViewControlOptions alanı, bu denetim için kullanılacak StreetViewControlOptions değerini de belirtir.
  • rotateControl, 3D görüntülerin yönünü kontrol etmek için bir döndürme denetiminin 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 verilen harita türü için 3D görüntülerin olup olmamasına göre belirlenir. Kullanılacak RotateControlOptions'ı belirtmek için haritanın rotateControlOptions ayarını yaparak 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. Ayrıca, 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 denetim, haritanın sağ üst kısmına yakın bir yerde görünür. Ayrıca, 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 belirleyebileceğinizi unutmayın.

Kontrol Konumlandırma

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

İ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ılavuzuna bakın.

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

Soldan sağa konumlar

Konum (soldan sağa bağlam) Mantıksal Sabit (Önerilen) Eski Sabit
Sol Üst BLOCK_START_INLINE_START TOP_LEFT
Top Center BLOCK_START_INLINE_CENTER TOP_CENTER
Sağ üst BLOCK_START_INLINE_END TOP_RIGHT
Sol Üst INLINE_START_BLOCK_START LEFT_TOP
Sol Orta (Left Center) INLINE_START_BLOCK_CENTER LEFT_CENTER
Sol Alt INLINE_START_BLOCK_END LEFT_BOTTOM
Sağ Üst INLINE_END_BLOCK_START RIGHT_TOP
Sağ Orta (Right Center) INLINE_END_BLOCK_CENTER RIGHT_CENTER
Sağ Alt INLINE_END_BLOCK_END RIGHT_BOTTOM
Sol Alt BLOCK_END_INLINE_START BOTTOM_LEFT
Bottom Center (Alt Orta) BLOCK_END_INLINE_CENTER BOTTOM_CENTER
Sağ Alt BLOCK_END_INLINE_END BOTTOM_RIGHT

RTL konumları

Konum (sağdan sola bağlam) Mantıksal Sabit (Önerilen) Eski Sabit
Sağ üst BLOCK_START_INLINE_START TOP_RIGHT
Top Center BLOCK_START_INLINE_CENTER TOP_CENTER
Sol Üst BLOCK_START_INLINE_END TOP_LEFT
Sağ Üst INLINE_START_BLOCK_START RIGHT_TOP
Sağ Orta (Right Center) INLINE_START_BLOCK_CENTER RIGHT_CENTER
Sağ Alt INLINE_START_BLOCK_END RIGHT_BOTTOM
Sol Üst INLINE_END_BLOCK_START LEFT_TOP
Sol Orta (Left Center) INLINE_END_BLOCK_CENTER LEFT_CENTER
Sol Alt INLINE_END_BLOCK_END LEFT_BOTTOM
Sağ Alt BLOCK_END_INLINE_START BOTTOM_RIGHT
Bottom Center (Alt Orta) BLOCK_END_INLINE_CENTER BOTTOM_CENTER
Sol Alt BLOCK_END_INLINE_END BOTTOM_LEFT

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 (ör. telif hakları ve Google logosu) konumlarıyla çakışabileceğini unutmayın. Bu durumlarda kontroller, her konum için belirtilen mantığa göre yerleştirilir ve belirtilen konuma 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 nedeniyle kontrollerin çakışmayacağı garanti edilemez.

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

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;
index.ts

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;
index.js
Örneği görüntüleyin

Örneği deneyin

Ö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. Denetimler, temel haritayla birlikte hareket eden yer paylaşımlarının aksine, haritanın üzerinde mutlak konumlarda yüzen sabit widget'lardır. Daha temel olarak kontrol, haritada mutlak bir konuma sahip olan, kullanıcıya bazı kullanıcı arayüzleri gösteren ve genellikle bir etkinlik işleyicisi aracılığıyla kullanıcı veya harita ile etkileşimi yöneten bir <div> öğesidir.

Kendi özel kontrolünüzü oluşturmak için birkaç kurala uymanız gerekir. Ancak aşağıdaki yönergeler en iyi uygulama olarak kabul edilebilir:

  • Gösterilecek kontrol öğeleri için uygun CSS'yi tanımlayın.
  • Kullanıcı veya haritayla etkileşimi, harita özelliği değişiklikleri ya da kullanıcı etkinlikleri (örneğin, 'click' etkinlikleri) için etkinlik işleyiciler aracılığıyla yönetin.
  • Denetimi tutacak 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. Genel olarak, kontrolünüzü tek bir birim olarak kullanabilmek için tüm kontrol sunumunuzu tek bir <div> öğesine yerleştirmenizi öneririz. Bu tasarım kalıbını, aşağıda gösterilen örneklerde kullanacağız.

Çekici kontroller tasarlamak için CSS ve DOM yapısı hakkında bilgi sahibi olmanız gerekir. Aşağıdaki kod örneklerinde hem bildirim temelli HTML hem de programatik yöntemler kullanılarak özel denetim ekleme gösterilmektedir.

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

Bildirimsel HTML

Bu kod snippet'lerinde, özel kontrolün bildirimli olarak nasıl oluşturulacağı gösterilmektedir. HTML'de, kontrolü konumlandırmak için container kimliğine sahip bir DIV kullanılır. Bu, gmp-map öğesinin içine yerleştirilir ve düğme DIV'e eklenir. Kontrolü 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 DIV ve düğmeyi bulmak için getElementById() 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 işe yaraması gerekir. Kontrolün ne yapacağı size bağlıdır. Kontrol, 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() öğesini kullanın. Aşağıdaki kod snippet'i, tarayıcının 'click' etkinliği için bir işleyici 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 almasını ve ekran okuyuculara doğru şekilde görünmesini sağlamak için:

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

Özel kontrolleri konumlandırma

Gerekli kontrol konumunu belirterek özel kontrolleri konumlandırmak için slot özelliğini kullanın. Bu konumlar hakkında bilgi edinmek 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, konuma kontroller eklendiğinde veya kaldırıldığında API, kontrolleri buna göre günceller.

Aşağıdaki kod, yeni bir özel kontrol oluşturur (yapılandırıcı gösterilmez) ve bunu BLOCK_START_INLINE_END konumunda (LTR bağlamında sağ üst) 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 denetim örneği

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

TypeScript

let map: google.maps.Map;

const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener('click', () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement("div");
  // Create the control.
  const centerControl = createCenterControl(map);

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js
Örneği görüntüleyin

Örneği deneyin

Kontrollere Durum Ekleme

Kontroller durumu da saklayabilir. Aşağıdaki örnek, daha önce gösterilene benzer ancak kontrol, yeni bir ev konumu gösterecek şekilde ayarlanmasını sağlayan ek bir "Evi Ayarla" düğmesi içerir. Bu durumu depolamak ve bu durum için alıcılar ve ayarlayıcılar sağlamak üzere kontrol içinde bir home_ özelliği oluşturarak bunu yaparız.

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;
index.ts

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;
index.js
Örneği görüntüleyin

Örneği deneyin