Jendela info

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.
Pilih platform: Android iOS JavaScript
  1. Pengantar
  2. Menambahkan jendela info
  3. Membuka jendela info
  4. Menutup jendela info
  5. Memindahkan jendela info

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 ditetapkan pada peta. Jendela info muncul sebagai Dialog untuk pembaca layar.

InfoWindow menampilkan informasi mengenai sebuah lokasi di Australia.

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

Umumnya, jendela info bertipe hamparan. 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 menentukan kolom ini. Anda dapat membiarkannya pada nilai default.
  • position berisi LatLng tempat jendela info ini ditambatkan. Catatan: InfoWindow dapat dilampirkan ke objek Marker (dalam hal ini posisinya didasarkan pada lokasi penanda) atau pada peta itu sendiri di 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 diperluas agar sesuai dengan kontennya, dan otomatis menggabungkan teks jika jendela info mengisi peta. Jika Anda menambahkan maxWidth, jendela info akan otomatis digabungkan untuk menerapkan lebar yang ditentukan. Jika mencapai lebar maksimum dan terdapat ruang vertikal di layar, jendela info dapat meluas secara vertikal.

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

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

Membuka jendela info

Bila Anda membuatnya, jendela info tidak ditampilkan secara otomatis pada peta. Agar jendela info terlihat, Anda harus memanggil metode open() pada InfoWindow, dengan 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 tidak ditentukan, jendela info akan terbuka di properti position miliknya.
  • shouldFocus menentukan apakah fokus harus dipindahkan di dalam jendela info atau tidak saat dibuka.

TypeScript

// 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,
  });

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

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

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

JavaScript

// 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,
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

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

window.initMap = initMap;
Lihat contoh

Coba Sampel

Contoh berikut menetapkan maxWidth untuk jendela info: lihat contoh.

Menetapkan fokus pada jendela info

Untuk menetapkan fokus pada jendela info, panggil metode focus()-nya. 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() untuk menampilkan jendela info.

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 menjadi fokus sebelum jendela info dibuka. Jika elemen tersebut tidak tersedia, fokus akan dipindahkan kembali ke peta. Untuk mengganti perilaku ini, Anda dapat memproses 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
  • Lampirkan 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.