Google Haritalar - Bilgi Penceresi

İşaretçiler, çokgenler, çoklu çizgiler ve diğer geometrik şekillere ek olarak, harita üzerinde bir Bilgi Penceresi de çizebiliriz. Bu bölümde Bilgi Penceresinin nasıl kullanılacağı açıklanmaktadır.

Pencere Ekleme

Bilgi Penceresi haritaya her türlü bilgiyi eklemek için kullanılır. Örneğin, haritadaki bir konum hakkında bilgi vermek istiyorsanız, bir bilgi penceresi kullanabilirsiniz. Genellikle bilgi penceresi bir işaretleyiciye eklenir. Örneğini oluşturarak bir bilgi penceresi ekleyebilirsiniz.google.maps.InfoWindowsınıf. Aşağıdaki özelliklere sahiptir -

Content - Bu seçeneği kullanarak içeriğinizi String formatında aktarabilirsiniz.
position - Bu seçeneği kullanarak bilgi penceresinin konumunu seçebilirsiniz.
maxWidth- Varsayılan olarak, bilgi penceresinin genişliği metin kaydırılana kadar uzatılır. MaxWidth belirleyerek, bilgi penceresinin boyutunu yatay olarak sınırlayabiliriz.

Misal

Aşağıdaki örnek, işaretçinin nasıl ayarlanacağını ve üzerinde bir bilgi penceresinin nasıl belirtileceğini gösterir -

<!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>

Aşağıdaki çıktıyı üretecektir -