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

###現状
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/
よろしくお願い致します。

###コード

javascript
1    (function() {
2        var mapData = {
3            pos: {
4                lat: 35.689488,
5                lng: 139.691706
6            },
7            zoom: 14
8        };
9        var markerData = [{
10            pos: {
11                lat: 35.688617,
12                lng: 139.686913
13            },
14            title: "場所1",
15            icon: "",
16            infoWindowOpen: false,
17            infoWindowContent: '<h3>場所1</h3><img src="https://placehold.jp/150x150.png"><p>テストテストテストテストテストテストテスト</p>'
18        }, {
19            pos: {
20                lat: 35.689524,
21                lng: 139.700046
22            },
23            title: "場所2",
24            icon: "",
25            infoWindowOpen: false,
26            infoWindowContent: '<h3>場所2</h3><img src="https://placehold.jp/150x150.png"><p>テストテストテストテストテストテストテスト</p>'
27        }, ];
28        var map = new google.maps.Map(document.getElementById('map'), {
29            center: mapData.pos,
30            zoom: mapData.zoom
31        });
32        var infoWindow = new google.maps.InfoWindow();
33        for (var i = 0; i < markerData.length; i++) {
34            (function() {
35                var marker = new google.maps.Marker({
36                    position: markerData[i].pos,
37                    title: markerData[i].title,
38                    icon: "https://placehold.jp/420e07/ffffff/50x50.png",
39                    map: map
40                });
41                if (markerData[i].infoWindowContent) {
42                    var infoWindowContent = markerData[i].infoWindowContent;
43                    marker.addListener('click', function() {
44                        infoWindow.setContent(infoWindowContent);
45                        infoWindow.open(map, marker);
46                    });
47                    if (markerData[i].infoWindowOpen) {
48                        infoWindow.setContent(infoWindowContent);
49                        infoWindow.open(map, marker);
50                    }
51                }
52            }());
53        }
54    }());

html
1    <div id="map"></div>
2    <ul id="mapList">
3        <li>場所1</li>
4        <li>場所2</li>
5    </ul>

css
1    #map {
2        width: 600px;
3        height: 400px;
4    }
5    ul{
6        list-style: none;
7    }
8    ul li{
9        margin-top: 10px;
10    }

###補足情報(言語/FW/ツール等のバージョンなど)
jquery-3.2.1.min.js

###実現したい中央寄せ

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

投稿2017/07/10 16:25

kei344

総合スコア69407

owl

2017/07/10 17:02

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

kei344

2017/07/10 17: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/

owl

2017/07/18 02:00

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