Google 地圖 - 資訊視窗

除了標記、多邊形、折線和其他幾何形狀外，我們還可以在地圖上繪製資訊視窗。本章介紹如何使用資訊視窗。

新增視窗

資訊視窗用於向地圖新增任何型別的資訊。例如，如果希望提供地圖上某一位置的相關資訊，可以使用資訊視窗。通常情況下，資訊視窗會附著到標記。你可以透過對 google.maps.InfoWindow 類例項化來附加一個資訊視窗。它具有以下屬性 -

內容 - 可以使用此選項以字串格式傳遞你的內容。
位置 - 可以使用此選項選擇資訊視窗的位置。
最大寬度 - 預設情況下，資訊視窗的寬度將延伸到文字折行為止。透過指定最大寬度，我們可以限制資訊視窗的水平大小。

示例

以下示例展示瞭如何設定標記並在其上方指定一個資訊視窗 -

現場示範

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

它會生成以下輸出 -

列印頁面