Map not displaying on url

问题

today i'm trying to create a google map with some data, the thing is that i'm copying/pasting the code of google maps examples, but nothing is coming... i get a blank page.... Am i that crazy? Can you please tell me what's going on? I'm using chrome and firefox.. both blank.

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

回答1:

The problem is that you have copied the relative reference to Google's stylesheet, and that's where the size of map_canvas is defined.

If you set the size of that div explicitly, or use an absolute reference to the stylesheet, it will work (I just tried that).

来源：https://stackoverflow.com/questions/10302794/map-not-displaying-on-url

标签

javascript

google-maps-api-3