Google Maps - Jendela Info

Selain penanda, poligon, polylines, dan bentuk geometris lainnya, kita juga dapat menggambar Jendela Info pada peta. Bab ini menjelaskan cara menggunakan Jendela Info.

Menambahkan Jendela

Jendela Info digunakan untuk menambahkan segala jenis informasi ke peta. Misalnya, jika Anda ingin memberikan informasi tentang suatu lokasi di peta, Anda dapat menggunakan jendela info. Biasanya jendela info dilampirkan ke penanda. Anda dapat melampirkan jendela info dengan membuat instancegoogle.maps.InfoWindowkelas. Ini memiliki properti berikut -

Content - Anda dapat mengirimkan konten Anda dalam format String menggunakan opsi ini.
position - Anda dapat memilih posisi jendela info menggunakan opsi ini.
maxWidth- Secara default, lebar jendela info akan direntangkan hingga teks dibungkus. Dengan menentukan maxWidth, kita dapat membatasi ukuran jendela info secara horizontal.

Contoh

Contoh berikut menunjukkan cara menyetel marker dan menentukan jendela info di atasnya -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });
				
            infowindow.open(map,marker);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini akan menghasilkan keluaran sebagai berikut -