How to trigger Google Maps fullscreen mode with a separate button? - google-maps

Question

Basically I'd like to be able to add a standalone button to trigger the Google Map I've embedded onto my site to enter fullscreen mode. I haven't had any luck locating an answer as of yet, so any help would be greatly appreciated.
Currently the only way to enter fullscreen mode is by clicking the fullscreen button inside the map (at the top right). I imagine I just need to assign the same command that this button has, although I'm not sure if that would work on an element outside of the map.
Thanks in advance!

Answer 1

I don't know if you solved this, but i've recently faced same problem and I want to share the way I did it.
Basically what I've done is show the default fullscreen control then find it in the dom using its title, then I manually fired click event.
When I verified that worked, I written a css to hide the button.
This is a little bit hacky but it works!
function initMap() {
var container = $('#container').get(0);
var map = new google.maps.Map(container, {
center: {lat: -39.000, lng: -60.000},
zoom: 3,
fullscreenControl: true
});
$('#fullscreen').click(function() {
$('#container div.gm-style button[title="Toggle fullscreen view"]').trigger('click');
});
}
#container div.gm-style > button[title="Toggle fullscreen view"] {
display: none;
}
See this fiddle
Hope this help.

Answer 2

You could simply call requestFullscreen method from the map's container. Like this:
$('[data-id="map_go_fullscreen"]').click(function(e){
var map = document.querySelector(".gm-style");
map.requestFullscreen();
});
Docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen

Answer 3

map = new google.maps.Map(document.getElementById('map') , {
zoom: 6,
center: latLng,
gestureHandling: 'none'
});
initFullscreenControl(map);
function initFullscreenControl (map) {
var elementToSendFullscreen =
map.getDiv().firstChild;
var fullScreenControl =
document.querySelector('.fullscreen-control');
fullScreenControl.onclick = function() {
elementToSendFullscreen.requestFullscreen();
};
};
<div class="controls fullscreen-control">
<button title="Toggle Fullscreen"> Show full screen </button>
</div>
<div id = "map"></div>