BLANTERORBITv102

    Cara Membuat Info Window Sederhana pada Google Maps

    Jumat, 26 Februari 2016
    Sebuah lokasi tidak dapat dengan mudah di terima oleh orang apabila tidak memiliki informasi yang jelas tentang lokasi yang bersangkutan. Dengan adanya fitur info window pada google maps, informasi lokasi dapat di deskripsikan didalamnya. Didalam info window kita dapat memasukan deskripsi lokasi, alamat yang lebih jelas dari lokasi, kemudian beberapa hal lain yang membuat lokasi tersebut mudah di temukan. Karena menurut saya salah satu kekurangan google maps adalah koordinat dengan lokasi terkadang tidak sesuai, hal ini disebabkan google maps hanya berupa gambar yang di potret dari satelit.
    Berikut adalah contoh kode program untuk info window, dan sebagai informasi tambahan bahwasannya syntak dibawah merupakan lanjutan dari salah satu tutorial sebelumnya.
    <html>
  <head>
  <title>Java Sc Developer - MAPS</title>
    <style type="text/css">
      html, body {width: 600px;height: 400px;margin: 0 auto ;padding: 0;}
      h1 {text-align: center;text-transform: uppercase;}
      p {text-align: center;font-size: 14px;text-transform: uppercase;}
      #map {height: 100%;}
    </style>
  </head>
    <script type="text/javascript">
    var map ;
    var posisi = {lat:0.512574, lng:  101.448355};
    var gambar = "http://icons.iconarchive.com/icons/icons8/windows-8/64/Maps-Geo-Fence-icon.png";
    var isiInfo = "I make hello world in my code and now i see my world in my life </br></br>"+
    "Jangan lupa kunjungi <a href='http://www.java-sc.blogspot.com'>Java Source Code</a> Create by Bang Hes";

function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,
          center: posisi
        });
        var marker = new google.maps.Marker({
          position:posisi,
          map: map,
          draggable: true,
          title: 'Java Source Code',
          icon: gambar,
   });
   var infoWindow = new google.maps.InfoWindow({
   content: isiInfo,
   });
   marker.addListener('click',function() {
   infoWindow.open(map,marker);
   });
}
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={API KEY ANDA}c&callback=initMap">
    </script>
  <body>
  <h1>Membuat info window sederhana</h1>
  <p>Java Source Code</p>
    <div id="map"></div>
</p>
  </body>
</html>
    Isi dari info window/konten berada pada variabel isiInfo pada baris 15 
    var isiInfo = "I make hello world in my code and now i see my world in my life </br></br>"+
    "Jangan lupa kunjungi <a href='http://www.java-sc.blogspot.com'>Java Source Code</a> Create by Bang Hes";
    Konten di simpan dalam variabel yang nantinya akan di panggil didalam method. Perlu anda ketahui variabel isiInfo dapat membaca tag dari html sehingga text dapat di kostum/ diberi style sesuai kebutuhan.
    var infoWindow = new google.maps.InfoWindow({
   content: isiInfo,
   });
    Tepatnya sintak diatas berada pada baris 30 - 32, adalah pemanggilan class InfoWindow dari library dengan variabel infoWindow. Variabel infoWindow berisi konten dari variabel isiInfo, yang kemudian dipanggil saat ada method dengan event klik marker tepatnya pada sintak berikut: 
    marker.addListener('click',function() {
   infoWindow.open(map,marker);
   });
    Perhatikan pada baris 33 sampai 35, dimana variabel infoWindow akan tampil ketika marker di klik.

    Home Google Maps Cara Membuat Info Window Sederhana pada Google Maps

    Author

    Hady Eka Saputra

    0 Komentar

    Terimakasih sudah berkesempatan untuk menimba ilmu dari blog JSC, semoga ilmu yang di share dapat bermanfaat. Jika ada pertanyaan mengenai ilmu yang terkait ataupun tidak, mari kita berdiskusi di dalam kolom komentar ini.

    Keep Learning and Keep Sharing

    Emoticon