How to trigger document fullscreen on first interaction with Google Maps

Question

How can I go fullscreen with the whole document when someone clicks/taps on the map? I tried using the google.maps.event.addListener dragstart but somehow the browser rejects the fullscreen request because it needs to be initiated by a user interaction. So I guess, this event does not count as one...

On top of that, I tried all mouse events on the <div> container used by the Google Maps JS API, however, looks like all events are blocked/catched and none got through my separate event listener.

How can I achieve this?

---

PS: The reason I want to go fullscreen with the map (and my own navigation items around it) is because on mobile devices, when draging the map downwards, the address bar shows up which messes up the viewport height and also regular map dragging with one finger.

Answer 1

NOTES

If you want to trigger the fullscreen of the webpage on map click, then you can do the following:

HTML

<div id="map"></div>
<script src="http://maps.google.com/maps/api/js?key=API_KEY">
</script>

JS

const docElem = document.documentElement;
const mapElem = document.getElementById('map');

mapElem.addEventListener('click',function( event ){
    // Uncomment if you do not want the default click action to happen
    // event.preventDefault();

    // Exit fullscreen if already in use
    if ( document.fullscreenElement ) 
        document.exitFullscreen();
    
    // Trigger fullscreen on document
    if ( docElem.requestFullscreen ) 
        docElem.requestFullscreen().catch( error => console.error( error ) );
})