Night Mode requires google maps Javascript update

[chacepro]

Will this be supported in the package in the future?

"Experimental map styles require your web app to use JavaScript Maps API version 3.47 or higher for vector-based maps and 3.49 or higher for raster-based maps."

per Introducing the latest in cloud-based maps styling

[mrMetalWood]

It is already supported, kind of. The night-mode/dark-mode is currently available in the beta version of the Google Maps API.

You can tell the <APIProvider> from this library which API version you want to use.

const App = () => (
  <APIProvider apiKey={API_KEY} version='beta'>
    <Map
      defaultZoom={3}
      defaultCenter={{lat: 22.54992, lng: 0}}
      gestureHandling={'greedy'}
      disableDefaultUI={true}
      colorScheme={"DARK"}
      renderingType={"VECTOR"}
    />
    <ControlPanel />
  </APIProvider>
);
export default App;

Once the feature leaves the beta stage it will be available in the stable API as well.

The only things that are not working yet are the constants for the values that google provides like:
google.maps.ColorScheme.DARK and google.maps.RenderingType.VECTOR

Once the feature is out of beta they will probably be made available through this library as well.

Nightmode example: https://codesandbox.io/p/devbox/react-google-maps-dark-style-cy7fzf?file=%2Fsrc%2Fapp.tsx%3A17%2C24

[chacepro]

Sweet! Thank you @mrMetalWood for the quick response. Look forward to the stable release.

[chacepro]

Ah yes, one thing to note is that this does not work with MapID being used. If MapId is omitted then the AdvancedMarker doesn't render properly so it's a catch-22. The only way to use both and style dark mode is using Google Cloud Map styling and that's a trick in itself.