author Ahmad Muhardian

Tutorial Google Maps API: Cara Menggunakan Info Window untuk Menampilkan Informasi


Info Window adalah objek yang digunakan untuk menampilkan informasi pada suatu titik koordinat tertentu. Biasanya digunakan bersamaan dengan marker.

Contoh Info Window:

Contoh Info Window

Info Window dapat kita isi dengan kode HTML. Sehingga data yang ditampilkan di dalam jendela Info Window bisa kita berikan style CSS agar terlihat menarik.

Cara Membuat Info Window

Pertama yang harus kita buat adalah isi atau informasi yang akan kita tampilkan di dalam info window.

var contentString = '<h3>Hello Dunia!</h3>';

Konten info window berupa string dari HTML.

Lalu membuat objek infowindow dengan memberikan properti content dari contentString yang sudah dibuat.

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

Selain properti content, info window juga memiliki properti:

  • pixelOffset berisi jarak ujung info window ke koordinat posisi info window diletakkan.
  • position berisi LatLng atau koordinat untuk meletakkan info window pada peta.
  • maxWidth menetapkan lebar maksimum info window dalam piksel.

Sementara untuk method info window ada:

  • open() untuk menampilkan info window;
  • close() untuk menutup info window;
  • setPosition() untuk mengubah posisi info window.

Contoh Kode Info Window

Setelah mengetahui cara membuat info window, sekarang mari kita coba membuat kode lengkapnya.

Coba ikuti kode berikut:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Belajar Info windows</title>
    <style>
      /* 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;
      }
    </style>
  </head>
  <body>
    
    <!-- elemen untuk menampilkan peta -->
    <div id="map"></div>
    
    
    <script>

      function initMap() {
        
        // membuat objek untuk titik koordinat
        var lombok = {lat: -8.5830695, lng: 116.3202515};
        
        // membuat objek peta
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 9,
          center: lombok
        });

        // mebuat konten untuk info window
        var contentString = '<h2>Hello Dunia!</h2>';

        // membuat objek info window
        var infowindow = new google.maps.InfoWindow({
          content: contentString,
          position: lombok
        });
        
        // tampilkan info window pada peta
        infowindow.open(map);

        
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </body>
</html>

Hasilnya:

Hasil info window

Live Demo: http://jsbin.com/qogabi/1/edit?html,output

Membuat Info Window dengan Marker

Biasanya info window digunakan bersama marker. Info Window akan ditampilkan ketika marker diklik.

Untuk melakukan ini, kita harus memanggil fungsi infowindow.open() pada event marker diklik, seperti ini:

marker.addListener('click', function() {
    infowindow.open(map, marker);
});

Kode lengkapnya akan menjadi seperti ini:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Belajar Info windows</title>
    <style>
      /* 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;
      }
    </style>
  </head>
  <body>
    
    <!-- elemen untuk menampilkan peta -->
    <div id="map"></div>
    
    
    <script>

      function initMap() {
        
        // membuat objek untuk titik koordinat
        var lombok = {lat: -8.5830695, lng: 116.3202515};
        
        // membuat objek peta
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 9,
          center: lombok
        });

        // mebuat konten untuk info window
        var contentString = '<h2>Hello Dunia!</h2>';

        // membuat objek info window
        var infowindow = new google.maps.InfoWindow({
          content: contentString,
          position: lombok
        });
        
        // membuat marker
        var marker = new google.maps.Marker({
          position: lombok,
          map: map,
          title: 'Pulau Lombok'
        });
        
        // event saat marker diklik
        marker.addListener('click', function() {
          // tampilkan info window di atas marker
          infowindow.open(map, marker);
        });
        
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </body>
</html>

Hasilnya:

Info window di atas marker

Live Demo: http://jsbin.com/qogabi/3/edit?html,output

Apa Selanjutnya?

Sejauh ini, Kita sudah belajar cara membuat info window pada peta Google Maps.

Untuk eksperimen lebih lanjut, kita bisa:

  • Menambil data dari JSON lalu ditampilkan ke dalam Info Window;
  • Menampilkan gambar dan video di Info Window;
  • Menampilkan Tweet di info window berdasarkan koordinatnya.

Selamat bereksperiman dan berkreasi… 😉

Referensi: developers.google.com

Baca Juga ini

Tutorial Google Maps API: Membuat Marker untuk Menandai Lokasi

Tutorial Google Maps API: Membuat Marker untuk Menandai Lokasi

Marker sering digunakan untuk menandai sebuah lokasi. Biasanya sering digunakan dalam membuat aplikasi Geolocation. Pada kesempatan ini, kita akan belajar membuat marker di Google Maps dan melakukan beberapa modifikasi. Kamu bisa menggunakan contoh kode sebelumnya untuk uji coba. Sudah siap? Mari kita mulai… googletag.cmd.push(function () { googletag.display('div-gpt-ad-multibanner1'); }); Mengenal Objek MarkerMarker merupakan sebuah objek yang bisa kita buat dengan kode berikut: var marker = new google.

Belajar Javascript: Apa itu DOM API? dan Bagaimana Cara Menggunakanya?

Belajar Javascript: Apa itu DOM API? dan Bagaimana Cara Menggunakanya?

Saat kamu memutuskan akan belajar Javascript, maka wajib hukumnya memahami tentang DOM. DOM merupakan metode yang digunakan oleh Javascript untuk...

Tutorial Google Maps API: Menampilkan Peta Google Map di dalam Web

Tutorial Google Maps API: Menampilkan Peta Google Map di dalam Web

Google Maps merupakan produk Google yang memungkinkan kita melihat peta dari seluruh dunia. Bahkan tidak hanya peta, Google Maps juga menyediakan Citra dari beberapa lokasi bangunan, jalan, dan lain-lain. Apa itu Google Maps API?Google Menyediakan Google Maps API yang memungkinkan kita membangun aplikasi dengan memanfaatkan Google Maps. Google Maps API (Application Programming Interface) merupakan sebuah API yang disediakan oleh Google untuk menggunakan peta Google (Google Map) dalam aplikasi yang kita bangun.

7 Manfaat Inspect Element Bagi Web Developer

7 Manfaat Inspect Element Bagi Web Developer

Inspect Element merupakan fitur browser yang dibuat untuk memudahkan pengembangan web. Inspect Element dapat kita akses dengan klik kanan, kemudian memilih Inspect Element, atau bisa juga dengan menekan tombol F12. Adapun manfaat dari Inspect Element untuk web Developer adalah sebagai berikut. 1. Tempat Eksperimen CSSSelain ada console Javascript, bisa dibilang di Inspect Elemen juga ada console-nya CSS. Ya, di sana kita bisa eksperimen kode CSS. Sebelum kita menulis kode CSS, sebaiknya gunakan Inspect Element terlebih dahulu.

Belajar Javascript: Apa itu Objek? dan Bagaimana Cara Membuatnya?

Belajar Javascript: Apa itu Objek? dan Bagaimana Cara Membuatnya?

Artikel ini membahas tentang cara menggunakan objek pada Javascript. Apa saja dasar-dasar objek di Javascript yang harus kamu ketahui...

Belajar Javascript #6: Enam Jenis Operator yang Wajib Kamu Ketahui di Javascript

Belajar Javascript #6: Enam Jenis Operator yang Wajib Kamu Ketahui di Javascript

Operator merupakan hal dasar yang harus dipahami dalam pemrograman. Pada tutorial ini, kita akan belajar dan mengenal 6 jenis operator di Javascript.