Skip to content

Instantly share code, notes, and snippets.

@lou
Created January 2, 2012 12:10
Show Gist options
  • Save lou/1550454 to your computer and use it in GitHub Desktop.
Save lou/1550454 to your computer and use it in GitHub Desktop.
Google map Fullscreen with jQuery
$(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;
});
});
@mikecbrant
Copy link

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

@ofelia79
Copy link

ofelia79 commented Jun 9, 2014

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

@fabarea
Copy link

fabarea commented Mar 30, 2015

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;
});

@ayyoobcastro
Copy link

how can add a button on a map

please help me someone

@null0rUndefined
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment