CODEWITHSUNDEEP
google-mapsfullscreen
swisst
swisst

Reputation: 112

How to exit full screen mode in Google maps API

I am programming web page with Google map on it and some markers (points). Markers have some InfoWindows, in InfoWindow is a link to a <div> tag on the same page. Something like

var infowindow = new google.maps.InfoWindow({
            content: '<a href="#info">See info</a>'
        });

In this way, the user can display InfoWindow on the map, and then the user can display additional information below on the web page.

It works fine. BUT if the map is in FullScreen mode, the link does not work.

If user clicks on the link in the full screen mode, I would like to

  1. Exit full screen mode, and
  2. Scroll to the anchored <div id="info">

Can somebody help?

I have tested, that if the link goes to another web page, then it works fine even in the FullScreen mode. The problem is only in linking the same page (via #id).

Upvotes: 0

Views: 2324

Answers (1)

swisst
swisst

Reputation: 112

I tweaked my original solution:

I muset set onClick listener to link ant this listener has to handle the two steps: 1) exit full screen mode and 2) scroll to given tag

Exiting full screen mode is done by i) Checking if document is in full screen mode and if yes, then ii) Exit full screen mode.

This must be done for different webkits

function onClickListener(id) {

    // Exit Full Screen Mode
    if (document.fullscreenElement ) {
    document.exitFullscreen();
    } else if (document.mozFullScreenElement ) {
    document.mozCancelFullScreen();
    } else if (document.webkitFullscreenElement ) {
    document.webkitExitFullscreen();
    } else if (document.msFullscreenElement  ) {
    document.msExitFullscreen();
    }

    // Scroll to #id - using jQuery
    $('html,body').animate({scrollTop:$('#'+id).offset().top}, 700);

    return false;
}

Upvotes: 4

Related Questions