Maps V3 loaded but not displaying (happens across all browsers)
Isen Ng
<!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 runat="server">
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width:100%; height:100%"></div>
</form>
</body>
</html>
Andrew Leach
> However, when I added a <form> tag around it, maps stopped working
> altogether.
Do they stop working? Or are they simply not displayed? You are
specifying percentage heights -- you need to ensure that that *every*
element up the hierarchy to <html> has its height specified.
Currently there is an element in the DOM hierarchy which has zero height.
Please bear in mind that you should post a link, not code. In *this*
case it's possible to see fairly easily what's likely to be wrong. But
we still can't verify that with a code listing, and we could had you
posted a link. There will be other queries which cannot be answered
without a link, so it's best to supply one all the time.
Isen Ng
Andrew Leach
> here's a link to the buggy page:
> http://www.isbweb.dev.mow.wavesecure.com/test/locationv3test.aspx
>
> How are you debugging to get 'there is an element in the DOM hierarchy which
> has zero height.'? using firebug does not allow (or maybe i dont know how)
> me to debug this.
By reading your code! You didn't give any other opportunity.
> I'm not very good at debugging at the DOM level. I would appreciate it if
> there's a direction I could follow to debug and ultimately solve this issue.
> (and learn a new debugging skill)
Firefox probably won't object to your <form> element not having a
height, but generally use the HTML tab in Firebug, highlight elements
in the hierarchy and look at the Style shown in Firebug's right-hand
frame.
Isen Ng
en4ce
<form name="form1" method="post" action="locationv3test.aspx"
id="form1" style="width:100%; height:100%">
do the trick