How do I create a show full screen button to toggle my google maps page to be full screen?

Question

Hi guys I have a google map integrated on part of my page and 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 extends to fill the whole browser screen and click on it again it is restored to its original size on the page. How would I do it?

Answer 1

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 your prefer to manipulate the DOM).

Answer 2

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

Answer 3

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.