HTML5 Fullscreen API and DIV's

Question

So I am creating a geo locator tool using Google Maps. While you are able to set the marker on the page, I wanted to make the Google Maps div fullscreen.

After some brief research, I came across http://demosthenes.info/blog/708/Introducing-the-HTML5-FullScreen-API, which provided a start for the fullscreen API.

The Javascript I use is the same as provided on that page, which is:

<script>
function cancelFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
</script>

Now, the Map DIV is set to 50% width, 450px height to make it look decent on screen, and when I go full screen, it's still set to it's parent div's height/width, so the actual size of the div doesn't change.

Is there a way to change the map height/width so that it will use browser height/width instead of the parent div?

Answer 1

Do you want in "fullscreen mode" browser will show full MAP ?

Try this code to handle

var elem = document.getElementById("idOfMAP");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Hope it helps you.