[SOLVED] Custom full screen control behaviour with Google Maps API

Custom full screen control behaviour with Google Maps API

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?

Solution

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.