Denetimler

Platform seçin: Android iOS JavaScript

Kontrollere Genel Bakış

Maps JavaScript API üzerinden görüntülenen haritalar, kullanıcıların haritayla etkileşime girmesine 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 yapmadan Maps JavaScript API'nin tüm kontrol davranışını işlemesine 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 denetimlerin tam listesi aşağıda verilmiştir:

• Yakınlaştırma denetimi, haritanın yakınlaştırma düzeyini değiştirmek için "+" ve "-" düğmelerini görüntüler. Bu denetim, varsayılan olarak haritanın sağ alt köşesinde görünür.
• Harita Türü denetimi, kullanıcının bir harita türü (ROADMAP, SATELLITE, HYBRID veya TERRAIN) seçmesine olanak tanıyan, açılır veya yatay düğme çubuk stilinde bulunur. Bu denetim varsayılan olarak haritanın sol üst köşesinde görünür.
• Street View denetimi, Street View'ı 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 denetimi, 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 kısmına yakın bir yerde görünür. Daha fazla bilgi için 45° görüntülere bakın.
• Ölçek kontrolü, bir harita ölçeği öğesi görüntüler. Bu denetim varsayılan olarak devre dışıdır.
• Tam ekran denetimi, 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 kontrolü, iOS cihazlarda görünmez.
• Klavye kısayolları denetimi, haritayla etkileşimde bulunmaya yönelik klavye kısayollarının listesini görüntüler.

Bu harita denetimlerine doğrudan erişemez veya bu kontrollerde değişiklik yapamazsınız. Bunun yerine, kontrollerin görünürlüğünü ve sunumunu etkileyen harita MapOptions alanlarını değiştirirsiniz. Haritanız örneklendirildikten sonra kontrol sunumunu ayarlayabilir (uygun MapOptions ile) veya harita seçeneklerini değiştirmek için setOptions() yöntemini ç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ü

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

