DEV Community

loading...

Custom Google Maps styles, with night mode! 🌒

hasnaindev profile image Muhammad Hasnain ãƒŧ1 min read

Dark mode has become a trend in modern day websites (pun intended, i'm so funny ðŸĪŠ). Recently, I worked on a project where we had a highly customized Google Map. There were a lot of Map and DOM interactions along with styling. A lot went into it. ðŸĨī

While studying how to style Google Maps, I stumbled across a very good resource that gives you readymade Google Maps styles, including Night Mode.

Introducing, Google Maps Styling Wizard! 🎊🎉

How To ðŸąâ€ðŸ‘“

Literally, select any style you want and click on the Finish button. It gives styles for the selected map theme in JSON format. After that, all you have to do is this.

const map = new google.maps.Map(element, {
  styles: [...], // Paste your styles here!
});
Enter fullscreen mode Exit fullscreen mode

Of course, make sure to set appropriate zoom level, position coordinates and API keys etc.

PS, the JSON formats are also a good way to learn how to style your maps. For more info, look into the official Google Map styling guide.

Discussion (2)

pic
Editor guide
Collapse
junaidkbr profile image
Junaid Ahmed

Thanks for sharing. Another good resource for map styles is snazzymaps.com/. Highly customizable, great community, easy to use.

Collapse
hasnaindev profile image
Muhammad Hasnain Author

Thanks for sharing this! 🙌