views:

1316

answers:

3

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?

+4  A: 

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

Cannonade
If you're using jQuery, you can use "animate" - http://docs.jquery.com/Effects/animate
Chris B
An excellent suggestion or "tween" if you are bovine inclined (http://mootools.net/docs/core/Fx/Fx.Tween).
Cannonade
+1  A: 

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

nazmul hasan
+2  A: 

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.

August Lilleaas