Tam ekran kontrolü hariç, kontrollerin davranışı ve görünümü mobil ve masaüstü cihazlarda aynıdır (kontrol listesinde 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'nın varsayılan kullanıcı arayüzü düğmelerini tamamen devre dışı bırakabilirsiniz. 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, temel haritada sırasıyla gestureHandling ve keyboardShortcuts mülkleri tarafından kontrol edilen fare hareketlerini veya 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

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Denetimleri Haritaya Ekleme

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

Bazı kontroller haritada varsayılan olarak görünürken bazıları siz özellikle istemedikçe görünmez. Haritada kontrol ekleme veya kaldırma işlemleri, aşağıdaki MapOptions nesnesinin alanlarında belirtilir. Bunları görünür hale getirmek için true veya gizlemek için false olarak ayarladınız:

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

Varsayılan olarak, harita 200x200 pikselden küçükse tüm denetimler 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 zoomControl alanının ayarına bağlı olarak yakınlaştırma denetiminin görünür olup olmadığı gösterilmektedir:

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

Aşağıdaki örnekte, harita, yakınlaştırma denetimini gizleyecek ve Ölçek kontrolünü görüntüleyecek ş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

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Denetim Seçenekleri

Yapılandırılabilir denetimler sayesinde davranışını veya görünümünü değiştirebilirsiniz. Örneğin, Harita Türü denetimi yatay bir çubuk veya açılır menü olarak görünebilir.

Bu denetimler, haritanın oluşturulmasından sonra MapOptions nesnesindeki uygun kontrol seçenekleri alanlarının değiştirilmesiyle değiştirilir.

Örneğin, Harita Türü kontrolünü değiştirme seçenekleri mapTypeControlOptions alanında belirtilir. Harita Türü denetimi, 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üğme olarak görüntüler.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU, harita türünü açılır menü üzerinden seçmenize olanak tanıyan tek düğmeli bir kontrol görüntüler.
• google.maps.MapTypeControlStyle.DEFAULT, ekran boyutuna bağlı olan ve API'nin gelecekteki sürümlerinde değişebilecek varsayılan davranışı gösterir.

Kontrol seçeneklerinde değişiklik yaparsanız uygun MapOptions değerini true olarak ayarlayarak kontrolü de açıkça etkinleştirmeniz gerektiğini unutmayın. Örneğin, DROPDOWN_MENU stilini gösterecek bir Harita Türü kontrolü ayarlamak için MapOptions nesnesinin içinde 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

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

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Denetimler genellikle harita oluşturulduğunda yapılandırılır. Bununla birlikte, Map API'sinin setOptions() yöntemini çağırıp yeni kontrol seçeneklerini ileterek kontrollerin sunumunu dinamik olarak değiştirebilirsiniz.

Denetimleri Değiştirme

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

• zoomControl, yakınlaştırma denetimini etkinleştirir/devre dışı bırakır. Varsayılan olarak, bu denetim 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 alanını da belirtir.
• mapTypeControl, kullanıcının harita türleri (Harita ve Uydu gibi) arasında geçiş yapmasını sağlayan Harita Türü denetimini etkinleştirir/devre dışı bırakır. Varsayılan olarak bu denetim görünür ve haritanın sol üst köşesinde görünür. mapTypeControlOptions alanı, bu kontrol için kullanılacak MapTypeControlOptions alanını da belirtir.
• streetViewControl, kullanıcının Street View panoramasını etkinleştirmesine olanak tanıyan Pegman denetimini etkinleştirir/devre dışı bırakır. Varsayılan olarak bu denetim, haritanın sağ alt kısmına yakın bir yerde görünür ve görünür. streetViewControlOptions alanı, bu kontrol için kullanılacak StreetViewControlOptions alanını da belirtir.
• rotateControl, 45° görüntülerin yönünü kontrol etmeye yarayan Döndürme kontrolünün görünümünü etkinleştirir/devre dışı bırakır. Varsayılan olarak, kontrolün varlığı, geçerli yakınlaştırma ve konum için belirli bir harita türü için 45° görüntülerin olup olmamasına göre belirlenir. Haritanın rotateControlOptions özelliğini, kullanılacak RotateControlOptions öğesini belirtecek şekilde 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ünür değildir. Bu özellik etkinleştirildiğinde, her zaman haritanın sağ alt köşesinde görünür. scaleControlOptions ayrıca bu kontrol için kullanılacak ScaleControlOptions öğesini 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 ayrıca bu kontrol için kullanılacak FullscreenControlOptions öğesini belirtir.

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

Denetim Konumlandırma

Denetim seçeneklerinin çoğu, kontrolün harita üzerinde nereye yerleştirileceğini belirten bir position özelliği (ControlPosition türünde) içerir. Bu denetimlerin konumu mutlak değildir. Bunun yerine API, kontrolleri belirli kısıtlamalar (harita boyutu gibi) dahilinde mevcut harita öğeleri veya diğer kontroller etrafında döndürerek akıllıca düzenler.

Not: Karmaşık düzenler nedeniyle kontrollerin çakışmayacağına dair herhangi bir garanti verilmez ancak API, bunları akıllı bir şekilde ayarlamaya çalışır.

Aşağıdaki kontrol konumları desteklenir:

• TOP_CENTER, denetimin haritanın üst merkezi boyunca yerleştirilmesi gerektiğini belirtir.
• TOP_LEFT, denetimin "akan" kontrolünün alt öğeleri üst merkeze doğru olacak şekilde, haritanın sol üst kısmı boyunca yerleştirilmesi gerektiğini belirtir.
• TOP_RIGHT, denetimin "akan" kontrolünün alt öğeleri üst merkeze doğru olacak şekilde, haritanın sağ üst kısmı boyunca yerleştirilmesi gerektiğini belirtir.
• LEFT_TOP, denetimin haritanın sol üst tarafına, ancak tüm TOP_LEFT öğelerinin altına yerleştirilmesi gerektiğini belirtir.
• RIGHT_TOP, denetimin haritanın sağ üst kısmı boyunca, ancak tüm TOP_RIGHT öğelerinin altına yerleştirilmesi gerektiğini belirtir.
• LEFT_CENTER, denetimin TOP_LEFT ile BOTTOM_LEFT konumları arasında ortalanmış olarak haritanın sol tarafına yerleştirilmesi gerektiğini belirtir.
• RIGHT_CENTER, denetimin TOP_RIGHT ile BOTTOM_RIGHT konumları arasında ortalanmış olarak haritanın sağ tarafına yerleştirilmesi gerektiğini belirtir.
• LEFT_BOTTOM, kontrolün haritanın sol alt kısmına, ancak tüm BOTTOM_LEFT öğelerinin yukarısına yerleştirilmesi gerektiğini belirtir.
• RIGHT_BOTTOM, kontrolün haritanın sağ alt kısmına, ancak tüm BOTTOM_RIGHT öğelerinin yukarısına yerleştirilmesi gerektiğini belirtir.
• BOTTOM_CENTER, denetimin haritanın alt merkezi boyunca yerleştirilmesi gerektiğini belirtir.
• BOTTOM_LEFT, kontrolün haritanın sol alt kısmına, "akan" denetimin alt öğeleri alt merkeze doğru yerleştirilmesi gerektiğini belirtir.
• BOTTOM_RIGHT, denetimin "akan" kontrolünün alt öğeleri alt merkeze doğru olacak şekilde, haritanın sağ alt tarafına yerleştirilmesi gerektiğini belirtir.

Bu konumların, yerleşimlerini değiştiremeyeceğiniz kullanıcı arayüzü öğelerinin (telif hakları ve Google logosu gibi) konumları ile aynı zamana denk gelebileceğini unutmayın. Böyle durumlarda kontroller, her konum için belirtilen mantığa göre akış yapar ve belirtilen konumlarına mümkün olduğunca yakın görünür.

Aşağıdaki örnekte tüm denetimlerin farklı konumlarda etkin 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

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Özel Denetimler

Mevcut API kontrollerinin stilini ve konumunu değiştirmenin yanı sıra, kullanıcıyla etkileşimi yönetmek için kendi denetimlerinizi oluşturabilirsiniz. Temel haritayla birlikte hareket eden yer paylaşımlı reklamların aksine kontroller, haritanın üzerinde mutlak konumlarda yüzen sabit widget'lardır. Daha temelde kontroller, haritada mutlak bir konuma sahip olan, kullanıcıya bazı kullanıcı arayüzleri görüntüleyen ve kullanıcı veya harita ile etkileşimi genellikle bir etkinlik işleyici aracılığıyla işleyen bir <div> öğesidir.

Kendi özel denetimlerinizi oluşturmak için birkaç kural gereklidir. Bununla birlikte, aşağıdaki yönergeler en iyi uygulama olarak işe yarayabilir:

• Kontrol öğelerinin görüntüleneceği uygun CSS'yi tanımlayın.
• Eşleme mülkü değişiklikleri veya kullanıcı etkinlikleri (örneğin, 'click' etkinlikleri) için etkinlik işleyiciler aracılığıyla kullanıcı veya haritayla etkileşimi yönetin.
• Kontrolü tutmak için bir <div> öğesi oluşturun ve bu öğeyi Map controls mülküne ekleyin.

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

Özel Denetimler Çizim

Kontrol şeklinizi nasıl çizeceğinize siz karar verirsiniz. Genel olarak, kontrol sunumunuzu tek bir birim olarak değiştirebilmeniz 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.

İlgi çekici kontroller tasarlamak için CSS ve DOM yapısı hakkında biraz bilgi sahibi olmanız gerekir. Aşağıdaki kodda, haritayı Chicago'yu merkeze alacak şekilde kaydıran bir düğme öğesi oluşturmaya yarayan bir işlev 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 Kontrollerden Etkinlikleri İşleme

Bir kontrolün faydalı olması için gerçekten bir şey yapması gerekir. Kontrolün ne yapacağına siz karar verirsiniz. Kontrol, kullanıcı girişlerine veya Map durumundaki değişikliklere tepki verebilir.

Kullanıcı girişine yanıt vermek için, desteklenen DOM etkinliklerini işleyen addEventListener() kullanın. Aşağıdaki kod snippet'i, tarayıcının 'click' etkinliği için bir 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 Denetimleri Erişilebilir Yapma

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

• Düğmeler, form öğeleri ve etiketler için her zaman yerel HTML öğeleri kullanın. Bir DIV öğesini yalnızca yerel kontrolleri tutmak için kapsayıcı olarak kullanın; bir DIV öğesini hiçbir zaman etkileşimli bir kullanıcı arayüzü öğesi olarak başka bir amaçla kullanmayın.
• Bir kullanıcı arayüzü öğesi hakkında bilgi sağlamak için uygun durumlarda label öğesi, title veya aria-label özelliğini kullanın.

Özel Denetimleri Konumlandırma

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

Her ControlPosition, bu konumda gösterilen kontrollerin bir MVCArray kadarını depolar. Sonuç olarak, konuma kontroller eklendiğinde veya mevcut kontroller kaldırıldığında API, kontrolleri uygun şekilde günceller.

API, kontrolleri her bir konuma index mülkünün sırasına göre yerleştirir. Daha düşük dizine sahip kontroller önce yerleştirilir. Örneğin, BOTTOM_RIGHT konumundaki iki özel kontrol bu dizin sırasına göre düzenlenecek ve daha düşük dizin değerleri öncelikli olacaktır. Varsayılan olarak, tüm özel kontroller, API varsayılan denetimleri yerleştirildikten sonra yerleştirilir. Bir kontrolün index özelliğini negatif 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şturucu gösterilmez) ve bu denetimi 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 (ancak özellikle faydalı değildir) ve yukarıda gösterilen kalıpları birleştirir. Bu denetim, 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

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Kontrollere Durum Ekleme

Kontroller de durumu saklayabilir. Aşağıdaki örnek daha önce gösterilene benzer ancak kontrol, kontrolü yeni bir ev konumunu gösterecek şekilde ayarlayan ek bir "Ana Sayfayı Ayarla" düğmesi içerir. Bunu, bu durumu depolamak ve bu durum için alıcılar ve belirleyiciler sağlamak üzere kontrol kapsamında 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

Not: TypeScript ve Google Haritalar'ın kullanımıyla ilgili kılavuzu okuyun.

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

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell