Map Module

What You'll Learn

How to use the Map module

Setting up and API key for your module

Customizations available for the Map module

How to use the Map Module

The Map module is an excellent way to visually highlight a location. This could be your place of business or an event location. The module connects with Google maps & there is some setup with Google required before leveraging your module in Net-Results.

Set up your Map with Google

An API key is required in order to use the Maps Module. To obtain an API key, log into the Google Developers Console, which will guide you through the process, and activate the Google Maps JavaScript API and any related services automatically.

If you do not currently have a Google Account, you will be prompted to create one. Then, the first thing you will be asked to do is create a new project.

Name your project and select “None” for Application restrictions.

Click “Create” and Google APIs will create your key and present it to you. You will need to copy this key and send to support@net-results.com so the Customer Success Team can add it to your landing page settings. Once this API key is set up, your Map module will be able to pull a location onto your landing page.

How to add the Map Module

To add a Map Module to your landing page, click the grey (+) button in the landing page builder. Once the module has been added, you’ll be able to add content and customize your module.

Content

The content options of your Testimonial Module will consist of three categories :

Map

Here you can enter your API key and set your address for your map.

Background

Set a color or background image. This will not show in most cases but some settings can allow for a background.

Admin Label

This will change the label of the module in the builder for easy identification.

Design

The design options will allow you to change the navigation options and appearance of your map module.

Controls

Control whether the zoom level will be controlled by the mouse or not and whether or not the map will be draggable on mobile apps.

Map

Choose your greyscale and set filters for your map.

Sizing

This is the sizing for your entire slider module. If the size goes below 100% on the slider, options for aligning your module left, center or right will automatically appear.

Spacing

Add customized margins or padding here.

Border

Set the border radius, style, width and color of your slider module.

Box Shadow

Add a shadow behind your module.

Filters

Define your color saturation, the contrast of light and dark areas, add a sepia filter or blur your entire module. Lots of options for filters in this section. Blend Mode allows you to modify how your image blends with any other layers beneath it. Choose “normal” to return to the default option.

Animation

Pick an animation style to enable animations for your image module. Each animation will allow you to customize it further, controlling duration, direction, and intensity.

Advanced

Within the advanced tab, you will find options such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module’s many elements. You can also apply custom CSS classes and IDs to the module.

CSS ID and Classes

Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling or to create links to particular sections of your page. Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space.

Custom CSS

Custom CSS can also be applied to the module and any of the module’s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element.

CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.

Visibility

This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smartphones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.

Was this article helpful?

Related Articles