谷歌地圖谷歌示例空白屏幕v3

-2

我從谷歌複製的代碼，但我有一個空白頁...我做錯了什麼？ http://raidsnature.com/raidsnature/raidsnature.nsf/googlemap4 谷歌地圖谷歌示例空白屏幕v3

非常感謝！

PS：「谷歌地圖API V3」被激活，API鍵（在2013年4月30日下午12時42分啓動）是仍然工作在我的舊網頁v2中的一個： http://raidsnature.com/raidsnature/raidsnature.nsf/GoogleMap?OpenPage&Raid=1&Trail=1&CO=1

這裏不工作的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 

    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCklzGa0v5sp8cWNLXnEZph20tKa_rXups&sensor=false" type="text/javascript"></script> 

    <script> 
var map; 
function initialize() { 
    var mapOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(-34.397, 150.644) 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 
} 

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

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

來源

2013-11-25 user3034253

您的地圖 - 畫布div沒有大小。 http://stackoverflow.com/search?q=user%3Ame+%5Bgoogle-maps-api-3%5D+map+doesn%27t+have+a+size – geocodezip

你缺少谷歌的例子，其中（如geocodezip說的）的CSS部分將定義地圖畫布大小，但你還需要定義html和body高度。

引述Google's Hello World example：

<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map-canvas { height: 100% } 
</style>

這個CSS宣告表示地圖容器（名爲map-帆布）要佔用100％的HTML體的高度。請注意，我們必須明確聲明<body>和<html>的百分比。

完整的工作示例可在Google Maps API docs找到（轉到第二個選項卡「JavaScript + HTML」）。

來源

2013-11-26 11:58:31 psxls

谷歌地圖谷歌示例空白屏幕v3

回答

相關問題