How to create & import custom color schemes

Thumbnail and Interactive maps can have custom color schemes applied to them. That means that you can open any map builder online to generate a unique style for your map, and then import the code back to Google Maps Widget PRO.

To enable Custom Color Schemes, it is important that the Map Type is set to Road (default). Custom styles can’t be applied to other map types.

To start customizing, open one of these online map builders:

• Snazzy Maps – offers more than 15,000 styles which can be customized
• MapStylr – customize elements and generate a unique map
• Map Style – choose a theme and edit one in a few steps

When importing styles, only use JSON formatted (JS style) custom style. It should look something like this:

[ { “featureType“: “all”, “elementType“: “all”, “stylers“: [ { “visibility“: “on” } ] }, { “featureType“: “all”, “elementType“: “labels”, “stylers“: [ { “visibility“: “off” }, { “saturation“: “-100” } ]

Differences between custom style on Thumbnail and Interactive maps

Unfortunately, there are differences when it comes to styling thumbnail and interactive maps.

While the Interactive map can have any style that you want, the Thumbnail one is limited by the length of the URL. Depending on the number of pins, and other map settings, you will be able to load only a specific number of unique elements. The URL shouldn’t exceed 2048 characters – if that happens, the style won’t be loaded correctly.

How to check the number of characters

If you want to make sure that your URL doesn’t exceed 2048 characters, you can quickly check it.

Once you have applied the style to the Thumbnail map, do the following:

1. Preview the map by opening your site.
2. Right-click on the Thumbnail map and open the image in new tab
3. Copy the URL
4. Navigate to LetterCount and paste the URL
5. Press Count Characters button

If the number exceeds 2048, your style won’t work and you will have to reduce the number of options.

When it comes to the Interactive map, you don’t have to count characters or limit your options. Feel free to play around with colors and styles until you get that perfect color scheme that you wanted.

How to use Snazzy Maps to import a custom style

Since Snazzy Maps offer more than 15,000 styles to choose from, let us show you how to choose one for your site.

1. Navigate to Snazzy Maps
2. Explore styles and choose the one you like
3. On the left side of the screen, find “JAVASCRIPT STYLE ARRAY” option
4. Click on the Expand Code button found on the bottom
5. Copy the entire code and paste it into the Custom Color Scheme field
6. Save changes

How to use MapStylr to import a custom style

1. Open MapStlyr map builder
2. Customize the map by choosing elements from the menu on the left side of the screen
3. Once done, click Get JSON button on the top-right corner of the screen
4. Copy the entire code and paste it into the Custom Color Scheme field
5. Save changes

How to use Map Style to import a custom style

1. Go to Map Style website
2. Choose a theme from the left side menu
3. Adjust density of features or click More Options button to style the map
4. Click Finish button
5. Click Copy JSON button
6. Paste the code into the Custom Color Scheme field
7. Save changes