Categories

Featured templates

PrestaShop 1.6.x. How to add custom Snazzymaps style to “TM Google Map” module

Alice Weasley May 19, 2015
Rating: 5.0/5. From 1 vote.
Please wait...

This tutorial shows how to add custom Snazzymaps style to “TM Google Map” module in PrestaShop 1.6.x.

PrestaShop 1.6.x. How to add custom Snazzymaps style to “TM Google Map” module

This module allows to add Google map with your stores location and short description about them on your front page. The map will show up the addresses of all stores related to your online shop. You can edit your stores details under Preferences > Store Contacts tab.

The module is installed and deleted like any other PrestaShop module.

To add custom Snazzymaps style to “TM Google Map” module, perform the following steps:

  1. Open https://snazzymaps.com to configure the style and elements of your map:

    Prestashop_1.6_How_to_add_custom_Snazzymaps_style_to_TM_Google_Map_module_1

  2. Select the map style from the site and copy JavaScript Style Array:

    Prestashop_1.6_How_to_add_custom_Snazzymaps_style_to_TM_Google_Map_module_2

  3. Create a .js file in modules/tmgooglemap/js/styles, paste JavaScript Style Array to it, having var google_map_style = before the map code and save it:

    Prestashop_1.6_How_to_add_custom_Snazzymaps_style_to_TM_Google_Map_module_3

    Name it under the style title. Note that you cannot use spaces and special characters in the name.

    For example: for Subtle Grayscale style – subtle_grayscale.js file, for Apple Maps-esque style – apple_maps-esque.js file, etc.:

    Prestashop_1.6_How_to_add_custom_Snazzymaps_style_to_TM_Google_Map_module_4

  4. Then, navigate to your module configuration page (Modules > Modules > TM Google Map > Configure > Map Style) and select the required style from the styles drop-down list.

  5. Save the changes and refresh the site.

Feel free to check the detailed video tutorial below:

PrestaShop 1.6.x. How to add custom Snazzymaps style to “TM Google Map” module

Prestashop Themes
This entry was posted in PrestaShop Tutorials and tagged google, map, module, Prestashop, Snazzymap. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket