2010-09-18 112 views
3

當我使用Google地圖API時,無法顯示我的地圖。我正在嘗試構建一個應用程序,並且它不會在那裏工作,但是在我製作的這個測試頁面中它也被破壞了。有誰知道我做錯了什麼?未顯示Google地圖API地圖

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function initialize() { 
    console.log("Initializing..."); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
} 
</script> 
</head> 

<body onload="initialize()"> 
<div id="map_canvas" style="height: 100%; width: 100%;"></div> 
</body> 
</html> 

感謝您的任何幫助。我很困惑!

+0

這是相關的,也許回答這個問題 http://stackoverflow.com/a/10210153/1330710 – rolfk 2013-09-17 12:51:24

回答

-1

它似乎並沒有出現在我的客戶的現場網站上。直到幾天前,它一直在努力。也許谷歌更新了JS和什麼壞了?因爲什麼都沒有改變在我的身邊......

18

給你map_canvas div的一個固定的寬度和高度,你的榜樣將正常工作:

<div id="map_canvas" style="width: 500px; height: 400px;"></div> 

否則,設置高度爲您htmlbody爲谷歌做在API tutorials

<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 100% } 
</style> 
+0

您好感謝,我有同樣的問題,使用您的解決方案,但現在我的整個頁面成爲谷歌地圖...如何解決這個問題? – Mostafa 2018-01-03 06:18:43

2

您可能想爲包含該地圖的div製作一些自定義CSS。 我做了下面的代碼在我的CSS .. 希望它有助於:D歡呼!

.map 
{ 
/* padding:5px;*/ 
    float:left; 
    background-image:url('../images/mapContainer.png'); 
    width: 155px; 
    height: 123px; 
    background-repeat: no-repeat; 
} 
.mapImage 
{ 
    padding-top: 4px; 
    padding-left: 4px; 
    width: 146px; 
    height: 114px; 
} 
.mapAndInfoContainer 
{ 
    float:left; 
    width: 100%; 
    height: 120px; 
}