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

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

新規登録して質問してみよう
ただいま回答率
85.35%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

解決済

1回答

657閲覧

AdvancedCustomFieldで投稿したGoogleMapにinfoWindowを出力すると画面がスクロールされた状態で表示される

harami_

総合スコア128

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2021/06/03 06:29

編集2021/06/04 09:19

前提・実現したいこと

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]); // 吹き出しの表示

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

本日確認したところフォーカス状態にもならず事象が解決しておりました。
同様のコードで作成した他サーバで稼働しているwebサイトも全く同じ事象が起きていたので、googlemapサイドの仕様変更だったのでしょうか…。原因不明のためスッキリしませんが一旦解決とします。

投稿2021/06/17 01:04

harami_

総合スコア128

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問