Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps JavaScript API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps JavaScript API dan layanan terkait
  3. Buat kunci yang sesuai
Lanjutkan

Jendela info

  1. Pengantar
  2. Menambahkan jendela info
  3. Membuka jendela info
  4. Menutup jendela info
  5. Memindahkan jendela info

Pengantar

InfoWindow menampilkan materi (biasanya teks atau gambar) dalam jendela munculan di atas peta, pada lokasi yang diberikan. Jendela info memiliki area materi dan batang meruncing. Ujung batang dilekatkan ke lokasi yang ditetapkan pada peta.

Biasanya Anda melekatkan jendela info ke marker, namun Anda juga bisa melekatkan jendela info ke garis lintang/garis bujur tertentu, seperti dijelaskan dalam bagian tentang menambahkan jendela info di bawah ini.

Umumnya, jendela info bertipe overlay. Untuk informasi tentang tipe overlay lainnya, lihat Menggambar pada peta.

Menambahkan jendela info

Konstruktor InfoWindow mengambil literal objek InfoWindowOptions, yang menetapkan parameter awal untuk menampilkan jendela info.

Literal objek InfoWindowOptions berisi bidang-bidang berikut:

  • content berisi string teks atau simpul DOM yang akan ditampilkan di jendela info.
  • pixelOffset berisi offset dari ujung jendela info ke lokasi penambatan jendela info. Dalam praktiknya, Anda tidak perlu menetapkan bidang ini. Anda bisa membiarkannya berisi nilai default.
  • position berisi LatLng untuk menambatkan jendela info ini. Catatan: InfoWindow bisa dilekatkan ke objek Marker (dalam hal ini posisinya berdasarkan lokasi marker) atau di peta itu sendiri pada LatLng yang ditetapkan. Salah satu cara untuk mengambil LatLng adalah dengan menggunakan layanan Geocoding. Membuka jendela info pada marker secara otomatis akan memperbarui position.
  • maxWidth menetapkan lebar maksimum jendela info dalam piksel. Secara default, jendela info akan membesar sesuai materi, 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.

Materi InfoWindow bisa berisi string teks, cuplikan HTML, atau elemen DOM. Untuk menyetel materi, tetapkan dalam InfoWindowOptions atau panggil setContent() pada InfoWindow secara eksplisit.

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

Membuka jendela info

Bila Anda membuatnya, jendela info tidak ditampilkan secara otomatis pada peta. Untuk membuat jendela info terlihat, Anda perlu memanggil metode open() pada InfoWindow, dengan meneruskan Map pada jendela yang akan dibuka, dan opsional, Marker yang akan digunakan untuk menambatkannya. Jika tidak ada marker yang disediakan, jendela info akan dibuka pada properti position.

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

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var 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>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var 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>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

Tampilkan contoh (infowindow-simple.html).

Contoh berikut menyetel maxWidth jendela info: Tampilkan contoh (infowindow-simple-max.html).

Menutup jendela info

Secara default, InfoWindow tetap terbuka hingga pengguna mengeklik kontrol tutup (tanda silang di kanan atas jendela info). Jika mau, Anda bisa menutup jendela info secara eksplisit dengan memanggil metode close().

Memindahkan jendela info

Ada beberapa cara untuk mengubah lokasi jendela info:

  • Panggil setPosition() pada jendela info, atau
  • Lekatkan jendela info pada marker baru menggunakan metode InfoWindow.open(). Catatan: Jika Anda memanggil open() tanpa meneruskan marker, InfoWindow akan menggunakan posisi yang ditetapkan saat pembuatan melalui literal objek InfoWindowOptions.

Kirim masukan tentang...

Google Maps JavaScript API
Google Maps JavaScript API
Butuh bantuan? Kunjungi halaman dukungan kami.