Page Designer Modules

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

Full Width 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 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.

Define contents

The contents tab includes the following options:

Map

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.

Link

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.

Background

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.

Controls

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.

Map

Customize the color tone of the map.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color and width for your module.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

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?