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 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?
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.
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).