I embedded a google map on my page. In IE8, part of the map renders but the rest of the map is gray. In firefox, the entire map is just gray. My code is this:
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
}
}
window.setTimeout(function() {
initialize();
}, 750);
window.onunload = GUnload;
</script>
<div id='map_canvas' style="float:left; width:481px; height:450px; border-style:solid; border-width:2px; border-left:none; border-color:#5793C9">
The google example code I copied this from uses the <body onload> and unload, but I don't have access to these since my body is defined in the masterpage. I guess this is probably the reason. How can I fix it?
edit to add: my test.html is doing the same thing. The entire contents of test.html are:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Map</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=KEYABCDE"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>