olegnax google map extensions for magento 2, map styles

In the first update of our Free Google maps widget for Magento 2 we’ve added ability to change map style. You can either choose from predefined styles or create and import your own map style.

Live PreviewProduct Page

How to choose map style

You can now easily choose one of the predefined map styles in Olegnax > Google Map > Appearance : Map Style.

olegnax google map for magento choose map style

Below a few example of predefined map styles.

Map Style “Retro”

Map Style “Iceberg”

Map Style “Blue Water”

Map Style “Toxic”

You can check all of the map style in documentation. You can also copy JSON code for each map style there and use them to create your own map style. Check how you can do it below.

How to create google map custom style

You can easily customize your map and change the visual display of elements such as roads, parks, buildings, etc. using google official styling wizard: https://mapstyle.withgoogle.com/

create google map custom style

  1. Open https://mapstyle.withgoogle.com/
  2. Then choose one of the themes from options panel as a starting point and click More options
google map style wizard create custom style
  1. You will see full list elements and styles that you can adjust. You can literally change anything.
google map style wizard customize map
  1. Click Finish when you are done. Export Style popup will appear.
google map style wizard export style
  1. Click Copy JSON button. This is the code with map styles. Now you need to add to your website.

We showed how to use google styling wizard in this post, but keep in mind that there are also other services on the web which allows to customize google map and export your results in similar way.

How to add google map custom style to Magento 2

Now, when we have JSON with our custom map styles we can simply paste it to google map extension settings:

  1. Open Olegnax > Google Map > Appearance.
  2. Then choose Custom from Map Style select.
  3. After that a new field, called Google Map JSON will appear. Paste JSON code that you copied from styling wizard before to this field.
magento 2 import google map json

How to edit custom map styles

Decided to make some adjustments to your custom map style? No worries, you can simply copy JSON code from Olegnax > Google Map > Appearance : Google Map JSON and paste it back in google map styling wizard: https://mapstyle.withgoogle.com/

To do this click on 3 dots icon on top right of the controls panel

google map style wizard menu

and choose Import JSON drop down from menu.

google map style wizard json import menu

Now paste your JSON code and click Import JSON button.

google map style wizard json import

After that google map will change its appearance. Make desired adjustments, click Finish and copy new JSON code.

Now paste it back to Olegnax > Google Map > Appearance : Google Map JSON field.

 magento 2 import google map json

Save options and clear cache. That’s all, enjoy your custom map style.

olegnax google map extension for magento 2 custom style

You should now be able to change map style in our Free Google Map for Magento 2 extension and also create your own map style using google map style wizard, which you can then use anywhere, including our google map extension.

And yeah, Google Map for Magento 2 extension is of course fully compatible with powerful Athlete2 Magento theme.