デフォルトで非表示になっているタブでマップをレンダリングし、そのタブに移動 (表示可能) すると、マップが正しくレンダリングされません。しかし、ページを更新すると、マップは正しく表示されます。
問題
Google マップの Javascript
var map;
function initialize() {
var latlng = new google.maps.LatLng(serLat, serLang); // - 34.397, 150.644);
var myOptions = {
zoom: 10,
width: 1270,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker
(
{
position: new google.maps.LatLng(serLat, serLang),
map: map,
width: 1270,
title: 'Click'
}
);
// var infowindow = new google.maps.InfoWindow({
// content: cntnt
// });
// google.maps.event.addListener(marker, 'click', function() {
// // Calling the open method of the infoWindow
// infowindow.open(map, marker);
// });
}
window.onload = initialize;
Jquery タブの URL http://quickerbook.imobisoft.eu/App_Themes/js/jquery.tabify.js
タブの HTML
<ul id="tabs-hd">
<li class="active"><a href="#tab1">Tab One</a></li>
<li><a href="#tab2">Tab Two</a></li>
<li><a href="#tab3">Tab for Google Map</a></li>
</ul>
<div id="tab1">Content for tab one...</div>
<div id="tab2">Content for tab two...</div>
<div id="tab3"><div id="map"></div></div>