Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V25 released on August 18th 2022 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-img_mm_faq
FAQs

Have questions?
We have answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Other questions?
CONTACT US / LIVE CHAT

LIVE Chat 7CT AM – 7CT PM – Get in touch here

POWER Sec Map Module

How to configure the Sec Map module for POWER Pro theme in HubSpot

icon-module-sec-map

SEC MAP

Showcase your locations with an interactive map.

power-sec-map-example

Page Speed Impact

LOW

The module has very little impact on page speed itself, the impact will come from the map source and corresponding code that comes along with using it.

MEDIUM

Both Google Maps and Snazzy Maps will add code to the module that has to be loaded and will impact page speed.

TIPS

While you can use Google Map's API directly, we recommend using Snazzy Maps to set up and design your map.

Make sure the embed size of the map matches the size of the map on your page to avoid loading unnecessary resources.

FAQ

My map won't display, how do I fix it?

answer here.

How do I get the embed code for Snazzy Maps?

To be able to generate your specific embed code, follow these steps:

1. Visit the snazzy maps website

2. Create an account on snazzy maps.

3. Click on “Build a map” in the main navigation and follow the steps there.

4. Once you are done click on “View Code”

5. You will be asked to enter a map name and a google maps API key. Follow the instructions here: https://developers.google.com/maps/documentation/javascript/get-api-key to create your own API key. This is always needed to embed a Google Map on your own website. If your API is not valid Google will block the rendering on your website.

6. Once you finish entering the needed information, you can copy the embed code and paste it into the module settings.

Module Options

Map Embed Code

Add the embed code for your map here.

We highly recommend registering and creating a map with Snazzy Maps, where you can easily customize the style of your map. See FAQ for step-by-step instructions to create your Snazzy Map embed code.

Alternatively, you can also copy the embed code from Google Maps or construct your own with Google Maps Embed Guide, where you will need to create an API key.

Intro to Title

The smaller text above the title; can be left blank to hide on the page.

Title

The main heading for the section; can be left blank to hide on the page.

Title - Header Type

Choice of H1, H2, H3, or H4. This is how Google will determine the heading type. This does not control the formatting of the font, there is a separate setting under Style > Title Size to determine how the heading will display.

Description

You can add any amount of body text here or it can be left blank to hide on the page.

Contact Info

Checkbox to include optional contact info following the description and using contact icons.

Contact Info > Address

Option to add your address here, automatically adds a map pin icon. Leaving blank will omit from the Contact Info.

Contact Info > Email

Option to add your email here, automatically adds an email icon. Leaving blank will omit from the Contact Info.

Contact Info > Phone

Option to add your phone here, automatically adds a phone icon. Leaving blank will omit from the Contact Info.

Contact Info > Phone Link

The number that should be dialed if tapped on mobile (ex:+498912312356).

Button Type

There are two layout options available: CTA or Button. 

Button Type > CTA

When CTA is chosen, the option to Choose CTA is available which opens the HubSpot CTA sidebar where you can choose an existing CTA or create a new CTA.

Button Type > Button

When Button is chosen, additional settings are available to configure the button.

Button Type > Button > Button Title

Button Title is the text that will appear on the button

Button Type > Button > Button Link

The Button Link dropdown allows you to choose the type of link to include for the button: External, Content, File, Email Address, or Blog

Based on your selection, you can either add the URL or email address or choose the page, file, or blog post.

Button Type > Button > Open in New Window

There is a toggle to allow you to open the link in a new window. The default is set to open in the same window/tab.

Tip: If your link is leaving your website, it is recommended to open it in a new window.

Button Type > Button > Link Type

There is a check box for "No Follow" which allows you to indicate that the link is not associated with your website. This setting has SEO implications if used incorrectly.

Use Form

Checkbox to include optional form.

Form

sec-form-choose-form-send-email

Form  > Choose a Form

You can choose a form that you've already set up or create a new form.

Form Content > Form Fields

Edit the form fields or open the form using the Form Editor.

Form Content > Button Text

Text to display for the form button (required).

Form Content > GDPR Options

Dropdown with GDPR options to include in your form.

Form Content > CAPTCHA

Toggle to activate CAPTCHA for SPAM prevention.

Thank You > What will a visitor see when submitting your form?

Decide what happens on form submission. Choice of redirecting to another page or displaying an inline thank you message.

This setting applies only to this page, not all locations the form is used.

Form  Automation > Always create new contact for email address

