Bilgi Pencereleri

Platform seçin: Android iOS JavaScript

Giriş

InfoWindow, belirli bir konumda haritanın üzerinde yer alan bir pop-over 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 eklenir. Bilgi pencereleri, ekran okuyuculara İletiş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şmez değeri alır.

InfoWindowOptions nesne değişmez değeri 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 olan uzaklığı içerir. Uygulamada bu alanı belirtmeniz gerekmez. Varsayılan değerde bırakabilirsiniz.
  • position, bu bilgi penceresinin sabitlendiği LatLng değerini 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 Coğrafi kodlama 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 sığacak şekilde genişler ve bilgi penceresi haritayı doldurursa metni otomatik olarak sarmalar. Bilgi penceresine maxWidth eklerseniz belirtilen genişliği zorlamak için bilgi penceresi otomatik olarak kaydırılır. Maksimum genişliğe ulaşıldığında 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 bir <div> öğesine yerleştirebilir ve CSS ile <div> öğesine stil uygulayabilirsiniz. Kaydırmayı etkinleştirmek için CSS'yi de kullanabilirsiniz. Kaydırmayı etkinleştirmezseniz ve içerik, bilgi penceresindeki kullanılabilir alanı aşarsa içeriğin bilgi penceresinin dışına taşabileceğini unutmayın.

Bilgi penceresi açma

Oluşturduğunuz bilgi pencereleri haritada otomatik olarak gösterilmez. Bilgi penceresinin görünür olması için open() üzerinde InfoWindow yöntemini çağırmanız ve aşağıdaki seçenekleri belirten bir InfoWindowOpenOptions nesne değişmezi iletmeniz gerekir:

  • map, açılacak haritayı veya Street View panoramasını belirtir.
  • anchor, bir bağlantı noktası (örneğin, Marker) içeriyor. anchor seçeneği null veya tanımlanmamışsa bilgi penceresi position özelliğiyle 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 init(): Promise<void> {
    // Import the needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        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 InfoWindow({
        headerContent: heading,
        content,
        ariaLabel: 'Uluru',
        maxWidth: 500, // Set max width (optional).
    });

    // Create the marker.
    const marker = new 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,
        });
    });
}

void init();

JavaScript

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

async function init() {
    // Import the needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        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 InfoWindow({
        headerContent: heading,
        content,
        ariaLabel: 'Uluru',
        maxWidth: 500, // Set max width (optional).
    });

    // Create the marker.
    const marker = new 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,
        });
    });
}

void init();
Örneği görüntüleyin

Aşağıdaki örnekte, bir bilgi penceresinin maxWidth değeri ayarlanmaktadır: örneği görüntüleyin.

Bilgi penceresine odaklanma

Bir bilgi penceresine odaklanmak için focus() yöntemini çağırın. Odaklanmayı ayarlamadan önce bu yöntemi bir 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() yöntemini çağırın.

Bilgi penceresini kapatma

Varsayılan olarak, bilgi penceresi kullanıcı kapatma kontrolünü (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.

Bilgi penceresi kapatıldığında odak, bilgi penceresi açılmadan önce odaklanılan öğeye geri döner. Bu öğe kullanılamıyorsa odak haritaya geri 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şmez değeri aracılığıyla oluşturma sırasında belirtilen konumu kullanır.