Map

In this article, we're going to explain how to use the map element.

  1. Available Controls
  2. The Map controls
  3. Frame Styles
  4. Map Markers
  5. Customize
  6. Demo
  7. Summary

The Map element is available across all three builders. The Content Builder, the Header Builder, and the Footer Builder. The purpose of the element is to output a map, and this map can be configured in multiple different ways allowing you to show a map of your location to the end user (or any location you want).

To add the Map Element, search for "Map" and drag "Map" to the canvas.

Map Marker Add

Available Controls

Like the other elements, controls are broken down into multiple parts, including:

  • Map
  • Frame
  • Customize

The main controls you need to pay attention to are the Map controls and the Frame controls.

The Map controls

While reasonably self-explanatory, it's important to note if you use the Google option rather than the Embed option you'll need to actually input a Google API key registered to your domain to allow the functionality to work. Click here to get a Google Map API key.

Otherwise, you'll see errors in your map displaying at all.

You'll notice as well if you choose the Google option that there's another option called Google Map Styles, this is a great piece of functionality that allows you to easily change the entire style of your map by copying and pasting the JSON map styles available directly from Google.

Frame Styles

The Frame Styles effectively allows you to modify how the frame around the Google Map itself looks; this enables you to set things like font size, height, and width, margins, paddings, and more.

Map Markers

The Map Element features map markers for any Google Maps setup! The map markers can be added via the sortable control located at the beginning of the Element:

Map Marker

If you inspect each marker, you can specify the latitude and longitude of each one as well as include optional content for that marker that will show up in a popup. Furthermore, custom map marker images can be implemented for a more custom look:

Map Marker Setup

When a custom map marker image is used, two "Image Offset" controls will appear, which allow you to move the marker around if needed. This is necessary for certain situations where the point of the marker is located in different positions. For example, utilizing the screenshot above, you can see that we've offset the marker on the Y axis by -50% of the marker image's height. This moves the marker into its proper position to ensure that the point at the bottom of the image is in the correct location on the map:

Map Example 1

In other situations you may not need to move the marker at all and can simply leave the X and Y axis at 0% as seen below:

Map Example 2

For the following image we've translated its position 50% on the X-axis and -50% on the Y-axis due to where the point on the graphic falls:

Map Example 3

And sometimes you may need to use different numbers, such as this graphic that required a 50% translation on the X-axis and a 40% translation on the Y-axis due to its uneven shape:

Map Example 4

The most important thing to keep in mind when translating custom map markers is that the movement of the graphic is always relative to its own dimensions. So for a 100px square image, moving it 50% on the X-axis and -100% on the Y axis means you're moving it 50px to the right and 100px up. If you ever find yourself in doubt, you can simply move the sliders to find the appropriate positioning for any custom graphics you might be using as their location will be updated in real time in the builders.

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

Map Customize
  • ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
  • Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
  • Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
  • Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
  • Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.
Custom Attributes

Demo

To see a live demo of the Map Element click here.

Summary

You're now a pro in using the Map element.

See something inaccurate? Let us know