Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Map Module with the Website Page Designer

Map Module with the Website Page Designer

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 Map module lets you include a map on the page. You can also include a map module using the full-width module, check this guide to learn how.

To start, add a row to your page and choose the 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.

Define contents

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 website admin 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.

Admin label

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.

Box Shadow

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.

Advanced settings

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.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?