谷歌地圖API 3 - 地圖沒有顯示完整/調整大小

我想在網站中獲得一個自定義谷歌地圖API，問題是地圖中沒有顯示完整，只顯示地圖的一部分。 enter image description here 谷歌地圖API 3 - 地圖沒有顯示完整/調整大小

鑑於下面的代碼：

js代碼：

$(document).ready(function(){ 

var map=null; 
    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(24.3573, 54.4636), 
      zoom: 14, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     var currCenter = map.getCenter(); 
     google.maps.event.trigger(map, 'resize'); 
     map.setCenter(currCenter); 
     map.setZoom(14); 

     var markerOptions = { 
      position: new google.maps.LatLng(24.3573, 54.4636), 
      map: map 
     }; 
     var marker = new google.maps.Marker(markerOptions); 
     marker.setMap(map); 

     var infoWindowOptions = { 
      content: '<b>Compnay Name</b><br> Is Here!' 
     }; 
     var infoWindow = new google.maps.InfoWindow(infoWindowOptions); 
     infoWindow.open(map, marker); 

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

HTML代碼：

<div class="container"> 
<h1>Location Map</h1> 
<p></p> 
<div id="map-canvas"></div> 
</div>

CSSÇ Ode：

.container {width: 100%; height: 100%;} 
.container #map-canvas { 
width: 500px; 
height: 250px; 
margin: 0; 
border: 1px solid rgb(225, 225, 225);} 
.map h2{ 
font-size: 16px; 
font-weight: bold; 
padding: 20px 0 6px 0;}

請讓我知道我做錯了什麼？

我聽說'google.maps.event.trigger（map，'resize'）;'通常做的伎倆，但在我的代碼似乎並沒有工作，也許我不是在正確的地方..請幫助。

謝謝。

來源

2013-08-21 Bipin

[Map未顯示在嵌套在div標記中的Google Maps JavaScript API v3中時出現（http://stackoverflow.com/questions/16349476/map-isnt- google-maps-javascript-api-v3-when-nested-in-a-div-tag） – geocodezip

試着把你的google.maps.event.trigger（map，'resize'）'放在最後行動，你正在做的地圖。也許在google.maps.event.addDomListener（window，'load'，initialize）之後;' –

您的代碼已發佈，適合我[現場示例]（http://www.geocodezip.com/v3_SO_jquery_topLeftCorner.html） – geocodezip

我在使用tab jQuery插件時遇到了同樣的問題。當文檔準備好時（$（document）.ready（function（）{initialize（）;}）），我調用initialize（）函數。當map選項卡激活並且問題消失時，我嘗試調用initialize（）函數。這只是我的經驗。祝你好運！

約翰尼

來源

2014-02-23 09:29:24 Johnny

@Bipin：我爲您解決以下修復錯誤

附加功能在您的JS代碼

function resizeMap(m) { 
     x = m.getZoom(); 
     c = m.getCenter(); 
     google.maps.event.trigger(m, 'resize'); 
     m.setZoom(x); 
     m.setCenter(c); 
    };

隨着m是「地圖」

然後按下功能

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

希望solutiion可以幫助。

來源

2014-12-05 08:20:31 David

我能夠簡單地通過調用「google.maps.event.trigger（m，'resize'）;」沒有其他線路。 – Mike

我有同樣的問題，但在我的情況下，地圖應該彈出。我通過使用setTimeout javascript函數來克服它，直到彈出動畫完成，然後我調用了地圖初始化函數。我希望這有幫助。

此外，你的地圖看起來扭曲。檢查此問題的解決方案： Google Maps api v3 tools: visual distortions?

來源

2015-02-10 15:56:05

谷歌地圖API 3 - 地圖沒有顯示完整/調整大小

回答

相關問題