谷歌地圖API v3：灰盒子，沒有地圖

作爲一個更大項目的一部分，我們試圖使用谷歌的Map API v3在網站上獲取地圖。我已經遵循了谷歌已經制定的最簡單的步驟，我試圖從其他工作地圖直接拷貝代碼。但不管我做什麼，我們所得到的只是一個灰色的盒子，沒有地圖。谷歌地圖API v3：灰盒子，沒有地圖

使用Firebug，我可以看到試圖填充地圖的信息，但它根本不顯示。我試過jquery，專門爲google地圖製作的jquery庫，沒有任何工作。我一直在互聯網上，並通過谷歌的API幫助文件。此外，問題並非本地化，因爲我已將文件上傳到多臺服務器，並在多臺瀏覽器和計算機上進行了測試。沒有任何工作。

在這一點上它是我想要忽略的一些愚蠢的東西。這是我的代碼。

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true"> 
</script> 
<script type="text/javascript"> 

    function load() 
    { 
     var mapDiv = document.getElementById("map"); 
     var latlng = new google.maps.LatLng(-34.397, 150.644); 
     var mapOptions = 
     { 
      //zoom: 8, 
      center:latlng, 
      //backgroundColor: '#ff0000', 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      imageDefaultUI: true 
     }; 
     var map = new google.maps.Map(mapDiv, mapOptions); 

     function createMarker(point, text, title) 
     { 
      var marker = 
      new GMarker(point,{title:title}); 
      return marker; 
     } 
    } 

</script> 
    </head> 
    <body onload="load()"> 
    <div id="map" style="width: 800px; height: 400px;"></div> 
</div> 
</body> 
</html>

來源

2012-07-31 Biggest

這對我有用。您只需必須設置zoom參數：

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> 
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
</script> 
<script type="text/javascript"> 

    function load() 
    { 
     var mapDiv = document.getElementById("map"); 
     var latlng = new google.maps.LatLng(-34.397, 150.644); 
     var mapOptions = 
     { 
      zoom: 8, 
      center:latlng, 
      //backgroundColor: '#ff0000', 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      //imageDefaultUI: true 
     }; 
     var map = new google.maps.Map(mapDiv, mapOptions); 
     // map.addControl(new GSmallMapControl()); 
     // map.addControl(new GMapTypeControl()); 
     // map.addMapType(ROADMAP); 
     // map.setCenter(
     // new GLatLng(37.4419, -122.1419), 13); 
    } 

</script> 

    </head> 
    <body onload="load()"> 
    <div id="map" style="width: 800px; height: 400px;">&nbsp;</div> 
</body> 
</html>

來源

2012-07-31 22:15:29

是的！那樣做了！這並不能真正反映我們在這件事情上遇到的問題。你可以看到我們最初有一個縮放，但我們爲了讓它顯示而花費了很多。當我們得到它的時候，我們所要做的就是把愚蠢的縮放放回去。 Oy公司！感謝您的幫助，但我不知道在我們進行過的鬥爭之後的幾天裏，我們是否會得到這一點。 – Biggest 2012-07-31 22:25:50

好吧，然後我誤解了你......這個問題到底是什麼？ – 2012-07-31 22:27:49

對不起，我沒有告訴你你錯了。這是這個問題的答案。我很傷心，我們已經制定了這麼多，但錯過了這個世俗的細節。因爲我們用API密鑰和各種廢話達到了這一點，它只是不工作。現在我們必須弄清楚如何從數據庫中的地址標記它。如果您碰巧有任何提示，請告訴我？ – Biggest 2012-08-01 13:42:38

我想快速評論添加到這一點，因爲我的zoom參數設定有同樣的問題。我發現問題是我主題的CSS。在我的基本主題，我有以下CSS：

img, embed, object, video { max-width: 100%; max-height: 100%; width: auto; height: auto; }

這搞砸了地圖的渲染後，我刪除它，我的地圖呈現就好了。

來源

2015-10-22 13:17:38

我有同樣的問題，並遇到了很多關於stackoverflow的話題，但他們都沒有爲我工作的解決方案。我最終發現這是由於我添加了一行css導致的。

所有的地圖元素繼承了

overflow:hidden;

通過添加下面一行到我的CSS它是固定

#map * { 
    overflow:visible; 
}

來源

2016-04-04 14:21:57 Expertees

這要花幾個小時才能解決。謝謝！！ – 2017-02-10 18:03:20

這節省了我的一天... – Esaki 2017-08-09 08:09:58

另一種情況是，當圖容器在初始化的時刻隱藏地圖。例如。你正在做bootstrap show.bs.modal事件，而不是shown.bs.modal

