React-Google-Maps: Zoom +/-, Map/Satellite icons not visible

Question

I am not seeing the zoom +/-, Map/Satellite and the Human icon on the map. I am following the steps as specified in the documentation. Is there any specific props I have to pass? Or is there an outstanding issue? Thanks for any help.

Here is snippet of what my GoogleMap component looks like -

*

withScriptjs(
      withGoogleMap(() => {
       return (<GoogleMap
          // google={google}
          defaultZoom={8}
          center={selectedAirportPos}
          // center={{lat: 39.996944444444445, lng: -82.89194444444445 }}
          // defaultCenter={{ lat: -34.397, lng: 150.644 }}
           defaultOptions={{
            // defaultCenter: {lat: -34.397, lng: 150.644 },
            disableDefaultUI: true,
            mapTypeId: 'terrain',//google.maps.MapTypeId.TERRAIN,
          }}
        >
           <GMapsAirportMarker
             withInfoWindow={allMarkersState[selectedAirport.id]}
             withInfoWindowContent={this.selectedInfoWindowContent(selectedAirport)}
             position={selectedAirportPos}
             icon

*

Answer 1

You have disableDefaultUI set to true. This removes the zoom, map type controls from the map. If you only want a specific map type to be available to users, you can set defaultMapTypeId as a prop in GoogleMap component.

https://developers.google.com/maps/documentation/javascript/examples/control-disableUI

https://tomchentw.github.io/react-google-maps/#googlemap

Answer 2

<GoogleMap
    defaultZoom={default_center.zoom}
    defaultCenter={default_center}
    key={new Date().getTime()}
    options={{
        streetViewControl: false,
        draggable: true, // make map draggable
        zoomControlOptions: { position: 9 },
        keyboardShortcuts: false, // disable keyboard shortcuts
        scaleControl: true, // allow scale controle
        scrollwheel: true, // allow scroll wheel
        styles: mapsStyle,// change default map styles,
    }}
>