谷歌地圖api v3加載不正確

-3

我很難得到一個地圖初始化窗口加載。這個問題與this question基本相同，除了我已經沒有使用任何jQuery來創建地圖，所以那裏提出的解決方案並不適用於我。我的代碼如下：谷歌地圖api v3加載不正確

function initialize() { 
    var mapOptions = { 
    zoom: 14, 
    center: new google.maps.LatLng(43.703918,-79.422789), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById('location-canvas'), 
    mapOptions); 

    var marker = new google.maps.Marker({ 
    map: map, 
    draggable: false, 
    position: new google.maps.LatLng(43.703918,-79.422789) 
    }); 
} 

google.maps.event.addDomListener(window, 'resize', initialize); 
google.maps.event.addDomListener(window, 'load', initialize);

上的負載，地圖上會出現偏離中心，缺少地圖圖塊，但如果我調整窗口的大小，甚至一個像素，它可以解決本身。

編輯：我正在使用這個CSS/Javascript框架：nacodes.com/2013/04/23/Fullscreen-Layout-with-Page-Transitions問題似乎是，當它被繪製時，地圖div是不是正確的大小。一旦達到全尺寸，屏幕調整大小立即修復。但是第一場比賽很糟糕。我花了下午的時間試圖找出是否有一個好方法來決定何時在CSS轉換之後重新初始化映射，而不會導致其他問題。

來源

2013-08-16 emote_control

你的HTML看起來像什麼？它有效嗎？您應該在初始化函數內的地圖上觸發google maps resize事件。發佈的代碼適用於我（根據需要使用HTML）。 – geocodezip

http://www.geocodezip.com/v3_SO_simpleMap_resizeOnLoad.html – geocodezip

@geocodezip我正在使用這個CSS/Javascript框架：nacodes.com/2013/04/23/Fullscreen-Layout-with-Page-Transitions 問題似乎是在繪製時，地圖div不是正確的大小。一旦達到全尺寸，屏幕調整大小立即修復。但是第一場比賽很糟糕。我花了下午的時間試圖找出是否有一個好方法來決定何時在CSS轉換之後重新初始化映射，而不會導致其他問題。例如，如果我在webkitTransitionEnd上執行此操作，它將重繪9次，並在我的移動瀏覽器上永久重繪。 –

地圖是否加載到隱藏的div /元素中？如果是這樣，請在加載地圖之前顯示該div。看看這個問題：Google Maps loading strangely

來源

2013-08-16 15:17:19 viarnes

它不會加載到隱藏的div中，但它會在使用CSS隱藏的div中加載。我正在使用這個框架：http://www.nacodes.com/2013/04/23/Fullscreen-Layout-with-Page-Transitions 地圖加載頁面加載，但加載的div大小向下變小比地圖展開時的地圖要高。這似乎是問題的根源。我試圖弄清楚如何在展開時重新繪製它，但我不能只使用webkitTransitionEnd，因爲它在過渡期間觸發了9次。 –

谷歌地圖api v3加載不正確

回答

相關問題