吹き出しの情報ウィンドウをクリックで表示する - Google maps API -

マーカーをクリックで【ポップアップウィンドウ（吹き出し）】を表示を3つの手順で紹介します。Google maps APIを使って前回まではマーカーを立てるところまでを紹介しましたが、そこまでのソースを改変していきます。 前回までのソースをダウンロード

この記事では上の画像のようにポップアップされればゴールです。

目次

• 変数の追加
• マーカーにクリックイベントを追加
• ウィンドウの内容の追加

変数の追加

グローバル変数として前回までのソースで書いたのは

var map;
var marker = [];
var data = [];

【map】【marker】【data】の3つだったと思います。 それぞれ【マップの表示】【マーカーのデータ】【地図のデータ】用に作成したものですが、今回はポップアップウィンドウに空の配列をいれたものを追加します。

var windows = [];

さらに普通にポップアップされることだけをすると

こんな感じにクリックするたびにポップアップされてしまうの、これを１つだけしか表示しないようにします。 表示しないようにするために使用する、現在ポップアップされているウィンドウを入れておく関数を追加します。 初期状態ではなにもポップされていないので「null」で。

var currentInfoWindow = null;

2つ追加したところでグローバル変数をまとめると5つになります。

var map;
var marker = [];
var data = [];
var windows = [];
var currentInfoWindow = null;

マーカーにクリックイベントを追加

いまのままではマーカーをクリックしてもなにも起こらないので、まずはマーカーにクリックイベントを追加します。 発火させるのはinitMap()の中のfor文の中になります。 今回はinitMap()よりあとに関数markerEvent()として書きます。 クリックイベントの全体のソースはこんな感じです。

function markerEvent(i) {
            marker[i].addListener('click', function() { // マーカーをクリックしたとき
                if (currentInfoWindow) {
                    currentInfoWindow.close();
                }
                windows[i].open(map, marker[i]); // 吹き出しの表示
                currentInfoWindow = windows[i];
            });
}

まずは【開いているウィンドウがある場合は閉じる】という設定をします。 「currentInfoWindowに値が入ってた時 == 開いてるウィンドウがある」ときには「currentInfoWindow.close(); == 開いているウィンドウを閉じる」

if (currentInfoWindow) {
          currentInfoWindow.close();
}

閉じる処理が終わった後はクリックされたマーカーに応じてmap上にウィンドウを開きます。 【i】は次の工程でかくソースから引数でもってきます。

windows[i].open(map, marker[i]);

開いた後、開いたウィンドウを【変数 currentInfoWindow】に代入してクリックイベントは終了です。 currentInfoWindowに入れておくことで、次別のマーカーを開いた時にはif文によってウィンドウが閉じられるので、最高１つしかウィンドウが開かないことになります。

currentInfoWindow = windows[i];

ウィンドウの内容の追加

ウィンドウ内容を書いていくのはinitMap()の中のマーカー追加for文のあとになります。

windows[i] = new google.maps.InfoWindow({ // 吹き出しの追加
       content: '<div style="width: 220px;"><p>' + 
                      data[i]['name'] + '</p>'+
                       '<input type="button" value="この場所の詳細"/>'
});
markerEvent(i); // マーカーにクリックイベントを追加

1つ1つのウィンドウはnew google.maps.InfoWindow({})でできるので、それを最初に用意したwindows[]の中に格納していきます。 【i】はマーカーを追加する際に使用したfor文を使用して、クリックイベントにも引数として使用します。 new google.maps.InfoWindow({})のなかでcontent:の中にhtmlタグを書いていきます。jsonファイル内の項目を増やせば他にも情報をだすことができます。

markerEvent(i); // マーカーにクリックイベントを追加

ウィンドウの詳細（content）を書き終わったらnew google.maps.InfoWindow({})を閉じて前項のクリックイベントを発火させます。

これで上のようにマーカーをクリックするとポップアップができるように....！
今回のデモはこちらです。