Bilgi Pencereleri

1. Giriş
2. Bilgi penceresi ekleme
3. Bilgi penceresi açma
4. Bilgi penceresini kapatma
5. Bilgi penceresini taşıma

Giriş

InfoWindow, belirli bir konumda, haritanın üst kısmındaki bir pop-up pencerede içeriği (genellikle metin veya resim) görüntüler. Bilgi penceresinde, içerik alanı ve eğimli bir gövde bulunur. Dalın ucu haritada belirli bir konuma iliştirilir. Bilgi pencereleri, ekran okuyuculara iletişim kutusu olarak görünür.

Tipik olarak bir işaretçiye bir bilgi penceresi eklersiniz ancak aşağıdaki bilgi penceresi ekleme bölümünde açıklandığı gibi, belirli bir enlem/boylama bilgi penceresi de ekleyebilirsiniz.

Genel olarak, bilgi pencereleri bir tür yer paylaşımıdır. Diğer bindirme türleri hakkında bilgi için Harita üzerinde çizim konusuna bakın.

Bilgi penceresi ekleme

InfoWindow oluşturucu, bilgi penceresini görüntülemek için gereken başlangıç parametrelerini belirten InfoWindowOptions nesne değişmez değerini alır.

InfoWindowOptions nesnesi değişmez değeri aşağıdaki alanları içerir:

• content, bilgi penceresinde görüntülenecek bir metin dizesi veya DOM düğümü içerir.
• pixelOffset, bilgi penceresinin ucundan bilgi penceresinin sabitlendiği konuma bir ofset içerir. Pratikte bu alanı belirtmeniz gerekmez. Bu alanı varsayılan değerinde bırakabilirsiniz.
• position, bu bilgi penceresinin sabitlendiği LatLng öğesini içerir. Not: InfoWindow, bir Marker nesnesine (konum, işaretçinin konumuna bağlıdır) veya belirli bir LatLng için haritaya eklenebilir. LatLng bilgilerini almanın bir yolu da Coğrafi Kodlama hizmetini kullanmaktır. Bir işaretçi üzerinde bir bilgi penceresi açıldığında position otomatik olarak güncellenir.
• maxWidth, bilgi penceresinin maksimum genişliğini piksel cinsinden belirtir. Varsayılan olarak, bir bilgi penceresi içeriğine sığacak şekilde genişler ve bilgi penceresi haritayı doldurduğunda metni otomatik olarak kaydırır. Bir maxWidth eklerseniz bilgi penceresi, belirtilen genişliği zorunlu kılmak için otomatik olarak sarmalanır. Maksimum genişliğe ulaşırsa ve ekranda dikey bir alan varsa bilgi penceresi dikey olarak genişleyebilir.

InfoWindow öğesinin içeriği bir metin dizesi, HTML snippet'i veya bir DOM öğesi içerebilir. İçeriği ayarlamak için InfoWindowOptions içinde belirtin veya InfoWindow öğesinde setContent() işlevini açıkça çağırın.

İçeriği açıkça boyutlandırmak isterseniz <div> öğesine yerleştirebilir ve <div> öğesini CSS ile biçimlendirebilirsiniz. Kaydırmayı etkinleştirmek için CSS'yi de kullanabilirsiniz. Kaydırma özelliğini etkinleştirmezseniz ve içerik, bilgi penceresindeki alanı aşarsa içerik bilgi penceresinin dışına taşabilir.

Bilgi penceresi açma

Bir bilgi penceresi oluşturduğunuzda, bu pencere haritada otomatik olarak gösterilmez. Bilgi penceresini görünür hale getirmek için InfoWindow üzerinde open() yöntemini çağırarak aşağıdaki seçenekleri belirten bir InfoWindowOpenOptions nesne değişmez değerini iletmeniz gerekir:

• map, açılacak haritayı veya Street View panoramasını belirtir.
• anchor, bir sabitleme noktası (örneğin, Marker) içeriyor. anchor seçeneği null ise veya tanımlanmamışsa bilgi penceresi position özelliğinde açılır.

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap(): void {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";

  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
    });
  });
}

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

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";
  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
    });
  });
}

window.initMap = initMap;
index.js

Aşağıdaki örnek, bir bilgi penceresinin maxWidth özelliğini ayarlar: örneği göster.

Bir bilgi penceresine odaklanmayı ayarlama

Odağı bir bilgi penceresine ayarlamak için focus() yöntemini çağırın. Odağı belirlemeden önce bu yöntemi bir visible etkinliğiyle birlikte kullanmanız önerilir. Bu yöntemin, görünür olmayan bir bilgi penceresinde çağrılmasının herhangi bir etkisi olmaz. Bilgi penceresini görünür hale getirmek için open() numaralı telefonu arayın.

Bilgi penceresini kapatma

Varsayılan olarak, bir bilgi penceresi kullanıcı kapatma denetimini (bilgi penceresinin sağ üst köşesindeki artı işareti) tıklayana veya ESC tuşuna basana kadar açık kalır. Bilgi penceresini, close() yöntemini çağırarak açıkça kapatabilirsiniz.

Bir bilgi penceresi kapatıldığında odak, bilgi penceresi açılmadan önce odakta olan öğeye geri döner. Bu öğe kullanılamıyorsa odak tekrar haritaya taşınır. Bu davranışı geçersiz kılmak için closeclick etkinliğini dinleyebilir ve odağı aşağıdaki örnekte gösterildiği gibi manuel olarak yönetebilirsiniz:

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

Bilgi penceresini taşıma

Bir bilgi penceresinin konumunu değiştirmenin iki yolu vardır:

• Bilgi penceresinden setPosition() numaralı telefonu arayın veya
• InfoWindow.open() yöntemini kullanarak bilgi penceresini yeni bir işaretçiye ekleyin. Not: open() öğesini işaretçi geçirmeden çağırırsanız InfoWindow, oluşturma sırasında InfoWindowOptions nesne değişmez değeri ile belirtilen konumu kullanır.

Özelleştirme

InfoWindow sınıfı özelleştirme sunmaz. Bunun yerine, tamamen özelleştirilmiş bir pop-up'ın nasıl oluşturulacağını görmek için özelleştirilmiş pop-up örneğine bakın.