With the Map component, you can add an interactive Google map to your website. To get started, drag the Map component to a page of your website. Next, click on the component to open the options panel to the side of the editor.
Location
The location field is the only required option for the component. You can enter a street address, city name, or even zip code. Once you update this, the page will refresh with an updated map.
Size & Position
The Width option controls how much the map fills the width of the component. By default this is set to full, but you can choose a smaller proportion. The Height option provides several choices for the height of the component, from small to extra large. Both of these options can be set separately for different screen sizes by clicking their respective desktop/mobile icons.
When you choose something other than full for the Width option, the Align option controls where the map is aligned within the component - left, right, or center.
Design
We provide a couple different options to control the design of the component:
- Shape - By default, the map inherits the shape setting for your site. You can override this by choosing a different shape setting here. This can be set separately for different screen sizes by clicking the desktop/mobile icon.
- Border - Use this option if you’d like to add a border around your map. You can control the width, color, and style of the border.
Spacing
You can control spacing around the map using the Margin option. With the Padding option, you can control the space between the border and the map itself. Both of these options can be set for different screen sizes as well with their respective desktop/mobile icons.
Hover
You can control how the border looks when a visitor mouses over the map. To do that, click on Hover at the top of the options panel. You can customize the width, color, and style.