[Work/Class/Google Maps APIの基礎/basic]

GoogleMaps APIの基礎 - マーカに情報ウィンドウを紐づける

情報ウィンドウの基本

マーカをクリックするとポップアップする情報ウィンドウを作成する．

情報ウィンドウの中に表示できるのはHTML． 

マーカオブジェクト.addListener('click', () => {
    あらかじめ作っておいた情報ウィンドウオブジェクト.open();
)};

という形で，マーカのクリックイベントにopenメソッドを紐づける．(つまり，クリックイベントに別の動きを紐づけることもできる)

HTMLファイル．前と同じ． 

<!DOCTYPE html>
<!-- info_window.html -->
<html>
<head>
    <title>Google Maps API最初の一歩</title>
    <meta charset="utf-8">

    <!-- ちゃんと等倍で表示しましょうよ．スマホ側で勝手に倍率変えんなよ，という意味 -->
    <meta name="viewport" content="initial-scale=1.0">
    <!-- この中身は後からJavaScriptでも変更可能だったりする -->

    <!-- Google Maps APIをWeb上から読んでくる -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <!-- 自分で作ったJSファイル -->
    <script type="text/javascript" src="./info_window.js"></script>

    <!-- とりあえずCSSを直接書いてしまう -->
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            /*
             div id=mapになってるdiv
             ここに地図
             高さ500ピクセル，幅は上位のdiv(ここではbody)の50%
            */
            height: 500px;
            width: 50%;
        }
    </style>
</head>
<body>
  <!-- bodyの中には地図表示用のマップ一つだけ -->
  <div id="map"></div>
</body>
</html>

htmlファイルから読まれるJavaScriptファイル． 

// info_window.js

// window.addEventListenerに関数オブジェクトを登録しておくと，
// 全部のコンテンツの読み込みが終了した時に自動的に，
// 登録しておいた関数オブジェクトが次々と呼ばれる
window.addEventListener('load', () => { //登録する関数オブジェクト記述開始
  //地図表示に必要なパラメータを保持するconstオブジェクト
  const mapElement = {
    // 日野キャンパス2号館をの緯度経度を中心にして表示する
    center: {lat:35.661504, lng:139.367559},
    // ズームレベル
    zoom: 16
  };

  // 地図を保持するためのオブジェクトの作成
  const myMap =
    new google.maps.Map(document.getElementById('map'), mapElement);
  // コンストラクタが実行されると表示される

  // 日野キャンパス1号館にマーカを表示するためのパラメータオブジェクト
  const firstMarkerElement = {
    //タイトルをつける
    title: '日野キャンパス1号館',
    // 1号館の緯度経度
    position: {lat:35.661930, lng:139.366485},
    // どのマップオブジェクトに表示するか
    map: myMap
  };

  // マーカオブジェクトの作成
  const firstMarker =
    new google.maps.Marker(firstMarkerElement);

  const firstInfoWindowElement =
    {content: '<p>インフォウィンドウの中に表示するHTML</p>'};
  //InfoWindowのコンストラクタを呼ぶ
  const firstInfoWindow = new google.maps.InfoWindow(firstInfoWindowElement);

  firstMarker.addListener('click', ()=> { //関数オブジェクトを記述開始
    //マーカオブジェクトがクリックされた時に，この関数が呼ばれる
      firstInfoWindow.open(myMap, firstMarker);
    }//関数オブジェクト記述ここまで
  );//マーカへの関数オブジェクトの登録ここまで

}); // window.addEventListenerに登録する関数オブジェクトの記述と登録ここまで

複数の情報ウィンドウ

マーカと同じように複数の情報ウィンドウを作成することができるのだが，開いている情報ウィンドウは常に一つだけにしたい場合が多い．

その場合，情報ウィンドウオブジェクトを作ったら，それをどこの関数からも呼び出せる「グローバル」な配列オブジェクトに登録しておき，情報ウィンドウを開く前に登録されている全てのウィンドウを一度閉じる，という動作を記述しておく．

グローバルを宣言するためには，ブラウザJavaScriptではwindow.変数名とする．

HTMLファイルは同じものなので，JavaScriptファイルだけ． 

// info_window2.js

window.addEventListener('load', () => {
  //地図表示に必要なパラメータを保持するconstオブジェクト
  const mapElement = {
    // 日野キャンパス2号館をの緯度経度を中心にして表示する
    center: {lat:35.661504, lng:139.367559},
    // ズームレベル
    zoom: 16
  };

  // 地図を保持するためのオブジェクトの作成
  const myMap =
    new google.maps.Map(document.getElementById('map'), mapElement);
  // コンストラクタが実行されると表示される

  // 日野キャンパス1号館にマーカを表示するためのパラメータオブジェクト
  const firstMarkerElement = {
    //タイトルをつける
    title: '日野キャンパス1号館',
    // 1号館の緯度経度
    position: {lat:35.661930, lng:139.366485},
    // どのマップオブジェクトに表示するか
    map: myMap
  };
  // ダイレックスにマーカを表示するためのパラメータ
  const secondMarkerElement = {
    title: 'ダイレックス日野旭が丘店',
    position: {lat:35.660736, lng:139.368746},
    map: myMap
  };

  //情報ウィンドウオブジェクトを格納する配列を，グローバルに作っておく
  //要素数ゼロの配列を作る
  window.infoWindowArray = new Array();

  // マーカオブジェクト2つを作成
  const firstMarker =
    new google.maps.Marker(firstMarkerElement);
  const secondMarker =
    new google.maps.Marker(secondMarkerElement);

  // 情報ウィンドウを二つ作成
  const firstInfoWindowElement =
    {content: '<p>インフォウィンドウの中に表示するHTML</p>'};
  const firstInfoWindow = new google.maps.InfoWindow(firstInfoWindowElement);
  //配列に追加する
  window.infoWindowArray.push(firstInfoWindow);
  // 2つめのマーカオブジェクトの作成
  const secondInfoWindowElement =
    {content: '<p>ダイレックス日野旭が丘店</p>'};
  const secondInfoWindow = new google.maps.InfoWindow(secondInfoWindowElement);
  // 同様に配列に追加する
  window.infoWindowArray.push(secondInfoWindow)

  firstMarker.addListener('click', ()=> { //関数オブジェクトを記述開始
    //マーカオブジェクトがクリックされた時に，この関数が呼ばれる
      // 配列に登録されている全ての情報ウィンドウを一度閉じる
      window.infoWindowArray.forEach((val, index, array) => {
        val.close();
      });
      // 全部閉じ終わったら，あらてめて最初のマーカに登録されている情報ウィンドウを開く
      firstInfoWindow.open(myMap, firstMarker);
    }
  );

  // 同様に2つ目も設定する
  secondMarker.addListener('click', ()=>{
    window.infoWindowArray.forEach((val, index, array) => {
      val.close();
    });
    secondInfoWindow.open(myMap, secondMarker);
  });

}); // window.addEventListenerに登録する関数オブジェクトここまで