Kontroller

Platform seçin: Android iOS JavaScript

Kontrollere Genel Bakış

Maps JavaScript API aracılığıyla görüntülenen haritalar, kullanıcıların haritayla etkileşimde bulunmasını sağlamak için kullanıcı arayüzü öğeleri içerir. Bu öğeler kontroller olarak bilinir ve kontrollerin varyasyonlarını uygulamanıza ekleyebilirsiniz. Alternatif olarak, hiçbir şey yapmadan Haritalar JavaScript API'sinin tüm kontrol davranışını işlemesine izin verebilirsiniz.

Aşağıdaki harita, Maps JavaScript API tarafından görüntülenen varsayılan kontrol grubunu göstermektedir:

Haritalarınızda kullanabileceğiniz denetimlerin tam listesini aşağıda bulabilirsiniz:

  • Yakınlaştırma denetimi, haritanın yakınlaştırma düzeyini değiştirmek için "+" ve "-" düğmeleri gösterir. Bu kontrol, varsayılan olarak haritanın sağ alt köşesinde görünür.
  • Harita Türü kontrolü, açılır veya yatay düğme çubuğu şeklinde mevcuttur ve kullanıcının harita türünü (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.
  • 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 tarafına yakın yerde görünür.
  • Döndürme kontrolü: Eğik görüntüler içeren haritalar için yatırma ve döndürme seçeneklerinin bir kombinasyonunu sağlar. Bu denetim, varsayılan olarak haritanın sağ alt tarafına yakın yerde bulunur. Daha fazla bilgi için 45° görüntülere bakın.
  • Ölçek kontrolü bir harita ölçek öğesi görüntüler. Bu denetim varsayılan olarak devre dışıdır.
  • Tam ekran kontrolü, haritayı tam ekran modunda açma seçeneği sunar. Bu denetim, masaüstü ve mobil cihazlarda varsayılan olarak etkindir. Not: iOS tam ekran özelliğini desteklemez. Bu nedenle, iOS cihazlarda tam ekran kontrolü gösterilmez.
  • Klavye kısayolları kontrolü, haritayla etkileşimde bulunmak için klavye kısayollarının listesini gösterir.

Bu harita kontrollerine doğrudan erişemez veya değişiklik yapamazsınız. Bunun yerine, haritanın görünürlüğünü ve sunulmasını etkileyen MapOptions alanlarını değiştirirsiniz. Haritanızı örneklendirirken (uygun MapOptions ile) kontrol sunumunu ayarlayabilir veya harita seçeneklerini değiştirmek için setOptions() numaralı telefonu arayarak haritayı dinamik olarak değiştirebilirsiniz.

Bu denetimlerin tümü varsayılan olarak etkin değildir. Varsayılan kullanıcı arayüzü davranışı (ve bu tür davranışları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ü

Harita çok küçükse (200x200 piksel) varsayılan olarak tüm denetimler kaybolur. Denetimi açıkça görünür olacak şekilde ayarlayarak bu davranışı geçersiz kılabilirsiniz. Haritaya Denetim Ekleme konusuna bakın.

Kontrollerin davranışı ve görünümü, tam ekran kontrolü dışında mobil ve masaüstü cihazlarda aynıdır (kontrol listesinde açıklanan davranışlara 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'nın varsayılan kullanıcı arayüzü düğmelerini tamamen kapatmak isteyebilirsiniz. Bunu yapmak için haritanın disableDefaultUI özelliğini (MapOptions nesnesinin 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. Bununla birlikte, sırasıyla gestureHandling ve keyboardShortcuts özellikleri ile kontrol edilen ana haritadaki fare hareketleri veya klavye kısayolları etkilenmez.

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

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;
Örneği göster

Örneği Dene

Haritaya Kontrol Ekleme

Kullanıcı arayüzü davranışını veya kontrollerini kaldırarak, ekleyerek veya değiştirerek arayüzünüzü özelleştirmek ve gelecekte yapılacak güncellemelerin bu davranışı değiştirmediğinden emin olmak isteyebilirsiniz. Yalnızca mevcut davranışı eklemek veya mevcut davranışı değiştirmek istiyorsanız denetimin doğrudan uygulamanıza etkin bir şekilde eklendiğinden emin olmanız gerekir.

Bazı kontroller varsayılan olarak haritada görünür, bazıları ise özel olarak istemediğiniz durumlarda görünür. Aşağıdaki MapOptions nesnede kontrollerin eklenmesi veya kaldırılması harita üzerinde belirtilir. Bunları görünür hale getirmek için true olarak ya da gizlemek için false olarak ayarlarsınız:

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

Harita 200x200 pikselden küçükse varsayılan olarak tüm denetimler 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 boyutu ve zoomControl alanının ayarına göre yakınlaştırma kontrolünün görünür olup olmadığı gösterilmektedir:

Harita boyutu zoomControl Görünür
Hepsi false Hayır
Hepsi true Evet
>= 200x200 piksel undefined Evet
< 200x200 piksel undefined Hayır

Aşağıdaki örnekte, harita, Zoom denetimini gizleyecek ve Ölçek denetimini gösterecektir. Varsayılan kullanıcı arayüzünü açıkça devre dışı bırakmadığımızı unutmayın. Bu değişiklikler, varsayılan kullanıcı arayüzü davranışını tamamlayıcı niteliktedir.

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;
Örneği göster

Örneği Dene

Denetim Seçenekleri

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

Bu kontroller, harita oluşturulduktan sonra MapOptions nesnesi içinde uygun kontrol seçenekleri alanları değiştirilerek değiştirilir.

Örneğin, Harita Türü denetimini 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, kontrol listesini Google Haritalar'da gösterildiği gibi yatay bir çubukta düğme olarak görüntüler.
  • 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örüntüler.
  • google.maps.MapTypeControlStyle.DEFAULT, ekran boyutuna bağlı olan ve API'nin gelecekteki sürümlerinde değişebilecek olan varsayılan davranışı gösterir.

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

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

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

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;
Örneği göster

Örneği Dene

Kontroller genellikle harita oluşturulduğunda yapılandırılır. Ancak MapsetOptions() yöntemini çağırarak kontrollerin sunumunu dinamik olarak değiştirebilir ve yeni kontrol seçenekleri iletebilirsiniz.

Denetimleri Değiştirme

Haritanızı, haritanın MapOptions nesnesindeki alanlar aracılığıyla oluşturduğunuzda bir kontrol sunusu belirtirsiniz. Bu alanlar aşağıda belirtilmiştir:

  • zoomControl, Zoom kontrolünü etkinleştirir/devre dışı bırakır. Varsayılan olarak, bu kontrol görünür ve haritanın sağ alt kısmına yakın bir yerde görünür. zoomControlOptions alanı, bu kontrol için kullanılacak ZoomControlOptions öğesini de belirtir.
  • mapTypeControl, kullanıcının harita türleri (Harita ve Uydu gibi) 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 ve haritanın sol üst köşesinde görünür. mapTypeControlOptions alanı, bu kontrol için kullanılacak MapTypeControlOptions öğesini de belirtir.
  • streetViewControl, kullanıcının 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 görünür. streetViewControlOptions alanı, bu kontrol için kullanılacak StreetViewControlOptions öğesini de belirtir.
  • rotateControl, 45° görüntülerin yönünü kontrol etmek için Döndürme denetiminin görünümünü etkinleştirir/devre dışı bırakır. Varsayılan olarak, kontrolün mevcudiyeti mevcut yakınlaştırma ve konum için belirli bir harita türünün 45° görüntüsü olup olmadığına göre belirlenir. Kullanılacak RotateControlOptions değerini belirtmek içinrotateControlOptions öğesini ayarlayarak kontrolün davranışını değiştirebilirsiniz. Şu anda 45° görüntü yoksa kontrolün görünmesini sağlayamazsınız.
  • scaleControl, basit bir harita ölçeği sağlayan Ölçek kontrolünü etkinleştirir/devre dışı bırakır. Varsayılan olarak, bu denetim görünmez. Etkinleştirildiğinde, her zaman haritanın sağ alt köşesinde görünür. scaleControlOptions, bu kontrol için kullanılacak ScaleControlOptions öğesini de belirtir.
  • fullscreenControl, haritayı tam ekran modunda açan kontrolü etkinleştirir veya devre dışı bırakır. Bu denetim, masaüstü ve Android cihazlarda varsayılan olarak etkindir. Etkinleştirildiğinde, kontrol düğmesi haritanın sağ üst tarafına yakın yerde bulunur. fullscreenControlOptions, bu kontrol için kullanılacak FullscreenControlOptions öğesini de belirtir.

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

Denetim Konumlandırma

Denetim seçeneklerinin çoğu, kontrolün yerleştirileceği yeri belirten position özelliği (ControlPosition türünde) içerir. Bu kontrollerin konumlandırması mutlak değildir. Bunun yerine, API denetimleri mevcut harita öğelerinin veya diğer denetimlerin içine belirli sınırlar dahilinde (ör. harita boyutu) yerleştirerek akıllı bir şekilde yerleştirir.

Not: Karmaşık düzenlerle kontrollerin çakışmayacağına dair garanti verilemez ancak API bunları akıllı bir şekilde düzenlemeye çalışır.

Aşağıdaki kontrol konumları desteklenir:

  • TOP_CENTER, kontrolün haritanın üst orta kısmına yerleştirilmesi gerektiğini belirtir.
  • TOP_LEFT, kontrolün sol üst kısmına doğru herhangi bir alt "debicilik" kontrolüyle haritanın sol üst kısmına yerleştirilmesi gerektiğini gösterir.
  • TOP_RIGHT, kontrolün sağ üst kısmına doğru herhangi bir alt kontrol öğesine sahip olacak şekilde kontrolün sağ üst kısmına yerleştirilmesi gerektiğini gösterir.
  • LEFT_TOP, kontrolün sol üst tarafa, ancak herhangi bir TOP_LEFT öğesinin altına yerleştirilmesi gerektiğini belirtir.
  • RIGHT_TOP, kontrolün haritanın sağ üst kısmına, ancak herhangi bir TOP_RIGHT öğesinin altına yerleştirilmesi gerektiğini belirtir.
  • LEFT_CENTER, kontrolün haritanın sol tarafına TOP_LEFT ve BOTTOM_LEFT konumlarının ortasına yerleştirilmesi gerektiğini belirtir.
  • RIGHT_CENTER, kontrolün haritanın sağ tarafında TOP_RIGHT ve BOTTOM_RIGHT konumları arasına yerleştirilmesi gerektiğini belirtir.
  • LEFT_BOTTOM, kontrolün haritanın sol alt kısmına, ancak herhangi bir BOTTOM_LEFT öğesinin üzerine yerleştirilmesi gerektiğini belirtir.
  • RIGHT_BOTTOM, kontrolün herhangi bir BOTTOM_RIGHT öğesinin üzerine değil, haritanın sağ altına yerleştirilmesi gerektiğini belirtir.
  • BOTTOM_CENTER, kontrolün haritanın alt orta kısmına yerleştirilmesi gerektiğini belirtir.
  • BOTTOM_LEFT, kontrolün sol alt köşesine doğru herhangi bir kontrol "akan" bölümünün alt kontrolüyle birlikte haritanın sol alt kısmına yerleştirilmesi gerektiğini belirtir.
  • BOTTOM_RIGHT, kontrolün sağ alt kısmına doğru herhangi bir alt "kontrol" alt öğesiyle, kontrolün haritanın sağ alt kısmına yerleştirilmesi gerektiğini gösterir.

Bu konumların, yerleşimini değiştiremediğiniz kullanıcı arayüzü öğelerinin (ör. telif hakları ve Google logosu) konumları ile çakışabileceğini unutmayın. Böyle durumlarda kontroller, her konum için belirtilen mantığa göre akacak ve belirtilen konumlarına mümkün olduğunca yakın görünecektir.

Aşağıdaki örnekte, tüm denetimlerin farklı konumlarda etkinleştirildiği basit 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;

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;
Örneği göster

Örneği Dene

Özel Denetimler

Mevcut API denetimlerinin stilini ve konumunu değiştirmenin yanı sıra kullanıcıyla etkileşimi yönetmek için kendi denetimlerinizi de oluşturabilirsiniz. Kontroller, alttaki haritayla hareket eden yer paylaşımları yerine tam olarak bir konumun üstünde duran sabit widget'lardır. Daha temel olarak, kontrol, harita üzerinde mutlak bir konuma sahip olan, kullanıcıya bazı kullanıcı arayüzü gösteren ve genellikle bir etkinlik işleyici aracılığıyla kullanıcı veya haritayla etkileşimi işleyen bir <div> öğesidir.

Kendi özel denetimlerinizi oluşturmak için birkaç kurala ihtiyacınız vardır. Bununla birlikte, aşağıdaki yönergeler en iyi sonucu verebilir:

  • Gösterilecek kontrol öğeleri için uygun CSS tanımlayın.
  • Harita özelliği değişiklikleri veya kullanıcı etkinlikleri (örneğin, 'click' etkinlikleri) için etkinlik işleyicileri aracılığıyla kullanıcı veya haritayla etkileşimi yönetin.
  • Kontrolü tutmak için bir <div> öğesi oluşturun ve bu öğeyi Map adlı özelliğin controls özelliğine ekleyin.

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

Özel Denetimler Çizim

Kontrolü nasıl elde edeceğiniz size bağlıdır. Genel olarak, tüm kontrol sunumunuzu tek bir <div> öğesine yerleştirmenizi öneririz. Böylece denetiminizi tek bir birim olarak değiştirebilirsiniz. Bu tasarım kalıbını, aşağıda gösterilen örneklerde kullanacağız.

İlgi çekici kontroller tasarlamak için CSS ve DOM yapısı konusunda biraz bilgi sahibi olmanız gerekir. Aşağıdaki kod, haritayı Chicago'da ortalanacak şekilde kaydıran bir düğme öğesi oluşturmak için kullanılan bir işlevi gösterir.

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

Özel Denetimlerden İşlenenler

Bir denetimin yararlı olması için aslında bir şeyler yapması gerekir. Kontrolün ne olacağı size bağlıdır. Kontrol, kullanıcı girişine veya Map's durumundaki değişikliklere yanıt verebilir.

Kullanıcı girişlerine yanıt verirken addEventListener()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 Denetimleri Erişilebilir Hale Getirme

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

  • Düğmeler, form öğeleri ve etiketler için her zaman yerel HTML öğeleri kullanın. Yerel denetimleri barındırmak için yalnızca DIV öğesini kapsayıcı olarak kullanın. DIV öğesini hiçbir zaman etkileşimli kullanıcı arayüzü öğesi olarak kullanmayın.
  • Gerektiğinde kullanıcı arayüzü öğesi hakkında bilgi sağlamak için label öğesini, title özelliğini veya aria-label özelliğini kullanın.

Özel Denetimleri Konumlandırma

Özel denetimler, Map nesnesinin controls özelliği içindeki uygun konumlara yerleştirilerek harita üzerinde konumlandırılır. Bu özellik bir google.maps.ControlPosition dizisi içeriyor. Node öğesini (genellikle <div>) uygun bir ControlPosition öğesine ekleyerek haritaya özel bir kontrol eklersiniz. (Bu konumlar hakkında bilgi edinmek için yukarıdaki Konumlandırmayı Kontrol Etme bölümüne bakın.)

Her ControlPosition, bu konumda görüntülenen kontrollerin MVCArray kadarını depolar. Sonuç olarak API'ler konuma eklenen veya konumdan kaldırılan API'ler, kontrolleri uygun şekilde günceller.

API, kontrolleri bir index özelliğinin sırasına göre her bir konuma yerleştirir. Önce daha düşük dizine sahip olan kontroller yerleştirilir. Örneğin, BOTTOM_RIGHT konumundaki iki özel kontrol, bu dizin sırasına göre düzenlenir ve alt dizin değerleri öncelikli olur. Varsayılan olarak tüm özel kontroller, varsayılan API denetimleri yerleştirildikten sonra yerleştirilir. Bir kontrolün index özelliğini negatif bir değer olarak ayarlayarak bu davranışı geçersiz kılabilirsiniz. Özel kontroller logonun soluna veya telif haklarının sağına yerleştirilemez.

Aşağıdaki kod, yeni bir özel denetim oluşturur (oluşturucusu gösterilmez) ve kodu haritaya TOP_RIGHT konumuna ekler.

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

Özel Denetim Örneği

Aşağıdaki kontrol basittir (özellikle 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:

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;
Örneği göster

Örneği Dene

Kontrollere Durum Ekleme

Kontroller, durumu da depolayabilir. Aşağıdaki örnek daha önce gösterilene benzer ancak kontrol, evin konumunu göstermek için kontrolü ayarlayan ek bir "Evi Ayarla" düğmesi içerir. Bunu, bu durumu depolamak ve bu eyalet için alıcı ve ayarlar sağlamak üzere kontrolde bir home_ özelliği oluşturarak 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("div");

    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("div");

    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("div");

    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("div");

    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;
Örneği göster

Örneği Dene