样式 google-map-react 地图

Question

I am building a map with google-map-react and trying to style it with no luck. I am using the documentation here: https://github.com/google-map-react/google-map-react/blob/master/API.md and adding styles via a prop called options like it says but I am not seeing any styles being applied.

Here is my code:

const createMapOptions = () => {
  return {
    styles: [{stylers: [{'saturation': -100}, {'gamma': 0.2}, {'lightness': 4}, {'visibility': 'on'}]}]
  }
}

const Map = ({center, children, onGoogleApiLoaded, useGoogleMapsApis, zoom}) => {

  return (
    <div className='h-100p w-100p'>
      <GoogleMap
        bootstrapURLKeys={{key: '...'}}
        defaultCenter={center}
        defaultZoom={zoom}
        options={createMapOptions}
        yesIWantToUseGoogleMapApiInternals={useGoogleMapsApis}
        onGoogleApiLoaded={onGoogleApiLoaded}
      >
        {children}
      </GoogleMap>
    </div>
  )
}

Any guidance on how to get ANY styling applied would be greatly appreciated.

Note - I am using a developer key, not sure if that could be why I am not seeing the styling?

Also Note - I do not want tips on react-google-maps a similar library, but not the same as google-map-react . Ive seen other google-map-react questions answered and up voted with people referring to react-google-maps .

Answer 1

Some times styling in react as difficult when you use packages. So the Best Way to do it is

1. Open Inspect Element in your browser
2. Select the Particular Element whose styling you want to modify.
3. Copy the class that is used in it already.
4. Make changes to the same css className in your own scss or css file and will modify.

Note : If nothing Happens Try using the !important in the property.

Answer 2

https://developers.google.com/maps/documentation/javascript/controls#ControlOptions

Use this as resource to change css for the package.

Screenshot from the the above resource