Denetimler

Platform seçin: Android iOS JavaScript

Denetimlere Genel Bakış

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

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

Haritalarınızda kullanabileceğiniz tüm kontrollerin listesi aşağıda verilmiştir:

  • Yakınlaştırma denetiminde, haritanın yakınlaştırma seviyesini değiştirmek için "+" ve "-" düğmeleri gösterilir. Bu denetim varsayılan olarak haritanın sağ alt köşesinde görünür.
  • Kamera kontrolü hem yakınlaştırma hem de kaydırma denetimlerine sahiptir ve beta kanalı kullanılırken varsayılan olarak yakınlaştırma denetimi yerine gösterilir.
  • Harita Türü denetimi, kullanıcının harita türünü (ROADMAP, SATELLITE, HYBRID veya TERRAIN) seçmesine olanak tanıyan açılır menü veya yatay düğme çubuğu şeklinde sunulur. Bu denetim 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üklenebilecek bir Pegman simgesi içerir. Bu denetim varsayılan olarak haritanın sağ alt kısmında görünür.
  • Döndürme kontrolü, eğik görüntüler içeren haritalar için eğilme 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 45° görüntüler konusuna bakın.
  • Ölçek kontrolü, bir harita ölçeği öğesi gösterir. 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, tam ekran denetimi iOS cihazlarda görünmez.
  • Klavye kısayolları denetimi, harita ile etkileşim kurmak için kullanılabilen klavye kısayollarının listesini gösterir.

Bu harita denetimlerine doğrudan erişmez veya bunları değiştirmezsiniz. Bunun yerine, haritanın MapOptions alanlarını değiştirerek kontrollerin görünürlüğünü ve sunumunu etkileyebilirsiniz. Haritanızı örnekledikten sonra (uygun MapOptions ile) kontrol sunumunu ayarlayabilir veya haritanın seçeneklerini değiştirmek için setOptions()'yi çağırarak 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 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ü

Harita çok küçükse (200x200 piksel) varsayılan olarak tüm kontroller kaybolur. Kontrolü açıkça görünür olarak ayarlayarak bu davranışı geçersiz kılabilirsiniz. Haritaya kontrol ekleme başlıklı makaleyi inceleyin.

Kontrollerin davranışı ve görünümü, tam ekran kontrolü hariç olmak üzere mobil ve masaüstü cihazlarda aynıdır (kontrol listesi bölümünde açıklanan davranışa bakın).

Ayrıca, klavye kullanımı tüm cihazlarda varsayılan olarak açıktır.

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, ana haritadaki fare hareketlerini veya gestureHandling ve keyboardShortcuts özellikleri tarafından kontrol edilen klavye kısayollarını etkilemez.

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

JavaScript

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

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

Örneği Deneyin

Haritaya Denetimler Ekleme

Kullanıcı arayüzü davranışını veya kontrollerini kaldırarak, ekleyerek ya da değiştirerek arayüzünüzü özelleştirebilir ve gelecekteki güncellemelerin bu davranışı değiştirmediğinden emin olabilirsiniz. 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ür, bazıları ise 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 ise false olarak ayarlarsınız:

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

Harita 200x200 pikselden küçükse varsayılan olarak tüm kontroller kaybolur. Kontrolü açıkça görünür olarak ayarlayarak bu davranışı geçersiz kılabilirsiniz. Örneğin, aşağıdaki tabloda harita boyutuna 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üyor mu?
Tümü false Hayır
Tümü true Evet
>= 200x200 piksel undefined Evet
< 200x200 piksel undefined Hayır

Aşağıdaki örnekte, harita Yakınlaştırma 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.

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

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

Örneği Deneyin

Kontrol Seçenekleri

Birkaç kontrol, davranışlarını veya görünümlerini değiştirmenize olanak tanıyacak şekilde yapılandırılabilir. Örneğin, Harita Türü kontrolü yatay çubuk veya açılır menü olarak görünebilir.

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

Ö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üden harita türünü seçmenize olanak tanıyan tek düğmeli bir denetim 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ü denetimini DROPDOWN_MENU stilini sergileyecek ş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, 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;
index.ts

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

Örneği Deneyin

Kontroller genellikle harita oluşturulurken yapılandırılır. Ancak, Map'ın setOptions() yöntemini çağırarak ve bu yönteme yeni kontrol seçenekleri göndererek kontrollerin sunumunu dinamik olarak değiştirebilirsiniz.

Kontrolleri değiştirme

