Full screen Google Maps

You may have noticed that most of the maps on this site have a 'Full screen' option. Here is the code that supports this functionality, that you can add to your own Google Maps application.

First, you need to download this Javascript file.
Or grab the TypeScript version

Next, add a reference to the file in your HTML like so

<script src="js/FullScreenControl.js" type="text/javascript"></script>

Finally, add the control to your map, with the following line of Javascript

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
	 FullScreenControl(map, [optional text to use for full screen message],
	 [optional text to use for exit full screen message]));

Your map should now look something like the one below.

The object returned from the FullScreenControl method has two methods, goFullScreen and exitFullScreen, that you can call to programatically go full screen or exit full screen.

Sometime after I wrote this code, Google added a full screen option to the Google Maps API. So this code is generally redundant. But there is one scenario where it still can be useful. If you want to programmatically switch to full screen view, the Google Maps API full screen option won't work, but this approach can still be used.

The code has been tested in most browsers, but it's possible it may not work for particular page layouts.

Loading map...

Change History

1.09 - Updated styling to match latest Google Maps styles
1.08 - Added goFullScreen and exitFullScreen methods
1.07 - You can now customise the text displayed, thanks Claudio
1.06 - Added TypeScript translation
1.05 - Another IE8 fix
1.04 - Styling fits in better with new Google styles. Full screen button is hidden when printing
1.03 - Fix disappearance when Street View is used
1.02 - Fix in IE8
1.01 - Hide the body's scrollbar when full screen, better styling.
1.0 - Initial release