6

デフォルトで非表示になっているタブでマップをレンダリングし、そのタブに移動 (表示可能) すると、マップが正しくレンダリングされません。しかし、ページを更新すると、マップは正しく表示されます。

問題 正しくレンダリングされていない地図の画像。

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>
4

3 に答える 3

9

次の 2 つのことを行う必要があります。

  1. 非表示のタブを表示するときは、マップが含まれるコンテナー DIV のサイズが適切であることを確認してください。

  2. その DIV が表示されてサイズが変更されるまで待ってからマップを作成するか、DIV が表示されてサイズが変更された後にマップにサイズ変更メッセージを送信します。

google.maps.event.trigger( map, 'resize' );

于 2013-04-13T08:51:12.730 に答える
1

All I did is added a height in the style of the div element and map started appearing.

<div class="event-details" style="height:500px;" id="map_canvas">

</div>
于 2017-01-06T16:47:56.567 に答える
0

こんにちは、同じ問題があります。タブ ボタンをクリックしてから電話する必要がありますinitialize()。私が何をしているかを見て、すべてのタブのクリック属性にこの関数を設定します

function ChangeTabs(e){
   $('#tabs-1').hide();
   $('#tabs-2').hide();
   $('#tabs-3').hide();
   $('#tabs-4').hide();

   var a = $.browser;
    if (a.msie)
    {
        $(e.srcElement.hash).show();
        if(e.srcElement.hash=='#tabs-3')
            initialize();
    }
    else
    {
       $(e.currentTarget.hash).show();
       if(e.currentTarget.hash=="#tabs-3")
            initialize();
    }
于 2013-07-27T09:49:58.767 に答える