Menu
I have a Google Map that won't show up. The Problem seems to be the same in FF & Chrome, but even more "bad" in IE (always latest version).
In FF & Chrome I have a problem with the position: relative; css element style. As soon as I switch to (with dev tools) position: absolute(or: fixed); everything displays fine in FF. In Chrome the map only shows the upper 30% (from top).
In IE the map doesn't even get loaded.
Here's the script stuff from the <head>. Content is only for testing and means nothing.
Note: I only use this to get the map loaded. This will be exchanged later.
<!-- Script inside <head> tag -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
file=api&
v=2&
key=<?php echo self::GOOGLE_API_KEY; ?>&
sensor=false">
</script>
<script type="text/javascript">
function initialize()
{
var startpos = new google.maps.LatLng( 50.978056,11.029167 );
var ops = {
zoom: 6
,center: startpos
,mapTypeId:
google.maps.MapTypeId.ROADMAP
,tileSize: new google.maps.Size( 256, 256 )
}
var map = new google.maps.Map( document.getElementById("map_canvas"), ops );
var pos1 = new google.maps.LatLng( 50.7510776,12.4820724 );
var contentString1 = '<div align="left" dir="ltr" class="infowin"><h3>test</h3>testen</div>';
var infowindow1 = new google.maps.InfoWindow( {
content: contentString1
,maxWidth: 5
} );
var marker1 = new google.maps.Marker( {
position: pos1
,map: map
,title: 'test'
} );
google.maps.event.addListener(
marker1
,'click'
,function() {
infowindow1.open( map, marker1 );
}
);
}
</script>
This is the whole mark up for the page.
<!-- html markup - There *really* isn't anything else -->
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</body>
I have spend a lot of time on google without finding anything. Any ideas? Thanks!
299
html, body should be height:100%;.
But keep in mind, if your map holder element is a child of another element then that element should also have height:100%;
Otherwise, setting just the html and body won't do you any good.
An Example to explain my point:
<html>
<head>
<style>
html, body { height:100%; }
</style>
</head>
<body>
<div id="wrapper">
<div id="google-map-holder" style="width:100%; height:100%;"></div>
</div>
</body>
</html>
So, if you're doing something like the above. The height:100%; won't work here.
To make this work, you have to do the same thing with all of the parents that the #google-map-holder is a child of, in this case we would add height:100%; to #wrapper element.
IF, the #google-map-holder element was directly outside the #wrapper element and a child of the body directly then just doing html, body would be enough.
190
The problem is the height: 100%; of #map_canvas.
Add this to your <head> and it should work (tested in Firefox 5 and Safari 5.1):
<style>
html, body {
height: 100%;
}
</style>
For Details why this is necessary have a look at the first answer of this question:
Div 100% height works on Firefox but not in IE
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
