2012-04-24 24 views
1

今日私はいくつかのデータでGoogleマップを作成しようとしていますが、私はGoogle Mapsのコード例をコピー/ペーストしていますが、何も来ていません...私は空白私は狂ってる? 何が起こっているのか教えていただけますか? 私はchromeとfirefoxを使用しています..両方とも空白です。URLに表示されない地図

<!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

答えて

1

問題は、Googleのスタイルシートに相対参照をコピーしたことで、map_canvasのサイズが定義されている場所です。

そのサイズをdivに明示的に設定したり、スタイルシートの絶対参照を使用すると、機能します(私はこれを試しました)。

関連する問題