質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.64%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,451

Keita008

score 5

 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で出来たサイトに追加する予定です。
どんなヒントでも結構です。何卒宜しくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

var infobox = new InfoBox(infoboxOptions);


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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/18 11:50

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

    キャンセル

  • 2018/03/19 10:19

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/17 21:37

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

    キャンセル

  • 2018/03/17 21:38

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる