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

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

ただいまの
回答率

89.24%

google map apiでマップ外のメニューをクリックすると情報ウィンドウを表示させる

解決済

回答 1

投稿 編集

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

owl

score 41

現状

google map apiを使い、色々と調べながらなんとか形になりました。
マーカーはカスタムマーカーを使い、現在はダミー画像を表示させています。
マップ状のマーカーをクリックすると情報ウィンドウが開き、画像やテキストなどが埋め込まれています。

実現させたいこと

マップの下に場所1、場所2と書かれたメニューがありますが、
これをクリックするとマーカーをクリックしたようにそのメニューに対応する情報ウィンドウを表示させたいです。

場所1の情報ウィンドウが表示されている状態でメニューの場所2をクリックすると場所1の情報ウィンドウが消えて、場所2の情報ウィンドウが表示されるという仕組みです。

またこれはもしメニューの問題が解決した場合なのですが、
クリックした時に情報ウィンドウを上下左右中央に表示させたいです。

質問ばかりで申し訳ありませんが、お時間がありましたらアドバイスのほどよろしくお願い致します。

試したこと

恐らくgoogle.maps.event.triggerを使用すると思い、
いろいろとコードを書いてみたのですが上手く動作しませんでした。
コードを下記に掲載致します。
jqueryは3.2.1.min.jsを読み込み済みです。

コードはjsfiddleにもアップしております。
https://jsfiddle.net/ululami/53Lgqsxk/
よろしくお願い致します。

コード

    (function() {
        var mapData = {
            pos: {
                lat: 35.689488,
                lng: 139.691706
            },
            zoom: 14
        };
        var markerData = [{
            pos: {
                lat: 35.688617,
                lng: 139.686913
            },
            title: "場所1",
            icon: "",
            infoWindowOpen: false,
            infoWindowContent: '<h3>場所1</h3><img src="https://placehold.jp/150x150.png"><p>テストテストテストテストテストテストテスト</p>'
        }, {
            pos: {
                lat: 35.689524,
                lng: 139.700046
            },
            title: "場所2",
            icon: "",
            infoWindowOpen: false,
            infoWindowContent: '<h3>場所2</h3><img src="https://placehold.jp/150x150.png"><p>テストテストテストテストテストテストテスト</p>'
        }, ];
        var map = new google.maps.Map(document.getElementById('map'), {
            center: mapData.pos,
            zoom: mapData.zoom
        });
        var infoWindow = new google.maps.InfoWindow();
        for (var i = 0; i < markerData.length; i++) {
            (function() {
                var marker = new google.maps.Marker({
                    position: markerData[i].pos,
                    title: markerData[i].title,
                    icon: "https://placehold.jp/420e07/ffffff/50x50.png",
                    map: map
                });
                if (markerData[i].infoWindowContent) {
                    var infoWindowContent = markerData[i].infoWindowContent;
                    marker.addListener('click', function() {
                        infoWindow.setContent(infoWindowContent);
                        infoWindow.open(map, marker);
                    });
                    if (markerData[i].infoWindowOpen) {
                        infoWindow.setContent(infoWindowContent);
                        infoWindow.open(map, marker);
                    }
                }
            }());
        }
    }());
    <div id="map"></div>
    <ul id="mapList">
        <li>場所1</li>
        <li>場所2</li>
    </ul>
    #map {
        width: 600px;
        height: 400px;
    }
    ul{
        list-style: none;
    }
    ul li{
        margin-top: 10px;
    }

補足情報(言語/FW/ツール等のバージョンなど)

jquery-3.2.1.min.js

実現したい中央寄せ

イメージ説明
現在このようにメニューまたはマーカーをクリックしてもマーカーの位置にほとんど変化がありません。ですのでクリックするとマーカーが移動し、情報ウィンドウを上下左右中央に表示させたいです。
下記の画像の通りです。
よろしくお願いいたします。
イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

marker.addListenerで渡している関数をどこかに保存してそれを実行とか。

動くサンプル:https://jsfiddle.net/jxduuzq2/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/07/11 02:02

    kei344様
    ご返答ありがとうございます。
    私が実現したいことが見事に表現されており、
    大変ありがとうございます。

    もしよろしければなのですが、
    現在マーカーの位置がメニューまたはマーカーをクリックしても、
    表示される位置にほとんど変化がありません。
    メニューまたはマーカーをクリックすると、
    マーカーが移動し、情報ウィンドウを上下左右中央に表示させることは可能でしょうか。
    補足情報の下に「実現したい中央寄せ」の項目を掲載し、
    画像も追加いたしましたのでもしご参考になれば幸いです。

    重ね重ねの質問でありますが、よろしくお願いいたします。

    キャンセル

  • 2017/07/11 02:19

    【Map. getCenter() - 地図の中心の位置座標を取得する】
    https://syncer.jp/Web/API/Google_Maps/JavaScript/Map/getCenter/

    【Map.panTo() - 位置座標を絶対的に移動する】
    https://syncer.jp/Web/API/Google_Maps/JavaScript/Map/panTo/

    クリック時に地図の中央に行くようにすれば良いです。infowindowの高さとか勘案するなら getBounds 使ってマーカーがうまく下端に来るように調整かな。(ロジックは自分で考えてくださいね)

    【Map.getBounds() - 地図のビューポートの境界を取得する】
    https://syncer.jp/Web/API/Google_Maps/JavaScript/Map/getBounds/

    キャンセル

  • 2017/07/18 11:00

    ご返信が遅れて申し訳有りません。

    Map.setCenter()を使い、中心に移動させなんとか形になりました。
    本当にありがとうございます。

    キャンセル

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

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