Make a div content (googlemap) fullscreen
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/map开发者_StackOverflow中文版s/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>
You need to reinitialize the map after it's been maximized... here's the code:
<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(); initialize();">makefullscreen</a>
</body>
</html>
Hope this Helps, Gale
加载中,请稍侯......
精彩评论