Hai, kali ini kita akan membahas mengenai cara membuat InfoWindow pada Google Maps API untuk javascrip, sebelumnya jangan lupa membaca Mengaktifkan Credential Maps API.
InfoWindow menampilkan konten (biasanya teks atau gambar) di jendela popup di atas peta, di lokasi tertentu. InfoWindow memiliki area konten dan batang yang meruncing. Ujung batang dilampirkan ke lokasi tertentu di peta. Jendela info muncul sebagai Dialog untuk pembaca layar seperti gambar dibawah ini
Terlihat gambar diatas terdapat tulisan “ilmuprogram.com titik Anda xxxxx” dan itu merupakan sebuah infoWindow pada google maps. Bagaimana cara membuat InfoWindow seperti gambar diatas, berikut ini kami berikan source code lengkap untuk membuat sebuah infowindows pada google maps API javascript.
<div id="googleMap" style="width:100%;height:300px;"></div>
<script>
function initMap() {
var mapProp = {
center: new google.maps.LatLng(<?php echo ($reqdata->LAT); ?>, <?php echo ($reqdata->LONG); ?>),
zoom: 19,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var contentString = '<b> ilmuprogram.com <br>Titik Anda <?php echo ($reqdata->LAT); ?>, <?php echo ($reqdata->LONG); ?></b>';
// membuat objek info window
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: new google.maps.LatLng(<?php echo ($reqdata->LAT); ?>, <?php echo ($reqdata->LONG); ?>),
});
infowindow.open(map);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEYANDA&callback=initMap"></script>
