Hide default fullscreen button on react-google-maps

Question

I have a problem with react-google-maps.

I created my own button for FullScreen toggle

I have tried but can't find the way to get rid of the default button. I tried to add this to my code, but it didn't work.

<GoogleMap
 ref={(map) => console.log()}
 defaultZoom={12}
 defaultCenter={{ lat: this.state.lat, lng: this.state.lng }}
 fullscreenControl={false}
>

Any help will be appreciated.

Cheers!

Answer 1

Just to include it in default options

const defaultMapOptions = {
  fullscreenControl: false,
};

const InputGoogleMap = withGoogleMap(props=>(
  <GoogleMap
    ref={(map) => console.log()}
    defaultZoom={12}
    defaultCenter={{ lat: this.state.lat, lng: this.state.lng }}
    defaultOptions={defaultMapOptions}
  />
))

For more Google Maps options you can find it here: https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapOptions

Answer 2

I think library got an update: google-map-react 0.23

defaultOptions changed to options

const mapOptions = {
  fullscreenControl: false,
};

const Map = withGoogleMap(props=>(
  <GoogleMap
    defaultZoom={12}
    defaultCenter={{ lat: this.state.lat, lng: this.state.lng }}
    options={mapOptions}
  />
))

Hope it helps

Answer 3

Above both solutions were not working for me. Since I was using some custom styles along with the above styles. This removes both the full screen and the zoom in and zoom out buttons

const waterStyle = [
{
  featureType: "water",
  elementType: "geometry.fill",
  stylers: [
    {
      color: "#4BB4F5",
    },
  ],
},]

 <GoogleMap
    defaultCenter={{ lat: 0, lng: 0 }}
    defaultZoom={3}
    options={{
      styles: waterStyle,
      disableDefaultUI: true,
    }}
  >

If you want to only hide the full-screen button you use: Zoom in and out buttons can be visible and used

 <GoogleMap
    defaultCenter={{ lat: 0, lng: 0 }}
    defaultZoom={3}
    options={{
      styles: waterStyle,
      fullscreenControl: false,
    }}
  >

Answer 4

None of the solutions worked, I have the 2.0.6 version of google-maps-react. It worked, however with passing down as props.

Example:

<GoogleMap
defaultCenter={{ lat: 0, lng: 0 }}
defaultZoom={3}
fullscreenControl: false,
>

Answer 5

Nah, my mate solved it, just target the class instead of trying to hide it with the props

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

Answer 6

We need hide the icon and disable click event:

.gmnoprint.gm-style-cc + button,
.gm-fullscreen-control {
  display: none;
}