This article was last updated on the May 18, 2018.
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, 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).
Presets
First of all you'll see the Apply Preset option, but just what is a preset? A preset is a pre-configured option pack of sorts. When you apply the preset all the controls are automatically changed to the specified value in the presets. Right now the presets represent each different stack. Providing quick starting points for getting your elements styled perfectly to match your stack. Apply a preset and then tinker to your hearts content.
Controls
All elements come with a range of different controls and the Content Area element is no different. While many of the controls are self explanatory in what they effect, we'll cover the basics and any major points you need to be aware about in each article. Every article will also cover the basics such as Flexbox, Interactions and more!
Flexbox
Just what is Flexbox and what makes it so flexible? Flexbox is a layout mode intended to accomodate multiple elements on a page in different configuration layouts for a variety of screen sizes. It's generally easy to work with once you get to grips with it and provides an array of configuration elements for start positions, end position and everything in between.
While Flexbox may seem daunting at first. Don't worry! There are a range of multiple tutorials online and in all our builders we have multiple configuration options that means you never have to touch a line of code! So you properly understand Flex options, we'd recommend having a ready up over here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ on how exactly Flexbox works. While you don't need to worry about the code side. It's important to have a basic grasp of how Flexbox works to make the most of the builders. Or of course there's always the trial and error approach.
Interactions
Throughout the elements you'll see options for interactions, but just what are interactions? Interactions generally means when an element is being interacted with. Such as on hover. For example on a Background Color option you'll have the Base option which is the main background color of the element. Then you'll have the Interaction option, setting this to a different color from base will display a different color on hover.
You'll also see interactions for icons where you can swap out icons on hover. Allowing you to configure different options for on hover. Making for some great effects with swapping out icons on hover.
Margins and paddings. EMs, REMs, Pixels and more!
With all the margins, paddings and other height and width based options, along with some sizing options. You'll see the option to change the actual unit value. This means you might set one control to be 2.5 EMs such as the width. But then on your margin you might set it to be 50px. The available unit options are:
Linking Sides
One thing you'll see in common across multiple controls is the ability to link sides. This means that if you link sides on the padding controls, all the padding controls will be the same value. However if you unlink the padding controls, you can then control each side independently allowing for greater control.
If you have link sides on for the respective set of controls you will not see the individual options.
Particles
Many of the elements use what's known as the "Particles Partials". But just what are Particles and how can use them? Check out our great mini video series over on this KB article.
Available Controls
Like the other elements, controls are broken down into multiple parts including:
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. 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 allows you to set things like font size, height and width, margins, paddings and more.
Map Markers
As of Pro v2.1.0 and Cornerstone v3.1.0 our v2 Map Element now 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:
Inspecting each marker will reveal familiar controls from our Classic Google Maps Element. You can specify the latitude and longitude of each map marker 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:
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:
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:
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:
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 it's uneven shape:
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.
