Can I Make Google Maps Match the Color Scheme of My Site?

It’s great having google maps embedded on a site, but sometimes the default color scheme just doesn’t look great with everything else going on. For the purpose of this, let’s assume the API key is already set up, and you have a map you want to change the look of, so we can skip all that and move right to adding the custom look.

After the script to link the google map API, we are going to place another script, the basics of which look like this-

Within the map init function is where the custom colors will get added, the first step is to create a new google map instance.

Within the styles array is where the colors get defined. There are some great tools for helping to discover all of the options that are available to change. Snazzy Maps, and Google’s own resource.

Once you’ve made you color selections, your code will look something like this.

And voila! A map that matches the rest of the site. It should be noted, that custom markers, like in the image below can also be added in the mapInit function.