How Do I Create A Show Full Screen Button To Toggle My Google Maps Page To Be Full Screen?

I have a google map integrated on part of my page. I would like to create a toggle button to toggle the map between full screen and normal size. So when you click on it - the map e

Solution 1:

Here's a jQuery implementation.

$("#map_toggler").click(function() {
  $("#map").toggleClass("fullscreen")
});

In the CSS:

#map {
  width: 400px;
  height: 200px;
}

#map.fullscreen {
  position: fixed;
  width:100%;
  height: 100%;
}

Untested, but something along the lines of that should work.

Solution 2:

If you have a map on your page all you need to do is write some javascript to resize the DIV that holds the map. I haven't implemented an example that resizes the DIV to fill the browser, but here is one that toggles the size of a map div from javascript (I use mooTools to set the style.width on the element, but you can use whatever you prefer to manipulate the DOM).

Solution 3:

On Dom ready:

• Init map and set center
• Get the current CSS size of the div containing the map

On enter-fullscreen-button click:

• Update the CSS (size and position)
• Trigger the resize map method
• Set map center

On exit-fullscreen-button click:

• Update the CSS (back to the initial size and position)
• Trigger the resize map method
• Set map center

You can find the code here

Solution 4:

Now we have a Fullscreen API https://developer.mozilla.org/en/DOM/Using_full-screen_mode you just select the DOM element you want to set to fullscreen and call the fullscreen API on it. Something like this

var elem = document.getElementById("myvideo");
if (elem.requestFullScreen) {
  elem.requestFullScreen();
} elseif (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} elseif (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen();
}

Solution 5:

on click you have to resize your div where you have show the map.....i think its simple