Need Google Maps customization for your directory? See how to use Snazzy Maps for the easiest way to customize Google Maps style.
Google Maps has been the most popular way to display any location, roads, and parks on websites. Although it has a good default style, you may want to go the extra mile. Sometimes you would like to blend it with your website’s design, features, and elements. But how to do that?
There is no built-in Google Maps style customization tool so far. Does it mean all websites must use the same Google map style regardless of your design language or on-page feature type? Fortunately, the answer is a big NO!
In this post, today we’ll show you how to customize Google Maps styles in a few simple steps. We’ll use WordPress as the platform, as you've already noticed in the title. This way, you won’t need to touch any CSS, JSON style, JSON code, or so on to style these vector maps.
And don't worry, you won't have to be a web designer or work with a style array to follow this tutorial. Most of the Google API-based maps will be covered by this simple method.
Best tools to customize Google Maps styles in WordPress
For Google map customization, we'll need only a WordPress plugin called Snazzy Maps. It’s free for personal use. If you want to use Snazzy Maps on a business site, you can purchase a license from their website.
Please remember, Snazzy Maps doesn’t add any map to your site. It has no system to do so. If you have embedded Google Maps frame(s) on your site, Snazzy Maps can change the style of these maps.
Snazzy Maps works with almost any Google Maps frames that you add using Google's API key. That means, if you embed a map using a traditional iFrame, Snazzy Maps won’t be able to make a custom style for that map.
In this tutorial, we'll use Google Maps frames displayed on our test site. It's a WordPress geodirectory site built using Business Directory Plugin – the best WordPress directory plugin. Anyone can create a directory website on WordPress using this easy-to-use plugin.
Business Directory Plugin has a Google Maps module that lets you display Google Maps in listing items. Also, you can show Google Maps on your directory site’s search, category archive, and more pages.
If you’re a Business Directory Plugin user, please see our documentation on how to add Google Maps to WordPress directory sites. These map frames use the global Google Maps style by default.
Google Maps Customization with Snazzy Maps
Now that you know what tools we need to add Google Maps to your site. We’ll assume that you’ve already added the maps to your site using the Google Maps API key.
Business Directory Plugin lets you easily add maps with an API key to your directory items. You can get the API key from Google's cloud console.
So ensure that your maps are being displayed on your site. Below is an example of how Business Directory Plugin listing items’ maps are displayed with the default Google Maps style.
You can customize it to create a styled map presentation by following this tutorial.
So, once you see the maps on your target pages, you can follow the steps below.
Step 1: Install and activate the Snazzy Maps WordPress plugin
Visit Snazzy Maps on the WordPress plugin repository and download the plugin from there.
Then log in to your WordPress dashboard. Navigate to Plugins → Add New.
Click the Upload Plugin button beside Add Plugins (top left).
Upload the downloaded .zip file. Install and activate the plugin.
Step 2: Add Google Maps styles from Snazzy Maps collection
After activating the plugin, navigate to Appearance → Snazzy Maps from your dashboard. This will take you to its Site Styles tab. You’ll see a page like the below screenshot.
From the above screen, click the Explore link. You’ll get many map styles.
Click the SAVE STYLE button for your preferred styles. Then again back to the Site Styles tab. Your saved styles will appear.
Step 3: Apply your desired custom Google map style
Now you have your saved map styles in your collection. Click the Enable button to apply any style. It will enable that style to all of the Google Maps frames on your site.
We've enabled the Midnight Commander style. It is marked accordingly as you can see in the above screenshot.
Now let’s visit our listing item and see how it looks.
So our listing item’s map style has been changed successfully!
Now you know how easily we can change Google Maps styles on WordPress.
Learn More: How to Create Google Maps Custom Tooltips on Your Directory
Moving on, you can also create your own custom map style using Snazzy Maps’ online editor. You can give that a try to create a map as well.
Wrapping up
We believe this tutorial will help you customize Google Maps styles on your WordPress site. Please share your experience with us via comments. Got a tutorial idea? Feel free to let us know your points of interest too!
Stay tuned to our blog for more useful WordPress tutorials. Use our WordPress directory plugin to create a listing site and earn money. Thank you for being with us!
How to Effectively Use Club Directory Software
How to Add a Google “Get Directions” Button in WordPress
How to Set Up a Geodirectory Plugin on Your WordPress Site
Leave a Reply