2012-04-24 71 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的大小,或者对样式表使用了绝对引用,它就会起作用(我刚刚尝试过)。

相关问题