來源

2016-07-12 15:17:53 Oleg

能否請您詳細說明這個答案，我認爲這是我的問題..我有一個jQuery *手風琴圖* – CodeIt 2016-09-22 15:07:14

@CodeIt一年晚了，但是，當可見時，一個假的rezise可能工作：'google.maps.event.trigger（map，「resize」）;' – Pragabhava 2017-09-24 18:50:53

@Pragabhava已經很晚了，但它對其他人可能有幫助。我可以通過在jquery Accordion元素上放置點擊事件來解決這個問題。所以當用戶點擊手風琴時，地圖會再次呈現。 – CodeIt 2017-09-26 09:40:37

我有同樣的問題。我在Jquery使用谷歌地圖手風琴當我展開div時，地圖只包含一個灰色區域。我能夠通過在指定的手風琴標題上觸發點擊事件並將地圖容器設置爲可見來解決此問題。

腳本：

<script type="text/javascript"> 
    var map; 

    function initMap(lat, lng) { 
     var myCenter = new google.maps.LatLng(lat, lng); 

     var mapOptions = { 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: myCenter 
     }; 

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

    } 
    function ViewMap() { 
     var latlng = document.getElementById('<%=txt.ClientID%>').value.split(','); // This is where my latlng are placed: 25.12312,55.3212333 
     $("#showmap").show(); 
     // Sorry for mixing up Jquery and javascript. 
     initMap(latlng[0], latlng[1]); 
    } 

</script>

ASPX文件/ HTML標記：

<h3 id="lMap" onclick="ViewMap();"><i class="fa fa-map-o" onclick="ViewMap();"></i>Location Map</h3> 
<div style="height:auto" id="showmap"> 
    <div id="map" style="width: 850px; height: 550px; overflow: visible"></div> 
</div>

來源

2016-09-22 19:29:46 CodeIt

在我的情況下，有人已下降在一些responsive.css文件這個小獎品：

img { 
    max-width: 100% !important; 
}

刪除了一個現在一切都很好。

來源

2017-03-03 16:07:20 dgilperez

我對我正在處理的網站也有這個問題。我們正在爲所有<img>標籤做出響應。此修補程序適用於我們的地圖：

img {max-width: initial !important;}

來源

2017-03-24 13:14:19

我愛你！在我的情況下，這是在與twitter引導互動！ – FalcoB 2018-01-15 16:10:12

還要當心地圖中心或標記的緯度或經度值無效。例如，this fiddle顯示灰色死亡地圖，因爲地圖中心位於緯度131.044，無效（而不是+90：-90）。

function initMap() { 
    var uluru = {lat: 131.044, lng: -25.363}; 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: uluru 
    }); 
    var marker = new google.maps.Marker({ 
    position: uluru, 
    map: map 
    }); 
}

來源

2017-07-15 19:47:52 MadeOfAir

我有類似的問題。我得到一個long/lat數組，我選擇數組的第一個項目作爲空的初始標記。沒有有效的緯度/經度谷歌地圖只顯示灰色框。 – Kevin 2017-12-06 11:17:47

這可能不是每個人的情況，但也許它可以幫助某人。

我在我的地圖上創建標記，從data屬性放置在地圖元素上，如下所示：data-1-lat="2" data-1-lon="3" data-text="foo"。我根據它們被放置在數據屬性中的順序將它們放入數組。

的問題是，IE和邊緣（對於一些狂原因）反轉在HTML標籤數據的訂單屬性，因此，我無法從數據屬性來正確地提取它們。

來源

2017-07-25 09:10:45

-1

在我的情況（版本3.30提交這個時候），這是因爲DIV ID必須是「地圖」

<div id="map"></div> 
... 
document.getElementById("map")

來源

2017-10-30 14:39:15 Igor

對於那些誰可能不顧粘這裏提供的很好的解決方案，嘗試設置您的容器的高度和寬度直接在html標記中而不是樣式表即。

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

幸福映射！

來源

2017-12-12 14:54:48 Rom

就我而言，我在iview庫中使用vue和模態工作，並在第一次渲染的過程中，它的任何其他渲染顯示死亡灰屏。我通過設置超時功能來解決這個問題，以在50毫秒後顯示地圖，以給模態足夠的時間來渲染和可見。

//Time out is crucial for the map to load when opened with vue 
setTimeout(() => { 
    this.showMap(id); 
}, 50);

來源

2018-01-25 09:19:10

谷歌地圖API v3：灰盒子，沒有地圖

回答

相關問題