Jendela Info

Pilih platform: Android iOS JavaScript

Pengantar

InfoWindow menampilkan konten (biasanya teks atau gambar) dalam jendela pop-up di atas peta, pada lokasi yang ditentukan. Jendela info memiliki area konten dan batang meruncing. Ujung batang dilekatkan ke lokasi yang ditentukan pada peta. Jendela info muncul sebagai Dialog untuk pembaca layar.

Biasanya Anda akan melekatkan jendela info ke penanda, tetapi Anda juga dapat melekatkan jendela info ke garis lintang/bujur tertentu, seperti yang dijelaskan di bagian tentang cara menambahkan jendela info di bawah.

Umumnya, jendela info berjenis overlay. Untuk informasi tentang jenis overlay lainnya, lihat Menggambar pada peta.

Menambahkan jendela info

Konstruktor InfoWindow menggunakan literal objek InfoWindowOptions, yang menentukan parameter awal untuk menampilkan jendela info.

Literal objek InfoWindowOptions berisi kolom berikut:

content berisi string teks atau node DOM untuk ditampilkan di jendela info.
pixelOffset berisi offset dari ujung jendela info ke lokasi penambatan jendela info. Dalam praktiknya, Anda tidak perlu menetapkan kolom ini. Anda dapat mempertahankan nilai defaultnya.
position berisi LatLng tempat jendela info ini ditambatkan. Catatan: InfoWindow dapat dilekatkan ke objek Marker (dalam hal ini, posisinya didasarkan pada lokasi penanda) atau di peta itu sendiri pada LatLng yang ditentukan. Salah satu cara untuk mengambil LatLng adalah dengan menggunakan layanan Geocoding. Membuka jendela info pada penanda akan otomatis memperbarui position.
maxWidth menentukan lebar maksimum jendela info dalam piksel. Secara default, jendela info akan membesar sesuai konten, dan melipat teks secara otomatis jika jendela info memenuhi peta. Jika Anda menambahkan maxWidth, jendela info akan melipat secara otomatis untuk memaksakan lebar yang ditetapkan. Jika mencapai lebar maksimum dan ada ruang vertikal di layar, jendela info bisa membesar secara vertikal.

Konten InfoWindow dapat berisi string teks, cuplikan HTML, atau elemen DOM. Untuk menetapkan konten, tentukan konten dalam InfoWindowOptions atau panggil setContent() di InfoWindow secara eksplisit.

Jika ingin mengukur konten secara eksplisit, Anda dapat menempatkannya dalam elemen <div> dan memberi gaya <div> dengan CSS. Anda juga dapat menggunakan CSS untuk mengaktifkan scrolling. Perhatikan, jika Anda tidak mengaktifkan scrolling dan konten melebihi ruang yang tersedia di jendela info, konten bisa menyebar keluar dari jendela info.

Praktik terbaik: Untuk pengalaman pengguna yang terbaik, seharusnya hanya satu jendela info yang dibuka di peta pada satu waktu. Lebih dari satu jendela info akan membuat peta tampak berantakan. Jika Anda hanya memerlukan satu jendela info pada satu waktu, buat satu objek InfoWindow saja lalu buka objek ini di lokasi atau penanda yang berbeda saat peristiwa peta terjadi, seperti klik pengguna. Jika memerlukan lebih dari satu jendela info, Anda dapat menampilkan beberapa objek InfoWindow secara bersamaan.

Membuka jendela info

Jendela info tidak akan otomatis ditampilkan pada peta setelah Anda membuatnya. Agar jendela info terlihat, Anda harus memanggil metode open() pada InfoWindow, yang meneruskan literal objek InfoWindowOpenOptions yang menentukan opsi berikut:

map menentukan peta atau panorama Street View yang akan dibuka.
anchor berisi titik link (misalnya, Marker). Jika opsi anchor adalah null atau undefined (tidak ditentukan), jendela info akan terbuka di properti position.

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

Lihat contoh

Mencoba Contoh

JSFiddle.net

Contoh berikut menetapkan maxWidth jendela info: lihat contoh.

Menetapkan fokus pada jendela info

Untuk menetapkan fokus pada jendela info, panggil metode focus() terkait. Pertimbangkan untuk menggunakan metode ini bersama dengan peristiwa visible sebelum menetapkan fokus. Memanggil metode ini pada jendela info yang tidak terlihat tidak akan berpengaruh. Panggil open() agar jendela info terlihat.

Menutup jendela info

Secara default, jendela info tetap terbuka hingga pengguna mengklik kontrol tutup (tanda silang di kanan atas jendela info), atau menekan tombol ESC. Anda juga dapat menutup jendela info secara eksplisit dengan memanggil metode close().

Saat jendela info ditutup, fokus akan berpindah kembali ke elemen yang sedang difokuskan sebelum jendela info dibuka. Jika elemen tersebut tidak tersedia, fokus akan dipindahkan kembali ke peta. Untuk mengganti perilaku ini, Anda dapat memantau peristiwa closeclick, dan mengelola fokus secara manual seperti yang ditunjukkan dalam contoh berikut:

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

Memindahkan jendela info

Ada beberapa cara untuk mengubah lokasi jendela info:

Panggil setPosition() di jendela info, atau
Lekatkan jendela info ke penanda baru menggunakan metode InfoWindow.open(). Catatan: Jika Anda memanggil open() tanpa meneruskan penanda, InfoWindow akan menggunakan posisi yang ditentukan saat pembuatan melalui literal objek InfoWindowOptions.

Penyesuaian

Class InfoWindow tidak menawarkan penyesuaian. Sebagai gantinya, lihat contoh pop-up yang disesuaikan untuk melihat cara membuat pop-up yang disesuaikan sepenuhnya.