前提・実現したいこと
WordpressでAdvancedCustomFieldプラグインを利用し、投稿画面でGoogleMapを設定できるようにしました。
マーカーには支店名を情報ウィンドウで表示し、閉じたウィンドウはマーカーをクリックしたら再度開くようにしたいです。
発生している問題・エラーメッセージ
シングルページにマップ・マーカー・情報ウィンドウは問題なく表示されるのですが、ページにアクセスした時点でマップが表示されているページ中盤あたりまでスクロールされてしまいます。
エラーメッセージは出ていません。
【追記】
情報ウィンドウの×ボタンにアウトラインが表示されているので、アクセスした時点でフォーカス状態にあるためスクロールされるのかもしれません。フォーカスの外し方がわかりません。
該当のソースコード
Javascript
1$(document).ready(function() { 2 initMap(); 3}); 4 5var map; 6var marker = []; 7var infoWindow = []; 8var markerData = [{ 9 name: 'A支店', 10 lat: 35.00000, 11 lng: 133.00000 12}, { 13 name: 'B支店', 14 lat: 35.00001, 15 lng: 133.00001 16}, { 17 name: 'C支店', 18 lat: 35.00002, 19 lng: 133.00002 20}, { 21 name: 'D支店', 22 lat: 35.00003, 23 lng: 133.00003 24} 25]; 26 27function initMap() { 28// 地図の作成 29 var mapLatLng = new google.maps.LatLng({lat: markerData[0]['lat'], lng: markerData[0]['lng']}); // 緯度経度のデータ作成 30 map = new google.maps.Map(document.getElementById('company-map'), { // #sampleに地図を埋め込む 31 center: mapLatLng, // 地図の中心を指定 32 zoom: 11 // 地図のズームを指定 33 }); 34 35 // マーカー毎の処理 36 for (var i = 0; i < markerData.length; i++) { 37 markerLatLng = new google.maps.LatLng({ 38 lat: markerData[i]['lat'], lng: markerData[i]['lng'] 39 }); // 緯度経度のデータ作成 40 marker[i] = new google.maps.Marker({ // マーカーの追加 41 position: markerLatLng, // マーカーを立てる位置を指定 42 map: map // マーカーを立てる地図を指定 43 }); 44 45 infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加 46 content: '<div class="sample">' + markerData[i]['name'] + '</div>' // 吹き出しに表示する内容 47 }); 48 infoWindow[i].open(map, marker[i]); // 吹き出しの表示 49 markerEvent(i); // マーカーにクリックイベントを追加 50 } 51} 52 53// マーカーにクリックイベントを追加 54function markerEvent(i) { 55 marker[i].addListener('click', function() { // マーカーをクリックしたとき 56 infoWindow[i].open(map, marker[i]); 57}); 58}
試したこと
以下の部分を削除すればスクロールされてしまう問題は解消しましたが、クリックするまで情報ウィンドウは閉じた状態になります。
アクセス時に情報ウィンドウを開いた状態にしておきたいです。
Javascript
1infoWindow[i].open(map, marker[i]); // 吹き出しの表示
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。