StreetView API: Hiding FullScreen Control [closed]

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?

Gonna

I confirm it's not working in 3.22. I can't find "fullScreenControl" in the Google's documentation, where is that? – Radius

Answer 1

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

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

Donau

with the newest release of Googlemap(v3.23), this is broken. – Aylward

Use the answer right below this one, it is much better – Ywis

Yeah https://mcmap.net/q/445336/-streetview-api-hiding-fullscreen-control-closed is much better, this is way too hacky and not future-proof since it's directly linked to the HTML, which could change in the future. – Winwaloe

Instead of relying on the button being 10 children away, Try this: $(".gm-fullscreen-control").parent().hide(); JavaScripter below had the right idea, but just hiding the image doesn't get rid of the button, and you can still click it and go full screen. This finds the exact image, and then removes the parent - button. – Partlow

Answer 2

fullscreenControl: false instead of fullScreenControl: false

Antung

The answers by user3586022 and Javascripter, which use CSS to hide the full screen button, successfully hide the button icon but leave behind a clickable area that can be used to enter full screen. This answer works full and is how is documented. developers.google.com/maps/documentation/javascript/3.exp/… – Croaky

this should be the answer – Karen

the correct answer :| – Bacolod

Answer 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

Hoedown

It's work perfect, cheers – Forrer

Answer 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);
	}
	
}

November

Answer 5

With the newest release of Googlemap v3.22, v3.23 on 18 January 2016, following will do the job:

.gm-fullscreen-control {
  display: none;
}

Aylward

Answer 6

Michal Szyndel has it correct. The s in screen is lower case. I suggest his answer is changed to the correct answer. I Tested today fullscreenControl works but fullScreenControl does not.

Vespid