Haritanızı oluştururken haritanın MapOptions nesnesi içindeki alanları kullanarak bir kontrolün sunumunu belirtirsiniz. Bu alanlar aşağıda belirtilmiştir:

  • zoomControl, yakınlaştırma denetimini etkinleştirir/devre dışı bırakır. Bu denetim varsayılan olarak görünür durumdadır ve haritanın sağ alt kısmında gösterilir. zoomControlOptions alanı, bu denetim için kullanılacak ZoomControlOptions değerini de belirtir.
  • cameraControl kamera denetimini etkinleştirir/devre dışı bırakır. Bu kontrol, beta kanalı kullanılarak oluşturulan 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. Bu kontrol varsayılan olarak görünür durumdadır ve haritanın sol üst köşesinde gösterilir. mapTypeControlOptions alanı, bu denetim için kullanılacak MapTypeControlOptions değerini 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 denetim varsayılan olarak görünür durumdadır ve haritanın sağ alt kısmında görünür. streetViewControlOptions alanı, bu denetim için kullanılacak StreetViewControlOptions değerini de belirtir.
  • rotateControl, 45° görüntünün yönünü kontrol etmek için Döndür denetiminin görünürlüğünü etkinleştirir/devre dışı bırakır. Varsayılan olarak, kontrolün varlığı mevcut yakınlaştırma ve konumda belirli bir harita türü için 45° görüntünün olup olmamasına göre belirlenir. Kullanılacak RotateControlOptions değerini belirtmek için haritanın rotateControlOptions değerini ayarlayarak denetimin davranışını değiştirebilirsiniz. 45° görüntü yoksa kontrolü gösteremezsiniz.
  • scaleControl, harita ölçeği sağlayan Ölçek kontrolünü etkinleştirir/devre dışı bırakır. Bu denetim 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 denetimi etkinleştirir/devre dışı bırakır. Bu denetim, masaüstü ve Android cihazlarda varsayılan olarak etkindir. Etkinleştirildiğinde kontrol, haritanın sağ üst kısmına yakın bir yerde görünür. fullscreenControlOptions, bu denetim için kullanılacak FullscreenControlOptions değerini de belirtir.

İlk başta devre dışı bıraktığınız kontroller için seçenekler belirleyebileceğinizi unutmayın.

Konumlandırmayı kontrol etme

Kontrol seçeneklerinin çoğu, kontrolün haritada nereye yerleştirileceğini belirten bir position mülkü (ControlPosition türü) içerir. Bu denetimlerin konumlandırılması mutlak değildir. Bunun yerine API, mevcut harita öğelerinin veya diğer kontrollerin etrafında belirli sınırlamalar (ör. harita boyutu) dahilinde kontrol panellerini akıllıca düzenler.

Not: API, denetimleri akıllıca düzenlemeye çalışsa da karmaşık düzenlerde denetimlerin örtüşmeyeceği konusunda garanti verilemez.

Aşağıdaki kontrol konumları desteklenir:

  • TOP_CENTER, denetimin haritanın üst ortasına yerleştirilmesi gerektiğini gösterir.
  • TOP_LEFT, kontrolün haritanın sol üst kısmına yerleştirilmesi gerektiğini, kontrolün alt öğelerinin ise üst ortağa doğru "aktığını" gösterir.
  • TOP_RIGHT, kontrolün haritanın sağ üst kısmına yerleştirilmesi gerektiğini, kontrolün alt öğelerinin ise üst ortayı "izlemesi" gerektiğini gösterir.
  • LEFT_TOP, kontrolün haritanın sol üst kısmına, ancak TOP_LEFT öğelerinin altına yerleştirilmesi gerektiğini gösterir.
  • RIGHT_TOP, denetimin haritanın sağ üst kısmına, ancak TOP_RIGHT öğelerinin altına yerleştirilmesi gerektiğini gösterir.
  • LEFT_CENTER, kontrolün haritanın sol tarafına, TOP_LEFT ve BOTTOM_LEFT konumları arasında ortalanmak üzere yerleştirilmesi gerektiğini belirtir.
  • RIGHT_CENTER, denetimin haritanın sağ tarafına, TOP_RIGHT ve BOTTOM_RIGHT konumları arasında ortalanmak üzere yerleştirilmesi gerektiğini gösterir.
  • LEFT_BOTTOM, denetimin haritanın sol alt kısmına, ancak BOTTOM_LEFT öğelerinin üstüne yerleştirilmesi gerektiğini gösterir.
  • RIGHT_BOTTOM, kontrolün haritanın sağ alt kısmına, ancak BOTTOM_RIGHT öğelerinin üstüne yerleştirilmesi gerektiğini gösterir.
  • BOTTOM_CENTER, denetimin haritanın alt ortasına yerleştirilmesi gerektiğini gösterir.
  • BOTTOM_LEFT, kontrolün haritanın sol alt kısmına yerleştirilmesi gerektiğini, kontrolün alt öğelerinin ise alt ortağa doğru "aktığını" gösterir.
  • BOTTOM_RIGHT, denetimin haritanın sağ alt kısmına yerleştirilmesi gerektiğini, denetimin alt öğelerinin ise alt ortağa doğru "aktığını" gösterir.

