谷歌地圖是灰色的

我在使用html和javascript的移動應用程序中使用谷歌地圖。當我加載地圖時，我只能看到左上角5％的地圖。 95％的div容器是灰色的。當我想用Firebug檢查div時，整個地圖突然加載。那是什麼？我試了幾個Stackoverflow線程，但沒有解決方案爲我工作。謝謝。谷歌地圖是灰色的

代碼：

<link type="text/css" rel="stylesheet" href="jquery.mobile...> 
<link type="text/css" rel="stylesheet" href="index.css"> 
<script type="text/javascript" src="jquery.mobile...></script> 
<script type="text/javascript" src="jquery.mobile/jquery.mobile...></script> 
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js">  </script> 
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8" src="index.js"></script> 

<div id="map" style="width: 700px; height: 700px;"></div> 

var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(-33.92, 151.25), 
     mapTypeId: google.maps.MapTypeId.ROADMAP         
});

index.js

$(document).ready(function() { 
    $(window).resize(function() { 
     google.maps.event.trigger(map, 'resize'); 
    }); 
});

當我使用％計格的屬性或EM它不工作的。

來源

2012-11-23 AppRoyale

需要看代碼......或者更好的沙盒版本。 – meo

在容器元素大小合適之前，會初始化像地圖一樣的聲音。 'google.maps.event.trigger（map'resize'）''map'是你的地圖。 – Dykam

您是否爲容納地圖的div容器指定了大小，如果是，您使用的是哪個實體，px，em，％？ –

嘗試調用大小調整方法上的文件準備得：

$(document).ready(function() { 
    $(window).resize(function() { 
     google.maps.event.trigger(map, 'resize'); 
    }); 
    google.maps.event.trigger(map, 'resize'); 
});

來源

2012-11-23 09:18:05 Douglas

您確定它是$（document）.ready（function（）？當我在google.maps.event.trigger（map，'resize'）;在firefox控制檯中它實際上起作用 – AppRoyale

[.ready（）] （http://api.jquery.com/ready/）是使用jQuery加載頁面後運行代碼的一種方法。它會在所有的CSS和腳本文件都被加載後運行，但如果你有其他的JS改變了頁面佈局，它仍然爲時過早，你需要在改變佈局後調用調整大小。 – Douglas

我現在基本上用這個權： $（ '＃點擊測試'）點擊（函數（）{ \t \t google.maps.event.trigger（地圖， '調整'）; \t}）; 它現在有效，但我不知道它是否只是運氣。 – AppRoyale

檢查您的MapOptions中心或其他屬性是否正確。在我的場合，中心的財產是谷歌地圖無法解釋;雖然這個頁面在css和jsp方面完全沒有錯誤，但它始終顯示出灰色的地圖。

來源

2015-06-24 14:45:28 ismailkuyu

感謝100次!!!就是這樣！ – Breiti

你是如何解決它的？ – zubair1024

對於我的情況，只需撥打map.refresh()即可解決此問題。我正在使用Gmaps。

來源

2016-10-05 18:14:32 stealthysnacks

「map.refresh（）不是函數」 – JWiley

它應該是，假設你像OP那樣命名變量「map」。 – stealthysnacks

這發生在我身上，因爲mapTypeId是NULL。

嘗試：

map.setMapTypeId("roadmap");

來源

2017-09-10 17:07:38 user3709875

在我來說，我已經錯過了提供這些來自外部API的經度。一旦API被修正以包含經度，問題就解決了。

來源

2017-11-17 00:50:35

我不得不使用angular 5
我只能獲取地圖刷新/使用setTimeout和重新建立一個類似的問題一個setZoom（即使水平是一樣的）

// set timeout. 
setTimeout(() => { 
    console.log("attempting refresh"); 
    google.maps.event.trigger(this.map, "resize"); 
    this.map.setZoom(8); 
}, 
100);

Working Plunker Here

刷新有什麼吸引人的地方在於它在第二次顯示地圖時會移動地圖。谷歌地圖顯然不是bug free。

來源

2018-02-21 05:04:40 Jim

谷歌地圖是灰色的

回答

相關問題