Bilgi Pencereleri

Platform seçin: Android iOS JavaScript

Giriş

InfoWindow, belirli bir konumda haritanın üzerinde bir pop-up penceresinde içerik (genellikle metin veya resim) gösterir. Bilgi penceresinde bir içerik alanı ve konik bir gövde bulunur. Sapın ucu, haritada belirtilen bir konuma bağlıdır. Bilgi pencereleri, ekran okuyuculara iletişim kutusu olarak gösterilir.

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

Genel olarak bilgi pencereleri bir tür yer paylaşımıdır. Diğer yer paylaşımı türleri hakkında bilgi için Harita üzerinde çizim yapma başlıklı makaleyi inceleyin.

Bilgi penceresi ekleme

InfoWindow oluşturucusu, bilgi penceresini görüntülemek için ilk parametreleri belirten bir InfoWindowOptions nesne değişmezi alır.

InfoWindowOptions nesne değişmezi aşağıdaki alanları içerir:

  • content, bilgi penceresinde gösterilecek bir metin dizesi veya DOM düğümü içerir.
  • pixelOffset, bilgi penceresinin ucundan bilgi penceresinin sabitlendiği konuma kadar olan uzaklığı içerir. Uygulamada bu alanı belirtmeniz gerekmez. Varsayılan değerde bırakabilirsiniz.
  • position, bu bilgi penceresinin sabitlendiği LatLng öğesini içerir. Not: Bir InfoWindow, Marker nesnesine (bu durumda konumu işaretçinin konumuna göre belirlenir) veya haritanın kendisinde belirtilen bir LatLng konumuna eklenebilir. LatLng almak için Geokodlama hizmeti kullanılabilir. Bir işaretçide bilgi penceresi açmak position otomatik olarak günceller.
  • maxWidth, bilgi penceresinin piksel cinsinden maksimum genişliğini belirtir. Varsayılan olarak, bilgi penceresi içeriğine uyacak şekilde genişler ve bilgi penceresi haritayı doldurursa metni otomatik olarak kaydırır. maxWidth eklediğinizde bilgi penceresi, belirtilen genişliği zorunlu kılmak için otomatik olarak kaydırılır. Maksimum genişliğe ulaşırsa ve ekranda dikey alan varsa bilgi penceresi dikey olarak genişleyebilir.

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

İçeriği açıkça boyutlandırmak istiyorsanız <div> öğesine yerleştirebilir ve <div> öğesini CSS ile stilize edebilirsiniz. Kaydırmayı etkinleştirmek için CSS'yi de kullanabilirsiniz. Kaydırmayı etkinleştirmezseniz ve içerik, bilgi penceresindeki boş alanı aşarsa içeriğin bilgi penceresinin dışına taşabileceğini unutmayın.

Bilgi penceresi açma

Bilgi penceresi oluşturduğunuzda bu pencere haritada otomatik olarak gösterilmez. Bilgi penceresini görünür hale getirmek için open() yöntemini InfoWindow üzerinde çağırmalı ve aşağıdaki seçenekleri belirten bir InfoWindowOpenOptions nesne değişmezi iletmelisiniz:

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

TypeScript

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

async function initMap(): Promise<void> {
  // Import the needed libraries.
  await google.maps.importLibrary("maps");
  await google.maps.importLibrary("marker");

  // Get the map element and the inner map from it.
  const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
  const innerMap = mapElement.innerMap;

  // Get the center of the map.
  const center = mapElement.center;

  // Create the info window content.
  const heading = document.createElement("h1");
  heading.textContent = "Uluru (Ayers Rock)";

  const content = document.createElement("div");

  const infoParagraph = document.createElement("p");
  infoParagraph.textContent =
  `Uluru, also referred to as Ayers Rock, is a large sandstone rock formation 
  in the southern part of the Northern Territory, central Australia. It lies
  335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km 
  (280 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.`;

  content.appendChild(infoParagraph);

  const link = document.createElement("a");
  link.href = "https://en.wikipedia.org/w/index.php?title=Uluru";
  link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru";
  link.target = "_blank";
  content.appendChild(link);

  // Create the info window.
  const infowindow = new google.maps.InfoWindow({
    headerContent: heading,
    content: content,
    ariaLabel: "Uluru",
    maxWidth: 500, // Set max width (optional).
  });

  // Create the marker.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: center,
    map: innerMap,
    title: "Uluru (Ayers Rock)",
    gmpClickable: true,
  });

  // Open the info window when the map loads.
  infowindow.open({
    anchor: marker,
    map: innerMap,
  });

  // Open the info window when the marker is clicked.
  marker.addEventListener("gmp-click", () => {
    infowindow.open({
      anchor: marker,
      map: innerMap,
    });
  });
}

initMap();
index.ts

JavaScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary("maps");
    await google.maps.importLibrary("marker");
    // Get the map element and the inner map from it.
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;
    // Get the center of the map.
    const center = mapElement.center;
    // Create the info window content.
    const heading = document.createElement("h1");
    heading.textContent = "Uluru (Ayers Rock)";
    const content = document.createElement("div");
    const infoParagraph = document.createElement("p");
    infoParagraph.textContent =
        `Uluru, also referred to as Ayers Rock, is a large sandstone rock formation 
  in the southern part of the Northern Territory, central Australia. It lies
  335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km 
  (280 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.`;
    content.appendChild(infoParagraph);
    const link = document.createElement("a");
    link.href = "https://en.wikipedia.org/w/index.php?title=Uluru";
    link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru";
    link.target = "_blank";
    content.appendChild(link);
    // Create the info window.
    const infowindow = new google.maps.InfoWindow({
        headerContent: heading,
        content: content,
        ariaLabel: "Uluru",
        maxWidth: 500, // Set max width (optional).
    });
    // Create the marker.
    const marker = new google.maps.marker.AdvancedMarkerElement({
        position: center,
        map: innerMap,
        title: "Uluru (Ayers Rock)",
        gmpClickable: true,
    });
    // Open the info window when the map loads.
    infowindow.open({
        anchor: marker,
        map: innerMap,
    });
    // Open the info window when the marker is clicked.
    marker.addEventListener("gmp-click", () => {
        infowindow.open({
            anchor: marker,
            map: innerMap,
        });
    });
}
initMap();
index.js
Örneği görüntüleyin

Örneği deneyin

Aşağıdaki örnekte bir bilgi penceresinin maxWidth ayarlanmaktadır: view example.

Odak noktasını bir bilgi penceresine ayarlama

Odaklanmayı bir bilgi penceresine ayarlamak için focus() yöntemini çağırın. Odaklanmayı ayarlamadan önce bu yöntemi visible etkinliğiyle birlikte kullanabilirsiniz. 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() işlevini çağırın.

Bilgi penceresini kapatma

Varsayılan olarak, bilgi penceresi kullanıcı kapatma denetimini (bilgi penceresinin sağ üst kısmındaki çarpı) tıklayana veya ESC tuşuna basana kadar açık kalır. Bilgi penceresini 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 penceresinde setPosition() numaralı telefonu arayın veya
  • InfoWindow.open() yöntemini kullanarak bilgi penceresini yeni bir işaretçiye ekleyin. Not: Bir işaretçi iletmeden open() işlevini çağırırsanız InfoWindow, InfoWindowOptions nesne değişmezi aracılığıyla oluşturma sırasında belirtilen konumu kullanır.

Özelleştirme

InfoWindow sınıfı özelleştirme sunmaz. Bunun yerine, tamamen özelleştirilmiş bir pop-up oluşturmayı öğrenmek için özelleştirilmiş pop-up örneğine bakın.