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

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