The map module allows you to easily add custom Google maps to your pages. It’s also possible to add any amount of pins to the map, to identify multiple locations.
The Fullwidth map module lets you include a map that spans across the entire width of the page. You can also include a map module using the normal width, check this guide to learn how.
To start, add a fullwidth section to your page and choose the fullwidth map module.
Google Maps API
To use this module you are required to get an API key from Google. To get the key, you should go to Google Developers Console.
You should create a new project and then create your API key.
Once you obtained it, go to your menu and to your General Settings, and paste the key inside the Google Maps API Key box. Please enter a valid API key since the module will need it to work properly.
The contents tab includes the following options:
This module uses a Google Maps API key. Make sure you added it to the General settings of your Avoori menu.
On the Map Center Address add an address that will be geocoded and shown on the map. This will make the map centered in this address.
You can add multiple pins to your map.
Just click on add new pin and go to its settings. You can type a title and/or a content that will appear in a box when people hover over the pin. Then, assign the pin a map address.
If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.
Add a background color, gradient, image or video to your module.
You can modify the module’s label for easier identification.
Customize the design
With these settings, you can customize your design.
The mouse wheel zoom lets you enable the zoom level to be controlled by the mouse wheel. The draggable on mobile option lets you make the map draggable on the mobile view.
Customize the color tone of the map.
Adjust the width of the module.
Customize margins and padding sizes.
Define the border’s corner, style, color and width for your module.
Here you can enable box shadow.
Adjust the hue of the module as a whole.
Give an animation style to the module, like fading or sliding when it appears.
Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.