当初はプラグイン『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は削除させて頂きました。