HTML and google maps not playing nice
I have a custom google map. It seems very simple.
<!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>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!--google magic-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!--custom map-->
<script type="text/javascript">
function initialize() {
var latlngcenter = new google.maps.LatLng(41.523387, -87.691545);
//move center west of marker to show I-57
var myOptions = { zoom: 11, center: latlngcenter, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("GardenWalk_Canvas"), myOptions);
var latlng;
var marker;
latlng = new google.maps.LatLng(41.503387, -87.636545);
marker = new google.maps.Marker({ position: latlng, map: map });
latlng = new google.maps.LatLng(41.520935, -87.582318);
marker = new google.maps.Marker({ position: latlng, map: map });
latlng = new google.maps.LatLng(41.520075, -87.634509);
marker = new google.maps.Marker({ position: latlng, map: map });
latlng = new goog开发者_开发技巧le.maps.LatLng(41.538092, -87.677964);
marker = new google.maps.Marker({ position: latlng, map: map });
latlng = new google.maps.LatLng(41.536256, -87.678006);
marker = new google.maps.Marker({ position: latlng, map: map });
latlng = new google.maps.LatLng(41.533099, -87.682250);
marker = new google.maps.Marker({ position: latlng, map: map });
latlng = new google.maps.LatLng(41.550018, -87.691408);
marker = new google.maps.Marker({ position: latlng, map: map });
latlng = new google.maps.LatLng(41.550017, -87.691305);
marker = new google.maps.Marker({ position: latlng, map: map });
latlng = new google.maps.LatLng(41.508768, -87.693976);
marker = new google.maps.Marker({ position: latlng, map: map });
latlng = new google.maps.LatLng(41.509065, -87.694586);
marker = new google.maps.Marker({ position: latlng, map: map });
latlng = new google.maps.LatLng(41.498524, -87.810122);
marker = new google.maps.Marker({ position: latlng, map: map });
}
</script>
</head>
<body onload="initialize()">
<div id="GardenWalk_Canvas" style="width: 500; height: 350" />
text after
</body>
</html>
The only problem is that the map only shows when the following is removed:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Any thoughts or rhyme or reason as to why?
you have some comments in the html
//google magic
//custom map
which are not valid xhtml.
change it to
<!--google magic-->
加载中,请稍侯......
精彩评论