14

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?

peterh
  • 11,875
  • 18
  • 85
  • 108
Ali
  • 7,353
  • 20
  • 103
  • 161
  • 2
    You might want to reformulate the question as "How can create a COM control that would tell IE to inject some Javascript into the page so that the Google Maps are always shown fullscreen" to prevent it from being closed as not programming related. – ilya n. Jun 21 '09 at 07:41

5 Answers5

17

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
  • 54,010
  • 13
  • 102
  • 111
  • 1
    And how about to escape from the fullscreen mode? For example by pressing the ESC key, what would you do then? – Andrej Apr 12 '15 at 12:54
  • Have the document listen for escape key and react: ```$(document).keyup(function(e) { if (e.keyCode == 27) { $('#map').removeClass('fullscreen'); // esc } });``` – AntonB Nov 23 '15 at 20:06
5

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

RedBlueThing
  • 42,006
  • 17
  • 96
  • 122
  • If you're using jQuery, you can use "animate" - http://docs.jquery.com/Effects/animate – Chris B Jun 22 '09 at 18:41
  • An excellent suggestion or "tween" if you are bovine inclined (http://mootools.net/docs/core/Fx/Fx.Tween). – RedBlueThing Jun 22 '09 at 23:43
  • Excellent. I was looking for something like this, but didn't know it until I saw it. Thanks for posting your sandbox for us to play with. – sehummel Jan 05 '12 at 20:37
2

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

lou
  • 2,050
  • 1
  • 19
  • 28
1

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();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen();
}
andrei
  • 8,252
  • 14
  • 51
  • 66
0

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

Nazmul Hasan
  • 6,840
  • 13
  • 36
  • 37