2012-04-24 130 views
1

今天我想創建一個數據的谷歌地圖,事情是,我複製/粘貼的谷歌地圖的代碼示例,但沒有來的...我得到一個空白頁...我瘋了嗎? 你能告訴我發生了什麼事嗎? 我使用鉻和火狐..都是空白。地圖不顯示在網址上

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Polygon Arrays</title> 
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 

var map; 
var infoWindow; 

function initialize() { 
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875); 
var myOptions = { 
    zoom: 5, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
}; 

var bermudaTriangle; 

map = new google.maps.Map(document.getElementById("map_canvas"), 
    myOptions); 

var triangleCoords = [ 
    new google.maps.LatLng(25.774252, -80.190262), 
    new google.maps.LatLng(18.466465, -66.118292), 
    new google.maps.LatLng(32.321384, -64.75737) 
]; 

bermudaTriangle = new google.maps.Polygon({ 
    paths: triangleCoords, 
    strokeColor: "#FF0000", 
    strokeOpacity: 0.8, 
    strokeWeight: 3, 
    fillColor: "#FF0000", 
    fillOpacity: 0.35 
}); 

bermudaTriangle.setMap(map); 

// Add a listener for the click event 
google.maps.event.addListener(bermudaTriangle, 'click', showArrays); 

infowindow = new google.maps.InfoWindow(); 
} 

function showArrays(event) { 

// Since this Polygon only has one path, we can call getPath() 
// to return the MVCArray of LatLngs 
var vertices = this.getPath(); 

var contentString = "<b>Bermuda Triangle Polygon</b><br />"; 
contentString += "Clicked Location: <br />" + event.latLng.lat() + "," + 
event.latLng.lng() + "<br />"; 

// Iterate over the vertices. 
for (var i =0; i < vertices.length; i++) { 
    var xy = vertices.getAt(i); 
    contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() +"," + xy.lng(); 
} 

// Replace our Info Window's content and position 
infowindow.setContent(contentString); 
infowindow.setPosition(event.latLng); 

infowindow.open(map); 
} 
</script> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas"></div> 
</body> 
</html> 
+0

添加例如''在頭部。 – roza 2012-04-24 17:36:12

回答

1

的問題是,你已拷貝了相對參考谷歌的樣式,這就是的map_canvas的尺寸定義在哪裏。

如果您明確地設置了div的大小,或者對樣式表使用了絕對引用,它就會起作用(我剛剛嘗試過)。