2010-10-06 47 views
4

我有一個谷歌地圖API的問題。我正在使用V3 API和fancybox在類似燈箱的div中顯示地圖。當我第一次點擊鏈接時,fancybox也打開並映射加載。一切似乎都沒問題,但是當我關閉fancybox並嘗試重新打開時,地圖加載錯誤..它僅加載大約一半的區域。第二次打開時創建的地圖對象可能有問題。當我每次想要獲得正確的地圖時重新加載頁面時,沒關係。當我嘗試打開 - 關閉 - 打開 - 關閉等時出現問題..有人知道我該怎麼做嗎?我喜歡的fancybox,但現在我完全以擰:)底部是我code..Thanks谷歌地圖Fancybox錯誤顯示重新打開

$(document).ready(function() { 
    $("a.maps").fancybox({ 
    'overlayOpacity ': 0.5, 
    'transitionIn': 'fade', 
    'transitionOut': 'fade', 
    'type': 'ajax' 
    }); 
}); 

的的fancybox的含量在一些碎片。鏈路稱爲從簡單的A HREF = 「」 ...

function initialize() { 
    var myLatlng = new google.maps.LatLng(49.095354, 17.749553); 
    var myOptions = { 
    zoom: 15, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    streetViewControl: false 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title: "DAMN" 
    }); 
} 

function detectBrowser() { 
    var useragent = navigator.userAgent; 
    var mapdiv = document.getElementById("map_canvas"); 

    if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) { 
    mapdiv.style.width = '100%'; 
    mapdiv.style.height = '100%'; 
    } else { 
    mapdiv.style.width = '400px'; 
    mapdiv.style.height = '400px'; 
    } 
} 
initialize(); 
detectBrowser(); 
</script> 
<div id="mapaOkolo"> 
<div id="map_canvas"></div> 
</div> 

回答

1

這是一個非常普遍的問題,請看一看here。 嘗試使用google.maps.event.trigger(map, "resize");

希望這有助於

+0

謝謝..我現在正在那裏看起來很有幫助.. – simekadam 2010-10-08 05:25:27

2

有這個問題,我自己和與此變通辦法想出了:

google.maps.event.addListener(<map object>, 'tilesloaded', function() { 
    google.maps.event.trigger(<map object>, 'resize'); 
    <map object>.setCenter(<LatLng>); 
}); 

地圖是偏離中心,因此需要爲中心,以及。