Hide default fullscreen button on react-google-maps

user_6191869 0
Viewed 12444

I have a problem with react-google-maps.

I created my own button for FullScreen toggle

enter image description here

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!

reactjs google-maps-api-3 google-maps javascript
6 Answers

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

user_90914850

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,
    }}
  >
user_110548050

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,
>
user_82128810
Related