Full Screen toggle for Google Maps

Question

I'm working on a project where specific locations are added onto a Google Map. All working nicely: http://www.secret-vault.com/nostradamus/locations.html

I have added a toggle (jQuery) button to change to full screen (which can be escaped by Esc button).

        $("#map_toggler").click(function() {
          $("#map").toggleClass("fullscreen")
        });

And used supporting CSS to change the map to full screen:

#map.fullscreen {
  position: fixed !important;
  top:0;
  left:0;
  z-index:1;
  width:100%;
  height: 100%;
  margin:0;
  padding:0;
}

I reset padding etc. to see if this was the root of the issue.

Problem is... Sometimes it will go full screen, other times it part fills height or returns to original height. This occurs particularly when zooming in/out.

There is a similar Q. here: How do I create a show full screen button to toggle my google maps page to be full screen? but this solution doesn't seem to be doing the trick.

can you please post a fiddle of your code to see the behavior you are getting? — Carlos Valencia, Aug 03 '17 at 14:54
I completed some further testing, the issue seems to be with the Google Api itself. I have large widescreen monitors. I just tested on other devices and standard montiors and the full screen works as expected. Issue seems to occur when using widescreen monitors, basically a percentage of the page appears white, rather than showing the entire map. — Pete - iCalculator, Aug 03 '17 at 15:29
Why the downvotes? Makes no sense without providing feedback. — Pete - iCalculator, Aug 03 '17 at 15:33
well it wasn't me but I guess it's because you're not providing enough detail to recreate the problem you're having, anyway i don't think your widescreen monitor is the issue, perhaps you should upload a fiddle where you can see your problem happening and let people here see exactly what you mean — Carlos Valencia, Aug 03 '17 at 15:51
This tends to happen when your map gets larger than it was when you initialized the map. This would not happen if you initialized it in full screen, then reduced the size. See if it helps to resize, like this: https://stackoverflow.com/questions/18444161/google-maps-responsive-resize — Emmanuel Delay, Aug 03 '17 at 16:06
@randomguy04 I didn't post a toggle as the link showed the effect live. I just assumed that those who use the site, like me, have sufficient knowledge to comprehend my 'Problem is' statement. I think a lot on here just down vote for no real reason. Main thing is we go to the solution, it's a bug in the api linked to the zoom, the original container size bleeds through. Thanks Guys :) — Pete - iCalculator, Aug 05 '17 at 08:09

score 0 · Answer 1 · answered Aug 05 '17 at 08:12

Thank to the insight from Emmanual

The flickering effect is caused by a bug in the api. When altering zoom, the map still looks for the original container size. Clearly the size parameters are captured in a certain element within the zoom setting.

This can be resolved by first setting the map to full screen and then altering to fit the container. See details in this post: Google maps responsive resize

Thanks for the support guys.

Full Screen toggle for Google Maps

1 Answers1