Google Maps Add-on
The Google Maps Add-on will allow you to mark your listings on Google Maps and show them on the map embedded on your website.
In this help article, we will show you how you can use Google Maps add-on on your website.
Please note that in order to use this add-on, you need to have a project with a billing account in Google Cloud console and enable the Maps JavaScript API.
If you don’t have a project or Google Cloud account yet, you can sign up here using your Google account, then create a new project. Please refer to these instructions for more guidance.
In your website editor, go to the Add-ons Tab -> Maps and click on Google Maps add-on card.
Then switch on the Enable toggle.
Log in to your Google Cloud console and select the necessary project.
In your Dashboard menu, open Google Maps Platform -> Credentials.
There you can click on Show key and copy it.
If you don’t have the API key for your project yet, please follow the steps from this guide to create one.
After that, paste your API key to the corresponding field in the add-on settings:
And save the changes.
Now you can enable Map View in the Content tab and proceed with your map setup.
The add-on allows you to select one of the following map styles:
And give your website a more customized look:
And you can also use Google Styles Wizard to create your custom map style:
Open Styles Wizard and click on Use the legacy JSON styling wizard.
Create your own custom style and once it’s ready, click Finish.
Copy JSON.
And paste it to the Custom Style JSON field in the add-on settings:
Save the changes and you're all set.
In this help article, we will show you how you can use Google Maps add-on on your website.
Before you start
Please note that in order to use this add-on, you need to have a project with a billing account in Google Cloud console and enable the Maps JavaScript API.
If you don’t have a project or Google Cloud account yet, you can sign up here using your Google account, then create a new project. Please refer to these instructions for more guidance.
Enable Google Maps add-on
In your website editor, go to the Add-ons Tab -> Maps and click on Google Maps add-on card.
Then switch on the Enable toggle.
Get Google Maps API
Log in to your Google Cloud console and select the necessary project.
In your Dashboard menu, open Google Maps Platform -> Credentials.
There you can click on Show key and copy it.
If you don’t have the API key for your project yet, please follow the steps from this guide to create one.
After that, paste your API key to the corresponding field in the add-on settings:
And save the changes.
Now you can enable Map View in the Content tab and proceed with your map setup.
Customize your Google map design
The add-on allows you to select one of the following map styles:
And give your website a more customized look:
And you can also use Google Styles Wizard to create your custom map style:
Open Styles Wizard and click on Use the legacy JSON styling wizard.
Create your own custom style and once it’s ready, click Finish.
Copy JSON.
And paste it to the Custom Style JSON field in the add-on settings:
Save the changes and you're all set.
Updated on: 06/03/2023
Thank you!