グーグルマップ-情報ウィンドウ

マーカー、ポリゴン、ポリライン、その他の幾何学的形状に加えて、マップ上に情報ウィンドウを描画することもできます。この章では、情報ウィンドウの使用方法について説明します。

ウィンドウの追加

情報ウィンドウは、マップにあらゆる種類の情報を追加するために使用されます。たとえば、地図上の場所に関する情報を提供する場合は、情報ウィンドウを使用できます。通常、情報ウィンドウはマーカーに添付されています。インスタンス化することで情報ウィンドウを添付できますgoogle.maps.InfoWindowクラス。以下の特性があります-

Content −このオプションを使用して、コンテンツを文字列形式で渡すことができます。
position −このオプションを使用して、情報ウィンドウの位置を選択できます。
maxWidth−デフォルトでは、情報ウィンドウの幅はテキストが折り返されるまで引き伸ばされます。maxWidthを指定することにより、情報ウィンドウのサイズを水平方向に制限できます。

例

次の例は、マーカーを設定し、その上に情報ウィンドウを指定する方法を示しています-

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

次の出力が生成されます-