###現状
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/10 17:02
2017/07/10 17:19
2017/07/18 02:00
2021/02/16 23:46 編集