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.
[code]<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> [/code]Isi dari info window/konten berada pada variabel isiInfo pada baris 15 [code]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";[/code]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.
[code]var infoWindow = new google.maps.InfoWindow({ content: isiInfo, });[/code] 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: [code]marker.addListener('click',function() { infoWindow.open(map,marker); });[/code] Perhatikan pada baris 33 sampai 35, dimana variabel infoWindow akan tampil ketika marker di klik.
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
