New!
×Close

Notifications

Disqus Logo
MASIGNCLEAN104

Cara Membuat InfoWindow Dengan InfoBox di Google Maps


Friday, 6 May 2016
Infobox adalah alternatif lain dari info window yang dapat di kostum, infobox di buat menggunakan gambar sebagai background dan kemudian di timpa dengan tag html atau baris html sebagai konten. Dengan InfoBox kita dapat mendesain tampilan info window dengan menarik. InfoBox sendiri merupkan library dari google maps v3.
Membuat InfoWindow Dengan InfoBox di Google Maps
Gambar 1
Lalu bagaimana Membuat InfoWindow Dengan InfoBox di Google Maps  , silahkan simak contoh dari infobox berikut.
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.
Membuat InfoWindow Dengan InfoBox di Google Maps 1
Gambar 2
Berikut syntax javascript nya :
<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 .
Share This :
Hady Eka Saputra