Membuat Info Window Google Map API ~ Pemetaan & GIS

Infowindow pada google maps

Ketemu lagi kawan..!!. Mumpung lagi tidak ada kesibukan, saya akan coba membuat tema tentang info window google map api. Info window ini biasa digunakan untuk menampilkan informasi tertentu yang mewakili simbol marker, seperti alamat, nama tempat, atau deskripsi lain dimana pembuat peta (kartografer) dapat menyampaikan informasi singkat kepada pengguna peta. Untuk lebih jelasnya, langsung saja ke TKP ;

1. Siapkan program text editor seperti notepad atau notepad++, kemudian paste kode di bawah ;

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info windows</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>

function initialize() {
  var myLatlng = new google.maps.LatLng(-7.930666666,110.64944444444);
  var mapOptions = {
    zoom: 10,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var infowindow = new google.maps.InfoWindow({
      content: "Infowindow Google Map API"
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'jogja'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

2. Simpan kode dengan format file *.html

3. Jalankan pada browser, maka setelah marker diklik, info window yang baru saja dibuat akan tampil.
4. Jika ingin melakukan pengaturan lebih jauh, dapat juga ditentukan wilayah yang akan ditampilkan dengan mengganti nilai koordinat pada kode yang diblok warna orange.
5. Untuk mengganti text yang akan ditampilkan dalam infowindow, silahkan ganti pesan dalam tanda kutip yang diblok warna kuning.
6. Selamat mencoba, good luck..!!

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Pemetaan & GIS

Membuat Info Window Google Map API

About Admin

Related Post