CherryFramework 4. How to apply Google map custom style

This tutorial is going to show you how to change the default style of the Google map in the CherryFramework 4 based templates.

Google maps have various skins. Let’s check how to change the Light Monochrome map theme to the Midnight Commander theme.

You’ll need to perform the following steps in order to apply Google map custom style:

1. Go to the Snazzy Maps page and pick up any custom style, for example, Midnight Commander.

2. Copy the JavaScript Style Array. It’s a JSON code that contains the style’s information.

   

3. Go to the wp-content/themes/themeXXXXX/assets/ directory and create a new folder named googlemap.

4. Create a new file called, e.g., midnight_commander.json and paste the copied JSON code there. You should use the same name for the file as the name of the map theme, all letters lowercase, words separated by underscores.

   

5. Open the page that includes the Google map with the WordPress editor, find the cherry_google_map shortcode and change the map_style attribute to the name of the JSON file without the .json extension.

   

6. Update and reload the Contacts page. The new Google map style has been successfully applied.

   

Feel free to check detailed video tutorial below.