Googleマップ API•テック

Google Maps（グーグルマップ）上にInfoWindowを設定する方法

2021年1月10日 by single コメントはまだありません

グーグルマップ上に吹き出し（InfoWindow）をつけてみましょう。

なお、Google Maps関連の記事についてはこちらにまとめてありますので、ご覧ください。

Google Maps（グーグルマップ）上にInfoWindowを設定する方法

サンプルでは二つのマーカーに吹き出しを付けたのと、吹き出し（情報ウインドウ）のみつけたバターンです。

サンプル

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Sample Map</title>
   <script defer
       src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap" >
   </script>
   <style type="text/css">
      #map_canvas {
         width: 100%;
         height:100%;
      }
      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }
   </style>
   <script>
      var map;
      var marker1;
      var marker2;

      function initMap() {
         var myLatlng = new google.maps.LatLng(35.68517826190777,139.7528236934712);

         var mapOptions = {
           zoom: 16,
           center: {lat:35.68345934357062,lng: 139.76085053257782}
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

         marker1= new google.maps.Marker({
             position: myLatlng,
             map: map,
             title:"皇居",
             label:'1'
         });



         const contentString =
         '<div id="content">' +
            '<div id="siteNotice">' +
            "</div>" +
            '<h1 id="firstHeading" class="firstHeading">皇居東御苑</h1>' +
            '<div id="bodyContent">' +
            "<p><b>江戸城跡</b> で現在は、吹上御所として利用されている。</p>" +
            "<p><img src='https://www.single-life.tokyo/wp-content/uploads/2021/01/ootemonjpg.jpg' border='0' alt='大手門' /></p>" +
            "</div>" +
         "</div>";

         var infowindow1 = new google.maps.InfoWindow({
                  content: contentString,
               });

         marker1.addListener("click", function () {
            infowindow1.open(map, marker1);
         });


         marker2= new google.maps.Marker({
             position: {lat:35.6853516737921,lng:139.76325476423142},
             map: map,
             label:'2',
             title:"大手町駅"
         });
         var infowindow2 = new google.maps.InfoWindow({content:'大手町駅'});

         google.maps.event.addListener( marker2, 'mouseover', function(evt){
            infowindow2.open(map, marker2);
         });


         google.maps.event.addListener( marker2, 'mouseout', function(evt){
            infowindow2.close();
         });

         var optWindow = {
            position: new google.maps.LatLng( 35.681247751534606, 139.76713379355968) ,
            content: "東京駅" ,
            disableAutoPan: false ,
            maxWidth: 300 ,
            pixelOffset: new google.maps.Size( 0, 0 ) ,
            zIndex: 99 ,
         } ;
         var infowindow3 = new google.maps.InfoWindow(optWindow);
         infowindow3.open(map);

         google.maps.event.addListener( infowindow3, 'closeclick', function(evt){
            alert('ウインドは閉じません');
            infowindow3.open(map);
         });

      }

   </script>
</head>
<body>
   <div id="map_canvas"></div>

</body>
</html>

デモ

google.maps.InfoWindow

マップ上に吹き出しをつけるには「InfoWindow」を利用します。

コードはサンプルを参考にしていあります。

マーカーをクリックしてウインドウ表示

         var myLatlng = new google.maps.LatLng(35.68517826190777,139.7528236934712);


         marker1= new google.maps.Marker({
             position: myLatlng,
             map: map,
             title:"皇居",
             label:'1'
         });

まず、皇居の位置にマーカーを設定します。サンプルでは１番のマーカーを設定しました。

         const contentString =
         '<div id="content">' +
            '<div id="siteNotice">' +
            "</div>" +
            '<h1 id="firstHeading" class="firstHeading">皇居東御苑</h1>' +
            '<div id="bodyContent">' +
            "<p><b>江戸城跡</b> で現在は、吹上御所として利用されている。</p>" +
            "<p><img src='https://www.single-life.tokyo/wp-content/uploads/2021/01/ootemonjpg.jpg' border='0' alt='大手門' /></p>" +
            "</div>" +
         "</div>";

         var infowindow1 = new google.maps.InfoWindow({
                  content: contentString,
               });

次にInfoWindowのオブジェクトを生成します。

生成時に「InfoWindowOptions」のパラメータを渡します。

プロパティ「content」にウインドウの中に表示したい内容を設定します

HTMLのコードも設定可能で、サンプルでは、皇居東御苑の簡単な説明と大手門の写真を表示するようにしてあります。

      marker1.addListener("click", function () {
            infowindow1.open(map, marker1);
         });

そして、マーカークリック時に、吹き出しを表示するようにイベントを仕掛けておきます。openメソッドがウインドウの表示になります。

opemメソッドのパラメータ

1ウインドウを表示するマップ【任意】
2InfoWindow と紐づけたいオブジェクト【任意】

皇居に設定したマーカーをクリックすると、openメソッドが実行されるようになっていますので、ナンバー１のマーカーをクリックしてみてください。

そうすると、事前設定した皇居の説明と写真がでてきます。

マウスオーバーでウインドウ表示

次にマウスオーバーで吹き出しを表示するようにします。

まずは大手町駅にナンバー２のラベルを付けてマーカーを立てます。


         marker2= new google.maps.Marker({
             position: {lat:35.6853516737921,lng:139.76325476423142},
             map: map,
             label:'2',
             title:"大手町駅"
         });
         var infowindow2 = new google.maps.InfoWindow({content:'大手町駅'});

あわせて、InfoWindoオブジェクトも生成し、その内容（content）に「大手町駅」というラベルを設定しておきます。

マウスオーバーで表示するようにイベントを仕掛けます。

         google.maps.event.addListener( marker2, 'mouseover', function(evt){
            infowindow2.open(map, marker2);
         });

まずは、マーカーのmouseoverイベントで、ウインドウを開くようにします。

         google.maps.event.addListener( marker2, 'mouseout', function(evt){
            infowindow2.close();
         });

次にmouseoutイベントでcloseメソッドを呼び出し、ウインドウを閉じるようにしてあります。

マーカーなしでウインドウ表示

マーカーなしでもウインドウを設定することができます（基本的にわかりづらいので一般的ではありませんが）。

         var optWindow = {
            position: new google.maps.LatLng( 35.681247751534606, 139.76713379355968) ,
            content: "東京駅" ,
            disableAutoPan: false ,
            maxWidth: 300 ,
            pixelOffset: new google.maps.Size( 0, 0 ) ,
            zIndex: 99 ,
         } ;
         var infowindow3 = new google.maps.InfoWindow(optWindow);
         infowindow3.open(map);


InfoWindoオブジェクトを生成し、マーカーに紐づけずに、openすれば、マーカーなしでウインドウを表示することができます。

ウインドウを閉じる

表示されたウインドウの右上の「×」ボタンを押せば、ウインドウを閉じることができます。また、閉じた際のイベントを拾って、処理を追加することも可能です。

         google.maps.event.addListener( infowindow3, 'closeclick', function(evt){
            alert('ウインドは閉じません');
            infowindow3.open(map);
         });

サンプルでは「ウインドウは閉じません」というダイアログメッセージを表示し、再び、ウインドウをopenするという、変なロジックを入れてあります。

ちょっと馬鹿げていますが、こんなこともできますね。

以上、ご参考になればと思います。

ご参考

関連ページ