StreetView API: Hiding FullScreen Control

Question

I am trying to hide the toggle fullscreen element in the Streetview API HUD.

panorama = new google.maps.StreetViewPanorama(document.getElementById(data.id), {

        position            : new google.maps.LatLng(data.lat, data.lng),
        pov: {
            heading         : Number(data.heading),
            pitch           : Number(data.pitch)
        },
        linksControl: false,
        panControl: false,
        addressControl: false,
        enableCloseButton: false,
        zoomControl: false,
        fullScreenControl: false,
        enableCloseButton: false,
        addressControlOptions: {
             position: google.maps.ControlPosition.BOTTOM_CENTER
        }
    });

These options are specced here. All the options are working except for the fullScreenControl

My code can be viewed live here. The UI element is in the top right corner of the viewport.

The documentation warns as follows:

Note: This page describes the controls available in version 3.22 and later of the Google Maps JavaScript API. If you want to continue using the earlier set of controls for a while, you can set google.maps.controlStyle = 'azteca' in v3.22. Read more about the changes to the controls in this article: What's New in the v3.22 Map Controls.

However I am linking to the API Js file as follows:

<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

And 3.exp should be 3.22 at the moment of writing.

What am I missing here?

Solution 1

Another solution is to use css to hide the fullscreen element:

.gm-style > div:nth-child(10){
 display:none;
}

Solution 2

fullscreenControl: false instead of fullScreenControl: false

Solution 3

The following is incorrect. It doesn't error but it has no effect on the control.

fullScreenControl: false,   -- this is not right

Correct code is

fullscreenControl: false,

See: https://developers.google.com/maps/documentation/javascript/reference

Solution 4

I believe there is a minor flaw in the API at this moment. I´ve made some tests and was also unable to remove the full screen control with the fullScreenControlOptions field, as specified in the documentation.

The full screen control is displayed even if you set the disableDefaultUI to true.

I know this may not be the better way to get rid of the element, but you can do something like:

var FULL_SCREEN_CONTROL_STYLE = {
	width: '25px',
	height: '25px',
	top: '0px',
	right: '0px',
	position: 'absolute',
	overflow: 'hidden'
};

var children = panorama.getContainer().getElementsByTagName('div');

for (var i = 0; i<children.length; i++) {

	var current = children[i];
		
	var match = true;
	
	for (var k in FULL_SCREEN_CONTROL_STYLE) {
		if (current.style[k] != FULL_SCREEN_CONTROL_STYLE[k]) {
			match = false;
		}
	}
	
	if (match) { // THIS IS OUR ELEMENT
		current.parentElement.removeChild(current);
	}
	
}

View more solutions