Bu konumların, yerleşimlerini değiştiremediğiniz kullanıcı arayüzü öğelerinin (ör. telif hakkı ve Google logosu) konumlarıyla aynı olabileceğini unutmayın. Bu 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 etkin olduğu ve farklı konumlarda olduğu 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;
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 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, temel harita ile birlikte hareket eden yer paylaşımlarının aksine, haritanın üzerinde sabit konumlarda duran widget'lardır. Daha temel bir ifadeyle, kontrol, haritada mutlak bir konuma sahip olan, kullanıcıya bazı kullanıcı arayüzü görüntüleyen ve genellikle bir etkinlik işleyici aracılığıyla kullanıcı veya harita ile etkileşimi yöneten bir <div> öğesidir.

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

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

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

Özel Çizim Denetimleri

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

Çekici denetimler tasarlamak için CSS ve DOM yapısı hakkında bilgi sahibi olmanız gerekir. Aşağıdaki kodda, haritayı Chicago'da merkezleyecek şekilde kaydıran bir düğme öğesi oluşturma işlevi gösterilmektedir.

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 gelen etkinlikleri işleme

Bir denetimin yararlı olması için gerçekten bir şey yapması gerekir. Kontrolün işleyiş şekli size bağlıdır. Kontrol, kullanıcı girişine veya Map'ın durumundaki değişikliklere yanıt verebilir.

Kullanıcı girişine yanıt vermek için addEventListener() öğesini kullanın. Bu öğe, desteklenen DOM etkinliklerini işler. 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'den 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 etkinlikleri almasını ve ekran okuyucularda doğru şekilde görünmesini sağlamak için:

  • Düğmeler, form öğeleri ve etiketler için her zaman doğal HTML öğelerini kullanın. DIV öğesini yalnızca yerel denetimleri barındıran bir kapsayıcı olarak kullanın. DIV öğesini hiçbir zaman etkileşimli bir kullanıcı arayüzü öğesi olarak yeniden amaçlamayın.
  • Bir kullanıcı arayüzü öğesi hakkında bilgi sağlamak için label öğesini, title özelliğini veya uygun durumlarda aria-label özelliğini kullanın.

Konumlandırma Özel Kontrolleri

Özel kontroller, Map nesnesinin controls özelliğindeki uygun konumlara yerleştirilerek haritada konumlandırılır. Bu mülk bir google.maps.ControlPosition dizisi içerir. Uygun bir ControlPosition'ye Node (genellikle <div>) ekleyerek haritaya özel bir denetim eklersiniz. (Bu konumlar hakkında bilgi edinmek için yukarıdaki Konumlandırmayı kontrol etme bölümüne bakın.)

Her ControlPosition, söz konusu konumda görüntülenen kontrollerin MVCArray'unu saklar. Sonuç olarak, kontroller konuma eklendiğinde veya konumdan kaldırıldığında API, kontrolleri buna göre günceller.

API, denetimleri her konuma bir index mülkünün sırasına göre yerleştirir. Daha düşük dizinli denetimler önce yerleştirilir. Örneğin, BOTTOM_RIGHT konumundaki iki özel kontrol, bu dizin sırasına göre düzenlenir ve daha düşük dizin değerleri öncelikli olur. Varsayılan olarak tüm özel kontroller, API varsayılan kontrolleri yerleştirildikten sonra yerleştirilir. Bir denetimin index mülkünü negatif bir değere 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 kontrol oluşturur (yapıcısı gösterilmez) ve bu kontrolü TOP_RIGHT konumuna haritada 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 Denetleyici Örneği

Aşağıdaki kontrol basittir (özellikle yararlı olmasa da) ve yukarıda gösterilen kalıpları birleştirir. Bu denetim, haritayı belirli bir varsayılan konuma merkezleyerek 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 durum bilgisini de saklayabilir. Aşağıdaki örnek, daha önce gösterilen örneğe benzer ancak kontrol, kontrolü yeni bir ev konumu gösterecek şekilde ayarlayan ek bir "Evi Ayarla" düğmesi içerir. Bunu, denetim içinde bu durumu depolamak ve bu durum için alıcı ve ayarlayıcı sağlamak amacıyla bir home_ mülkü 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("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