 |
| Gambar 1 |
Pertama tambahkan library infobox.js dan google maps API kedalam kode html anda tepatnya pada bagian setelah </head>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_ANDA"> </script> <script type="text/javascript" src="infobox.js"></script>
Anda dapat mendownload infobox.js dr link berikut : Download.
Ketikan kode javascript berikut pada kode html anda.
<script type="text/javascript">
function initialize() {
var posisi = new google.maps.LatLng(0.512574, 101.448355);
var myMapOptions = {
zoom: 15
,center: posisi
,mapTypeId: google.maps.MapTypeId.ROADMAP
};
var theMap = new google.maps.Map(document.getElementById("canvas"), myMapOptions);
var marker = new google.maps.Marker({
map: theMap,
draggable: true,
position: posisi,
visible: true
});
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: #1bbc9b; padding: 5px;color:#fff";
boxText.innerHTML = "<center><h5>Simpang Tiga Deket Gramedia</h5></center>";
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "-5px -10px 0px 0px"
,closeBoxURL: "https://cdn2.iconfinder.com/data/icons/officeicons/PNG/24/Close.png"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function (e) {
ib.open(theMap, this);
});
var ib = new InfoBox(myOptions);
ib.open(theMap, marker);
}
</script>
Agar dapat ditampilkan dalam elemen DIV pada html, silahkan perhatikan peletakan tag berikut :
<div class="row"> <div class="col-md-12"> <div id="canvas"></div> </div> </div>
Dengan ada tag id "canvas", secara otomatis javascript akan menimpa atau menampilkan maps pada elemn ini. Jangan lupa untuk menyeting ukuran dari maps dengan css , seperti berikut :
#canvas {
width: 100%;
height:70%;
margin:0px 5px 5px 0px;
border: 5px solid #1bbc9b;
}
Jika maps anda masih belum muncul , maka tambah atribut onload pada tag body yang berfungsi untuk memproses fungsi pada script maps.<body onload="initialize()">
Untuk demo infobox dasar silahkan kunjungi link berikut : Membuat InfoWindow Dengan InfoBox di Google Maps. Selanjutnya saya akan berikan script untuk membuat tampilan InfoBox lain, sebenarnya infobox hanya menggunakan gambar sebagai background.
 |
| Gambar 2 |
<script type="text/javascript">
function initialize() {
var posisi = new google.maps.LatLng(0.512574, 101.448355);
var myMapOptions = {
zoom: 15
,center: posisi
,mapTypeId: google.maps.MapTypeId.ROADMAP
};
var theMap = new google.maps.Map(document.getElementById("canvas"), myMapOptions);
var marker = new google.maps.Marker({
map: theMap,
draggable: true,
position: posisi,
visible: true
});
var boxText = document.createElement("div");
boxText.style.cssText = "padding: 5px;color:#fff";
boxText.innerHTML = "<div ><div style='text-align:center;padding:7px'><h4><i class='fa fa-home'></i> Rumah Java Service and Consult</h4></div></div><div ><div><div style='width:130px;float:left'><center><img src='1.jpg' width='100px' height='100px'></center></div><div style='width:250px;float:right'><p style='margin-left:0px;'>Ini adalah isi kontennya yang jelas seterah saja mau isi konten seperti apa<br>Jalan mana saja : <h3><a href='www.java-sc.web.id'>@Java-Sc</a></h3> </p></div></div></div></div>";
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-60, -260)
,zIndex: null
,boxStyle: {
background: "url('infobox.png') no-repeat"
,width: "400px"
,height:"220px"
}
,closeBoxMargin: "-5px -3px 0px 0px"
,closeBoxURL: "https://cdn2.iconfinder.com/data/icons/officeicons/PNG/24/Close.png"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function (e) {
ib.open(theMap, this);
});
var ib = new InfoBox(myOptions);
ib.open(theMap, marker);
}
</script>
Jika ingin merubah background silahkan ubah pada baris 27 , itu adalah background yang saya gunakan. Anda bisa mendesain menggunakan photoshop atau gimp dan timpa dengan nama file yang anda gunakan. Untuk demo silahkan kunjungi link berikut : Membuat InfoWindow Dengan InfoBox di Google Maps .
bagus tutorialnya, jika kita ingin memasukkan data markernya sepert long, lat, nama, dan alamatnya dari database ke infobox apakah bisa? tolong dijelaskan ya kak.. makasih banyak..
BalasHapusBisa gan, silahkan saja lihat tutorial yang ini http://www.java-sc.com/2016/07/google-maps-dengan-php-dan-mysql.html , kalau masalah infobox silahkan di sesuaikan saja.
HapusBantu follow ya gan, atau bookmark. :-d
Maaf gan, link untuk infobox.js nya tidak aktif yah? Atau filenya seperti diatas yg disebutkan?
BalasHapusTerimakasih sudah melapor, link sudah di perbaiki. 8-)
Hapuslink nya sudah mati lagi gan, kalau bisa emailkan ke nugsan05@gmail.com ,thankss
HapusBisa coba pakai yang ini, https://gist.github.com/jinthagerman/68a05aed074e0677834a. saya udah gak ada nyimpan filenya lagi. b-(
HapusPak Hadi, kalau untuk di infowindownya ada url link nya bagaimana yah? saat ini saya menggunakan http://www.java-sc.com/2016/07/google-maps-dengan-php-dan-mysql.html
BalasHapusmisalnya pas indowindow detail saya klik muncul ke link baru.
buat tag html biasa aja agan (a href="link"). kalau mau pindah ke halaman pas click infowindow bisa tambahin event untuk load halaman .
Hapus