Google map APIでinfobox.jsを使って複数のフキダシをマーカー毎に表示したい

Question

GooglemapAPIでinfobox.jsを使って複数のフキダシをマーカー毎に表示したい

いつもお世話になっております。
web制作の初心者で、どうにもわからず質問させてください。
Google map APIで複数のマーカーを設置した地図を作り、マーカーをクリックしたらフキダシが出るマップを作成しました。
デフォルトのフキダシでは見た目が良くないため、infobox.jsを使って加工したのですが、どのマーカーをクリックしても最下行のクリックイベントだけが表示されるようになってしまいました。
色々いじくっていたのですが、直せず...お知恵を貸していただけないでしょうか。

発生している問題・エラーメッセージ

リンク先のページで中央にあるマーカーをA、左上にあるマーカーをBとした場合
Bに設定したクリックイベントがAとBのどちらをクリックしても発生してしまいます。
（すごく無駄の多い記述でお恥ずかしいのですが、私が実現できた方法がこれだけでした）

該当のソースコード

//−−−−−−−−−−−A.48号カメラ1関山トンネル宮城側−−−−−−−−−−−−−//
var LatLng96 = new google.maps.LatLng(38.383757, 140.574769);
 // infobox用のDOMを生成
var contentString96 =
 '<iframe src="frame/frame47.html" width="200px" height="180px" frameborder="0">'+
 '</iframe>';
var infowindow96 = new google.maps.InfoWindow({
        content:contentString96
    });
var image96 = new google.maps.MarkerImage('img/cam.png');
var marker96 = new google.maps.Marker({
        position: LatLng96,
        map: map,
        title: "関山トンネル宮城側",
        icon: image96
    });

// infoboxのオプション
    var infoboxOptions96 = {
        content: contentString96, // 生成したDOMを割り当てる
        pixelOffset: new google.maps.Size(-133, -40), // オフセット値
        alignBottom: true, // 位置の基準
        position: LatLng96, // 位置の座標
        boxClass: "gmap-info-window", // 生成したDOMをラップするdivのclass名
        closeBoxMargin: "0px -30px", // 閉じるボタンの位置調整
        closeBoxURL: 'img/close.jpg' // 閉じるボタンの画像パス
    };
// infoboxを生成して表示
var infobox = new InfoBox(infoboxOptions96);
 
// マーカーがクリックされた時にinfoboxを表示
google.maps.event.addListener(marker96, 'click', function() {
	   if (currentInfoWindow) {
       currentInfoWindow.close();
       }
        infobox.open(map, marker96);
		currentInfoWindow = infowindow96;
    });

//−−−−−−−−−−−B.48号カメラ2関山トンネル山形側−−−−−−−−−−−−−//
var LatLng97 = new google.maps.LatLng(38.392302, 140.566017);
var contentString97 =
 '<iframe src="frame/frame48.html" width="200px" height="180px" frameborder="0">'+
 '</iframe>';
var infowindow97 = new google.maps.InfoWindow({
        content:contentString97
    });
var image97 = new google.maps.MarkerImage('img/cam.png');
var marker97 = new google.maps.Marker({
        position: LatLng97,
        map: map,
        title: "関山トンネル山形側",
        icon: image97,
    });

// infoboxのオプション
    var infoboxOptions = {
        content: contentString97, // 生成したDOMを割り当てる
        pixelOffset: new google.maps.Size(-133, -40), // オフセット値
        alignBottom: true, // 位置の基準
        position: LatLng97, // 位置の座標
        boxClass: "gmap-info-window", // 生成したDOMをラップするdivのclass名
        closeBoxMargin: "0px -30px", // 閉じるボタンの位置調整
        closeBoxURL: 'img/close.jpg' // 閉じるボタンの画像パス
    };
// infoboxを生成して表示
var infobox = new InfoBox(infoboxOptions);
 
// マーカーがクリックされた時にinfoboxを表示
google.maps.event.addListener(marker97, 'click', function() {
      if (currentInfoWindow) {
       currentInfoWindow.close();
       }
        infobox.open(map, marker97);
		currentInfoWindow = infowindow97;
    });

試したこと

検索で見つけた方法を参考にいじってみたのですが、正しく直せているかもわからず、マップが表示されなくなったりしたため、一旦戻しております。
■forEachを使って直す方法
https://qiita.com/takuyagoto/items/7b38cda75c3b7a41314f
■マーカーごとに違う情報ウィンドウを表示する（ページ内リンク）
https://lopan.jp/google-maps-api-plus/

補足情報（FW/ツールのバージョンなど）

CMS等を使わないXHTML1.0で出来たサイトに追加する予定です。
どんなヒントでも結構です。何卒宜しくお願い致します。

Answer 1

infobox.jsというライブラリを存じ上げませんが、おそらく

var infobox = new InfoBox(infoboxOptions);

が2回実行されているので、後から上書きされているのが原因です。

あまりいい書き方ではないですが、infobox96のように別の名前をつければ解決するのではないかな、と思います。

Comments

[Keita008]

ご回答ありがとうございます。
お返事が遅くなり申し訳ありません。
正しく書けているか不安なのですが、各マーカー毎にinfobox96、infobox97など名前を変更してみたところ、フキダシが表示されなくなってしまいました。正しく読みに行けてないのでしょうか...。
もしご覧いただけたら、お気付きの点などお教えいただければ幸いです。
以下、テストページです。
http://bit.ly/2FGKo26

[Lhankor_Mhy]

拝見しましたが、変更されていないように見えました。フキダシも表示されているようです。

Answer 2

参考ページ
このページに書かれているように、マーカーごとにクリックイベントを張る必要があるのではないでしょうか。

Comments

[Keita008]

回答ありがとうございます。
AとBのフキダシ内容が同じになってしまっていまして、異なる内容が出るようにしたいのです。

[Keita008]

中央のAには「関山トンネル宮城側」
左上のBには「関山トンネル山形側」と出したいのですが、ABどちらにもBの内容が表示されてしまうのです。