Google map Fullscreen with jQuery

gmap-fullscreen.js

$(function() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {});
  var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);

  var googleMapWidth = $("#map_canvas").css('width');
  var googleMapHeight = $("#map_canvas").css('height');

  map.setCenter(newyork);

  $('#enter-full-screen').click(function(){
    $("#map_canvas").css("position", 'fixed').
      css('top', 0).
      css('left', 0).
      css("width", '100%').
      css("height", '100%');
    google.maps.event.trigger(map, 'resize');
    map.setCenter(newyork);
    return false;
  });

  $('#exit-full-screen').click(function(){
    $("#map_canvas").css("position", 'relative').
      css('top', 0).
      css("width", googleMapWidth).
      css("height", googleMapHeight);
    google.maps.event.trigger(map, 'resize');
    map.setCenter(newyork);
    return false;
  });
});

Very useful! Thanks. Consider passing in .css({ 'position': ... })

hi, I could see an example of a full page, please? I can not render the map in fullscreen, return the error "Uncaught TypeError: Can not read property 'offsetWidth' of null"
Thank you, Manuela

I used your code as starter. Thanks! I added a container around so that the button are still visible (particularly the exit button) even if the map is full screen.

    <div id="map-container">
        <div class="btn-full-screen" style="text-align: right">
            <button id="btn-enter-full-screen">Enter full Screen</button>
            <button id="btn-exit-full-screen" style="display: none">Exit full Screen</button>
        </div>
        <div id="map-canvas"></div>
    </div>

JavaScript had to be adapted as well.

// Save with and height for full screen mode
var googleMapWidth = $("#map-container").css('width');
var googleMapHeight = $("#map-container").css('height');

$('#btn-enter-full-screen').click(function() {

    $("#map-container").css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        backgroundColor: 'white'
    });

    $("#map-canvas").css({
        height: '100%'
    });

    google.maps.event.trigger(map, 'resize');
    map.setCenter(newyork);

    // Gui
    $('#btn-enter-full-screen').toggle();
    $('#btn-exit-full-screen').toggle();

    return false;
});

$('#btn-exit-full-screen').click(function() {

    $("#map-container").css({
        position: 'relative',
        top: 0,
        width: googleMapWidth,
        height: googleMapHeight,
        backgroundColor: 'transparent'
    });

    google.maps.event.trigger(map, 'resize');
    map.setCenter(newyork);

    // Gui
    $('#btn-enter-full-screen').toggle();
    $('#btn-exit-full-screen').toggle();
    return false;
});

how can add a button on a map

please help me someone

mhdayyoob,
map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('yourElement'));
You can read more about this here.