谷歌地圖API V3上的灰盒子

好像谷歌地圖API有一個更新，如果沒有設置寬度爲&高度的像素值，那麼它只會呈現一個灰色框。我遇到的問題是我需要一個全寬地圖。谷歌地圖API V3上的灰盒子

如果您將地圖向右拖動，則地圖會進行渲染，您可以看到地圖。

我試圖將此事件添加到事件google.maps.event.trigger(map, "resize");它沒有幫助。

這裏是我的標記

<div class="map-holder"> 
     <div id="google-map"></div> 
</div>

這裏是我的js

var map; 

function initialize() { 
    var mapOptions = { 
     zoom: 14, 
     center: new google.maps.LatLng(XX.XXXXX, XX.XXXXX), 
     disableDefaultUI: true, 
     draggable: true, 
     scrollwheel: false, 
     scaleControl: false, 
     zoomControl: false 
    }; 

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

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(XX.XXXXX, XX.XXXXX), 
     map: map, 
     title: 'Some place', 
     visible: true, 
     place: 'Some place' 
    }); 
} 

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

google.maps.event.addDomListener(window, 'resize', function() { 
    var center = map.getCenter(); 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(center); 
});

來源

2015-09-09 Chris H

你的CSS是什麼樣的？你如何包含API？請提供證明此問題的[最小，完整，測試和可讀示例]（http://stackoverflow.com/help/mcve）。 – geocodezip

你能接受答案嗎？ –

好吧好像我找到了解決，只需添加一個3.20版本號。

<script src="https://maps.googleapis.com/maps/api/js?v=3.20"></script>

來源

2015-09-09 13:34:04

想知道如果有人可以提供一些見解，爲什麼這解決了它？ –

你能提供一個[最小，完整，測試和可讀的例子]（http://stackoverflow.com/help/mcve）來證明這個問題嗎？ – geocodezip

這也解決了我的問題。我有想過省略版本會給最新的？ –

如果您忘記mapTypeId是必需的屬性，則可能發生此錯誤。如果您忘記傳遞地圖選項，也會發生這種情況。

來源

2015-12-14 02:10:23

我有同樣的問題，這就是爲什麼我有灰色框和沒有地圖。我有2個選項卡 - 一個是可見的，另一個是隱藏的 - 一個地圖在可見的另一個地圖內隱藏 - 我有完全相同的最小代碼來初始化除div ID之外的地圖。

我把隱藏的地圖div放在可見區域並運行 - 它的工作和渲染就像可見區域一樣。

我的故事的寓意是 - 如果它位於隱藏的專區內 - 由於DOM不是由於display:none;

做某些事情訪問可能我只是希望它能幫助 - 它不會正確初始化 - 這不是我第一次碰到這個，所以我想我會讓我的代碼兄弟知道這筆交易！

來源

2016-02-02 22:18:02

嘗試直接在HTML標記中設置容器的高度和寬度而不是樣式表或<style>標記即。你的情況：

<div id="google-map" style="width: 100%; height: 300px;"></div>

幸福映射！

來源

2017-12-12 14:58:03 Rom

谷歌地圖API V3上的灰盒子

回答

相關問題