How to implement Dark Mode map?

Question

I am fairly new to web development and I have been playing around with this new react google maps package, i installed it using npm i @vis.gl/react-google--maps package.

I was wondering if there is an option to make the embedded google map on my website dark mode? I know that I can go step by step and create a dark mode map style and then apply that style to a map through the actual google api but I cannot design for my life and It seems like an awfully tedious task. Is there an easier way to get the dark mode for the map, perhaps a setting I am unaware of or some simpler way through tailwind styling?

Here is my Next.js code where I am setting up the map. Please do give me any other suggestions on how I can improve!

My Code

Thank you and have a Great Day!

I am just trying to find a way to achieve a dark mode design with the map.

Answer 1

This is the style google uses for night mode Styled Maps - Night Mode |  Google for Developers

You can copy the nightModeMapStyles array below and use it in your code for night/dark mode.

const nightModeMapStyles = [
  { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
  { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
  { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
  {
    featureType: "administrative.locality",
    elementType: "labels.text.fill",
    stylers: [{ color: "#d59563" }],
  },
  {
    featureType: "poi",
    elementType: "labels.text.fill",
    stylers: [{ color: "#d59563" }],
  },
  {
    featureType: "poi.park",
    elementType: "geometry",
    stylers: [{ color: "#263c3f" }],
  },
  {
    featureType: "poi.park",
    elementType: "labels.text.fill",
    stylers: [{ color: "#6b9a76" }],
  },
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [{ color: "#38414e" }],
  },
  {
    featureType: "road",
    elementType: "geometry.stroke",
    stylers: [{ color: "#212a37" }],
  },
  {
    featureType: "road",
    elementType: "labels.text.fill",
    stylers: [{ color: "#9ca5b3" }],
  },
  {
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [{ color: "#746855" }],
  },
  {
    featureType: "road.highway",
    elementType: "geometry.stroke",
    stylers: [{ color: "#1f2835" }],
  },
  {
    featureType: "road.highway",
    elementType: "labels.text.fill",
    stylers: [{ color: "#f3d19c" }],
  },
  {
    featureType: "transit",
    elementType: "geometry",
    stylers: [{ color: "#2f3948" }],
  },
  {
    featureType: "transit.station",
    elementType: "labels.text.fill",
    stylers: [{ color: "#d59563" }],
  },
  {
    featureType: "water",
    elementType: "geometry",
    stylers: [{ color: "#17263c" }],
  },
  {
    featureType: "water",
    elementType: "labels.text.fill",
    stylers: [{ color: "#515c6d" }],
  },
  {
    featureType: "water",
    elementType: "labels.text.stroke",
    stylers: [{ color: "#17263c" }],
  },
];

React code:

<Map
  defaultZoom={9}
  defaultCenter={{ lat: 53.54, lng: 10 }}
  styles={nightModeMapStyles}
/>