31

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?

matthiasdv
  • 1,136
  • 2
  • 15
  • 26
  • I confirm it's not working in 3.22. I can't find "fullScreenControl" in the Google's documentation, where is that? – giacecco Dec 10 '15 at 10:56

6 Answers6

89

fullscreenControl: false instead of fullScreenControl: false

Mike Szyndel
  • 10,461
  • 10
  • 47
  • 63
papy98
  • 909
  • 6
  • 3
  • 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. https://developers.google.com/maps/documentation/javascript/3.exp/reference – David Mar 10 '16 at 14:08
  • 1
    this should be the answer – sc1013 Jun 13 '17 at 03:59
  • the correct answer :| – FaridFaa May 25 '19 at 12:19
32

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

Arun Prasad E S
  • 9,489
  • 8
  • 74
  • 87
XAos SPB
  • 321
  • 3
  • 2
3

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

.gm-style > div:nth-child(10){
 display:none;
}
hagu81
  • 197
  • 9
  • 1
    with the newest release of Googlemap(v3.23), this is broken. – JavaScripter Jan 25 '16 at 00:56
  • 1
    Use the answer right below this one, it is much better – satnam Dec 10 '16 at 16:46
  • Yeah https://stackoverflow.com/a/38569859/1768087 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. – FrozenDroid Sep 20 '17 at 11:08
  • 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. – jbraun Feb 22 '18 at 23:55
2

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);
 }
 
}
Romulo
  • 4,896
  • 2
  • 19
  • 28
0

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

.gm-fullscreen-control {
  display: none;
}
JavaScripter
  • 4,282
  • 9
  • 37
  • 45
0

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.

Nic
  • 1