Source Code Google Maps API Javascript - google.maps.InfoWindow | ILMU PROGRAMMER
Home » Source Code Google Maps API Javascript – google.maps.InfoWindow

Source Code Google Maps API Javascript – google.maps.InfoWindow

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

InfoWindow Google Maps

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>

Leave a Comment

 
Open chat
Perlu Bantuan Konsultasi ?
Hallo Pembaca.
Telp (021) 55670115 untuk terhubung langsung dengan kami.

Apakah ada yang bisa kami bantu?