Posted by  |
| 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;
}<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>