Toggle to determine whether a new contact will be created.

Form  Automation > Simple workflows

Shows whether the form is included in any simple workflows.

Form  Automation > Workflows

Option to add form to a Workflow or manage workflows.

Form  > Send a follow-up email

You can choose an email that you've already set up or create a new email.

Layout > Choose Layout

There are five layout options available: Map Left, Map Right, Map Only, Content-Box Left, and Content-Box Right.

Layout > Full Width

Check this box if you want the map to display full width.

Layout > Intro Width

This allows you to control the width of the text, with two choices: Narrow or Default.

The module is set to "Narrow" when you add it to the page (this was the original layout prior to adding this choice as a setting). Narrow limits the width of the section text (intro to title, title, and description) within the section.

"Default" allows the text to fill the width of the module; the width is dependent on whether the section is set to "content width" or "full width" in the section settings.

layout-intro-width-settings

Layout > Section Height (px)

Set the height of the module in pixel. Optional for desktop screens, otherwise scaled based on content.

Style > Color Scheme

Choice of Light or Dark.

Tip: If you change the background color for the module, the definition of Light Color scheme is a light background with dark text and Dark Color scheme is a dark background with light text. Based on your background color, you would need to toggle the color scheme to ensure the text color displays properly and is legible.

Style > Intro Title Style - Text

The Default uses the text style from the Theme Settings based on the color scheme selected.

You can override the Theme Settings by choosing Color or Gradient and completing the corresponding color settings.

Style > Intro Title Style - Background

The Default is transparent, where the text is displayed directly on the background for the module.

You can apply a background Color or Gradient to the text to give the appearance of a highlight behind the text. The background has a subtle border-radius to soften the corners of the background color.

Style >  Title Style

The Default uses the text style from the Theme Settings based on the color scheme selected.

You can override the Theme Settings by choosing Color or Gradient and completing the corresponding color settings.

Style >  Title Size

The Default is set to match what you chose for Title Header-Type, what Google sees from an SEO perspective. This setting gives you the option to change the Title Size to H1, H2, H3, H4, H5, or H6 so that the text will be styled based on your Theme Settings for the corresponding header tag chosen here.

Style > CTA Style

Option to choose any of the button styles configured in your theme settings including:

  • Solid Primary
  • Solid Regular
  • Solid Regular for Primary Background
  • Border Primary
  • Border Regular
  • Link
  • Link Back
  • Custom 01
  • Custom 02
  • Custom 03
  • Custom 04

Style > CTA Size

Ability to override the default size of the CTA with choices for Regular, Long, Full Width, Small, and Large.

Style > Form Button Style

Option to choose any of the button styles configured in your theme settings (same options as CTA Style listed above).

Style > Background

Choice of Background Color, Background Image/Video, Background Gradient, or Transparent. Refer to Settings that apply to all Section Modules for more details about these choices.

Style > Shape Divider

Optional Shape Divider(s) can be added to the top or bottom of this module. Refer to Settings for configuring Shape Dividers for more details about these choices.

Animation

Checkbox to turn on/off Animate on Scroll. Turning off here will only apply to this section, to turn animation off globally refer to Theme Options for Animations.

Animation > Section

Ability to change the Animation Type and Delay for the Section. 

Animation > Intro to Title

Ability to change the Animation Type and Delay for the Intro to Title.

Animation > Title

Ability to change the Animation Type and Delay for the Title.

Animation > Description

Ability to change the Animation Type and Delay for the Description.

Animation > Contact Information Box

Ability to change the Animation Type and Delay for the Contact Information.

Animation > Button/CTA

Ability to change the Animation Type and Delay for the Button/CTA.

Animation > Form

Ability to change the Animation Type and Delay for the Form.

Tip: When modifying animation settings for an individual section, we recommend opening the preview link in a separate tab so you can easily preview the changes as you make them by refreshing the page.

Anchor Link ID

Easily add an anchor link to this section, for full instructions refer to Setting up Anchor Links.

Configurations

SEC MAP Left

map-left

Layout > Choose Layout

Map Left

SEC MAP Right

map-right

Layout > Choose Layout

Map Left

SEC MAP Only

map-only

Layout > Choose Layout

Map Only

SEC MAP Content Box Left

map-content-box-left

Layout > Choose Layout

Content-Box Left

 

Examples

DESIGN SOMETHING COOL WITH THIS POWER MODULE?

Share it with us!

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.