Make a div content (googlemap) fullscreen
Posted
by lena2211
on Stack Overflow
See other posts from Stack Overflow
or by lena2211
Published on 2010-05-21T19:25:27Z
Indexed on
2010/05/21
19:30 UTC
Read the original article
Hit count: 145
google-maps
|JavaScript
Hi iam trying to make a button that will turn the googlemap div into fullscreen.. this is what i have untill now, but it is not working correctly .. problem is: the map will only half loaded the code is below, and a screenshot
how can i repair this? where is the problem? thanks in advance
http://img32.imageshack.us/img32/9365/halfload.gif
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<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);
}
function fs() {
var elem = document.getElementById("map_canvas");
elem.style.position="absolute";
elem.style.width="100%";
elem.style.height="100%";
elem.style.top="0px";
document.body.style.overflow = "hidden";
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:400px; height:300px"></div>
<a href="#" onclick ="fs()">makefullscreen</a>
</body>
</html>
© Stack Overflow or respective owner
