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.
How to choose map style
You can now easily choose one of the predefined map styles in Olegnax > Google Map > Appearance : 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
- Open https://mapstyle.withgoogle.com/
- Then choose one of the themes from options panel as a starting point and click More options
- You will see full list elements and styles that you can adjust. You can literally change anything.
- Click Finish when you are done. Export Style popup will appear.
- 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:
- Open Olegnax > Google Map > Appearance.
- Then choose Custom from Map Style select.
- After that a new field, called Google Map JSON will appear. Paste JSON code that you copied from styling wizard before to this field.
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
and choose Import JSON drop down from menu.
Now paste your JSON code and click Import JSON button.
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.
Save options and clear cache. That’s all, enjoy your custom map 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.
