Custom full screen control behaviour with Google Maps API

Question

Is there any way to intercept the default behaviour of the full screen control using the Google Maps API?

I want to prevent the custom full screen behavior when you press the control without eliminating the UI. If the user clicks on the control the map will increase in size inside a container instead.

In case this is not possible, I wonder if the best way to achieve this would be to create an overlay attached to a click event.

Or may be I don't even need to use the overlay OverlayView class for this and I can manage it using only styles and the click event:

css:

#nav { z-index: 100; position: absolute; margin: 10px 0px 0px 200px; 
background-color: #fff; border: 1px #000 Solid; padding: 5px; }

html:

<body onload="initialize();">
    <div id="container">
       <div id="nav" onclick="fullScreenCustomSize();">Nav Menu</div>
       <div id="map"></div>
    </div>
</body>
...

Source

Any suggestions on how would be the best way to achieve this?

Are you after a fullscreen behaviour like this: lawa.org.nz if so, I guess you'll have to hide existing fullscreen button and add in your own that expands/shrinks the map container parent div? — Varinder
– Varinder, Commented Feb 4, 2018 at 22:41
As far as I can see the website you pointed out it seems to use openstreetmap instead of Google Maps but the desired effect is very similar to what I want to achieve (which would be the third option pointed out in the question). I'll take this solution if no better alternative comes up. Thanks! — rfc1484
– rfc1484, Commented Feb 5, 2018 at 8:04

MrUpsidown · Accepted Answer · 2018-02-05 21:45:45Z

3

There is no documented way of changing the behavior of the full screen control. What I would do is:

Remove the full screen button in the map options using fullscreenControl: false
Add your own button to the map UI using map.controls
Register your event to do whatever you need

Here is the documentation about controls and some examples.

edited Feb 5, 2018 at 21:45

answered Feb 5, 2018 at 10:01

MrUpsidown

22.5k15 gold badges83 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom full screen control behaviour with Google Maps API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related