Bilgi Pencereleri

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

Giriş

InfoWindow, içeriği (genellikle metin veya resimler) haritanın üst kısmındaki bir pop-up pencerede belirli bir konumda görüntüler. Bilgi penceresinde bir içerik alanı ve konnektörlü bir sap vardır. Sapın ucu, haritadaki belirli bir konuma eklenir. Bilgi pencereleri, ekran okuyuculara yönelik bir iletişim kutusu olarak görünür.

Genellikle işaretçiye bir bilgi penceresi eklersiniz. Ayrıca, aşağıdaki bilgi penceresi ekleme bölümünde açıklandığı gibi belirli bir enlem/boylam için de bilgi penceresi ekleyebilirsiniz.

Genel olarak, bilgi pencereleri bir yer paylaşımı türüdür. Diğer yer paylaşımı türleri hakkında bilgi edinmek için Haritada çizim bölümüne göz atın.

Bilgi penceresi ekleme

InfoWindow oluşturucu, bilgi penceresinin görüntülenmesi için kullanılacak ilk parametreleri belirten InfoWindowOptions nesne değişmez değeri alır.

InfoWindowOptions nesne 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 sabitleneceği konuma kadar olan bir ofset içerir. Pratikte bu alanı belirtmeniz gerekmez. Varsayılan değeri olduğu gibi bırakabilirsiniz.
• position, bu bilgi penceresinin sabitlendiği LatLng öğesini içerir. Not: InfoWindow öğesi bir Marker nesnesine eklenebilir (bu durumda konumu, işaretçinin konumuna dayalıdır) veya belirtilen LatLng konumundaki harita üzerine eklenebilir. Bir LatLng almanın yollarından biri, Coğrafi Kodlama hizmetini kullanmaktır. İşaretçi üzerinde bilgi penceresi açıldığında position öğesi otomatik olarak güncellenir.
• maxWidth, bilgi penceresinin maksimum genişliğini piksel cinsinden belirtir. Varsayılan olarak, bilgi penceresi içeriğine sığacak şekilde genişler ve bilgi penceresi haritayı doldurduğunda metni otomatik olarak sarmalar. Bir maxWidth eklerseniz bilgi penceresi, belirtilen genişliği zorunlu kılmak için otomatik olarak sarmalanır. Bilgi, maksimum genişliğe ulaşırsa ve ekranda dikey alan varsa bilgi penceresi dikey olarak genişleyebilir.

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

İçeriği açık bir şekilde boyutlandırmak istiyorsanız bir <div> öğesine yerleştirebilir ve <div> öğesini CSS ile biçimlendirebilirsiniz. Kaydırma özelliğini etkinleştirmek için CSS'yi de kullanabilirsiniz. Kaydırma özelliğini etkinleştirmezseniz ve içerik bilgi penceresinde sunulan alanı aşarsa içeriğin bilgi penceresinden dökülebileceğini unutmayın.

Bilgi penceresi açma

Bilgi penceresi oluşturduğunuzda, harita otomatik olarak gösterilmez. Bilgi penceresini görünür hale getirmek için InfoWindow üzerinde open() yöntemini çağırmanız ve aşağıdaki seçenekleri belirten bir InfoWindowOpenOptions nesnesi iletmeniz gerekir:

• map, açılacak haritayı veya Street View panoramasını belirtir.
• anchor bir bağlantı noktası içeriyor (örneğin, Marker). anchor seçeneği null veya tanımsızsa bilgi özelliği 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 örnekte, bilgi penceresinin maxWidth değeri ayarlanmıştır: örneği görüntüleyin.

Bilgi penceresine odaklanma

Odağı bir bilgi penceresine ayarlamak için focus() yöntemini çağırın. Odaklanmayı ayarlamadan önce bir visible etkinliğiyle birlikte bu yöntemi kullanabilirsiniz. Bu yöntemin görünmeyen bir bilgi penceresinde çağırmanın hiçbir etkisi yoktur. Bilgi penceresini görünür hale getirmek için open() numaralı telefonu arayın.

Bilgi penceresini kapatma

Varsayılan olarak, kullanıcı kapat düğmesini (bilgi penceresinin sağ üst tarafında bir çarpı) tıklayana veya ESC tuşuna basana kadar bilgi penceresi açık kalır. Bilgi yöntemini close() yöntemini çağırarak da açıkça kapatabilirsiniz.

Bir bilgi penceresi kapatıldığında odak, bilgi penceresi açılmadan önce odaklanılan öğ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

Bilgi penceresinin konumunu değiştirmenin birkaç yolu vardır:

• Bilgi penceresinden setPosition() adlı kişiyi arayın veya
• Bilgi yöntemini, InfoWindow.open() yöntemini kullanarak yeni bir işaretçiye ekleyin. Not: open() adlı işaretçiyi işaretlemeden çağırırsanız InfoWindow, yapım sırasında belirtilen nesneyi InfoWindowOptions nesne değişmez değeri aracılığıyla kullanır.

Özelleştirme

InfoWindow sınıfı özelleştirme sunmuyor. Bunun yerine, tamamen özelleştirilmiş bir pop-up'ın nasıl oluşturulacağını görmek için özelleştirilmiş pop-up örneği bölümünü inceleyin.