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

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

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

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

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Google マップ

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

Q&A

解決済

3回答

2992閲覧

【WordPress】プラグイン『Advanced Custom Fields』とjQuery UI Tabsを使用したGoogleMapの表示

ShugoSuda

総合スコア8

WordPress

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

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Google マップ

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

0グッド

0クリップ

投稿2015/06/03 10:36

編集2015/06/05 06:09

はじめまして。

現在、WordPressを使って地域情報ポータルサイトを制作中です。

そのサイト中でお店紹介のページがありまして、プラグイン『Advanced Custom Fields』を使ったカスタムフィールドとjQuery UI Tabsを組み合わせてお店の情報を紹介しています。

【参考画像その1】
![イメージ説明]WIDTH:600

プラグイン『Advanced Custom Fields』の機能にある<GoogleMap>を使って下記のサイトを参考に「地図・クーポン」タブ内にGoogleMapを設置しました。

【wordpress】Advanced Custom Fieldsの使いかた

すると表示が下の画像のようにおかしなことに・・・

【参考画像その2】
![イメージ説明]WIDTH:600

どうやら調べてみるとjQuery UI Tabsの「display:none」が悪さをしているらしく、下記のサイトを参考に次のように直してみました。

jQuery UI TabsでGoogleMapを利用する。

lang

1.ui-tabs .ui-tabs-hide { 2 position: absolute; 3 left: -10000px; 4}

するとどうでしょう・・・

【参考画像その3】
![イメージ説明]WIDTH:600

少し見えてはいるのですが地図の中心が左寄りになってしまいました。右側はどんなに頑張っても表示されません。

こうなるともうお手上げです。

どの様にすればMapがしっかりと表示されるでしょうか。

ご協力の程よろしくお願い致します。

【補足】
使用しているjQuery UI Tabsはこちらのサイトを参考にしています。
jQueryを使ったタブメニューの実装サンプルまとめ

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

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

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

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

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

takutok

2015/06/03 17:11

問題が起きているサイトのアドレスを張っていただければ、原因はすぐ分かると思います。
guest

回答3

0

当初はプラグイン『Advanced Custom Fields』公式にも載っているコードを使用してマップを表示させていました。

■【wordpress】Advanced Custom Fieldsの使いかた※使用したコードは(4)項参照
http://miukro.hatenablog.com/entry/2014/09/14/183633

ですが、上のコードでは takutokさんから教えて頂いた参考サイトの内容をそのまま反映させることが困難だと判断しました。
(まだまだ私のJavaScript、PHPの知識が乏しいので・・・汗)

■takutokさんから教えて頂いた参考サイト
Google Mapsで地図用コンテナを非表示にして地図を初期化すると表示がおかしい
https://www.softel.co.jp/blogs/tech/archives/4069

そこで、教えて頂いたサイトにあった「google.maps.event.trigger(map, 'resize')」を使用するべく下記のようにコードを書いてみました。

<script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function(){ //『Advanced Custom Fields』からlng(経度)を読み込む var lng = <? $googlemap = get_field('googlemap'); if($googlemap){ ?><? echo $googlemap['lng']; ?><? } ?>; //『Advanced Custom Fields』からlat(緯度)を読み込む var lat = <? $googlemap = get_field('googlemap'); if($googlemap){ ?><? echo $googlemap['lat']; ?><? } ?>; var latlng = new google.maps.LatLng(lat, lng); //マップを表示するために必要な記述 var mapOptions = { zoom: 17, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, scrollwheel: false }; var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); //マップ上にマーカーを表示する var marker = new google.maps.Marker({ position: latlng, map: mapObj }); //jQueryUITabメニュー「#map」がクリックされるとマップが再描画される $('#tab-nav a[href^="#map"]').click(function(){ $(".tab-box").hide(); $(this.hash).fadeIn(); google.maps.event.trigger(maps[this.hash], 'resize'); return false; }); }); </script> //ここ(id="gmap")にマップが描画される <div id="gmap" style="width: 100%; height: 400px;"></div>

これでどうにか無事に崩れることなく希望通りの条件でマップを表示することができました。

コードはほとんどコピペしたものなので、直した方がいい点などありましたら教えて頂けると幸いです。

以上、皆様どうもありがとうございました。

※解決したため問題が起きていたサイトのURLは削除させて頂きました。

投稿2015/06/05 06:08

ShugoSuda

総合スコア8

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

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

0

ベストアンサー

サイトのURLありがとうございます。

確認してみましたが、google map の再描画イベントが行われると、ちゃんと表示されるようです。
というわけで、原因はタブ切り替え時に地図が再描画されていないことだと思います。

地図のタブをクリックしたときに、javascript で resizeイベントを通知してあげればよさそうです、

以下のサイトを参考にしてください。
https://www.softel.co.jp/blogs/tech/archives/4069

投稿2015/06/05 02:15

takutok

総合スコア392

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

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

ShugoSuda

2015/06/05 05:25

ご回答ありがとうございます。 教えて頂いた参考サイトを見ながら色々いじってみたら何とか正常に表示することが出来ました。 ありがとうございました。
guest

0

left: -10000px;が効きすぎてるとか?数字を下げてみてください

投稿2015/06/03 14:02

the

総合スコア112

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

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

ShugoSuda

2015/06/04 02:43

ご回答ありがとうございます。 left: -1000pxにしたりrightにしてみたりtopにしてみたり色々試みてみましたが表示は変わりませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問