How to Style Google Maps in WordPress

You — or the web designer you hired — have worked so hard to make everything on your brand new site just perfect. Every single one of the elements has been taken care of. Font family, font sizes, main color, other colors, empty spaces, images, illustrations…everything looks perfect. But, what about the maps?

Maps are there to make it easier for visitors to locate your business. Their functional part is obvious, but what about the visual impression? Google Maps are almost everyone’s choice when it comes to displaying location. And sometimes their default look will fit your website style perfectly. But in many cases it will have to be adjusted a bit in order to blend in and work well with the rest of the design.

There are a couple of different ways to customize Google Maps in WordPress. They are all quite simple and don’t require any particular technical knowledge. Read on and find which one works the best for you.

You can also check out our handy video tutorial on setting up Google maps using any of the Qode themes.

Styling Your Maps Using a Plugin

One of the simplest ways to customize your Google maps is to use one of the plugins created just for this purpose. Our choice is Snazzy Maps, a lightweight and simple plugin with hundreds of free styles.

Start by going to Plugins > Add New.

The plugin we are looking for is called Snazzy Maps so type that name into the search form. When you find it, click on the Install button and then activate it.

Now that the plugin is installed and activated, you can reach it under Appearance > Snazzy Maps.

In order to explore and choose styles for your website, you need to create a Snazzy Maps account to get an API Key.

When you have successfully created an account, navigate to your profile page and in the Developer section click on the Generate API Key button to get the code.

Now, in the Snazzy Maps Settings, enter your API Key and hit the Save button.

You are now ready to explore styles and customize your maps. Hop back to the Explore tab. You’ll find plenty of map styles over there. You can use the recommended ones, or create your own unique styles.

When you find a map style that works perfectly for your website, click on the Save Style button, so that you can use it later.

And, to create your own custom style, go to your Snazzy Maps account, and click on Create a Style in the menu.

You will now have a chance to create your own style with the colors you set and the type you choose to customize. When you feel your style is ready, hit the green Apply Style button, give your custom style a unique name, and save it.

To find your custom styles in the admin of your site, choose My Styles from the dropdown in the Snazzy Maps Explore tab.

Click on Enable and WordPress will apply the style directly to the Google maps on your website.

Customizing Google Maps in Qode Interactive Themes

If you are using one of Qode Interactive’s premium WordPress themes that comes with a predesigned shortcode for Google maps, then half your work’s been done for you.

Depending on your theme, the shortcode will come with different customization options. For instance, some themes include the ability to add an overlay or to change the colors right there in shortcode settings, while others come with a form for inserting the Snazzy Maps code.

For example, our WordPress theme Gluck comes with a Google Maps shortcode that allows you to enable custom Snazzy Maps styles and contains a field for inserting code.

To get this code, you don’t actually need to install the Snazzy Maps plugin. All you need to do is go to the Snazzy Maps website, log in or create an account, create your own style, or choose from the existing ones, and copy its unique code.

Your unique code will appear on the left. Copy the entire code.

Insert your Snazzy Map code in the appropriate field in the shortcode, and the map on your page will look exactly as you styled it.

Final Thoughts

Whether you opt for a plugin or use a theme with a built-in Google Maps shortcode to customize the way the maps will be displayed on your pages, what’s important is — you don’t have to settle for the default view. After investing a lot of time and effort into perfecting your website design, you really should make sure the maps fit the overall tone and atmosphere perfectly. Don’t be afraid to play around with the styles. It’s fun, easy and definitely worth your while.

Originally published at https://qodeinteractive.com on November 18, 2019.