Want to make it easy for visitors to find your business? The Map Element lets you add an interactive map to your site so visitors can see exactly where you are. You can choose from several display options to make sure it fits your design.

General Settings

Element Name/Title

In the General Settings, you can see the default name/title of the Edit option you're currently working on. You can leave it as is or rename it to something more suitable. This is handy when you have multiple elements on a page and want to tell them apart easily.

Text Align

The Text Align feature lets you adjust the position of your text. You can move it to the Left, Center, or Right, or apply justification formatting to improve readability.

Map Option

  • Open Search Box: When you click on "Open Search Box," it opens the Map page and lets you:
  • Input your business location and pin the exact point with the marker.
  • View your search using Map or Satellite.
  • Zoom in and out, and make it full screen.

Map Type

In the Map Type feature, you can choose the type of map you prefer for viewing your location. You can select from four options: road map, terrain, satellite, or hybrid.

Marker Color

You can modify the colour of the Marker by selecting from the available colours or entering a specific colour code in the dedicated field. Customising the Marker colour can help make your business location easier to spot on the map.

Zoom

The Zoom feature lets you zoom in on the specific location where your marker is placed. Move the bar to the right to increase the zoom level. You can also change the measuring scale of the map using units like px (pixels), % (percentage), em, rem, vh (viewport height), or vw (viewport width) to customise the map's dimensions and make sure it fits your design.

Horizontal Width and Vertical Height (max 640)

The Horizontal Width and Vertical Height feature lets you customise the map's height and width to your preferred size. You can enter the desired dimensions, but the maximum value for both height and width is 640.

Retina (2x)

Toggling on the Retina feature is a quick way to enlarge the map. When enabled, it doubles the original dimensions. For example, if the original height and width are 300 and 200 respectively, enabling Retina will increase the dimensions to 600 and 400.

New Tab

You can enable the New Tab feature to let visitors open Google Maps in a new tab when they click on any part of the map. If this option is disabled, Google Maps will only load on the current page.

Advanced Settings

The Advanced Settings feature offers further options to adjust the design of your web page.

Visibility

The Visibility option lets you choose which device (mobile, desktop, or both) you want the element to be visible on. Click on the appropriate icon to highlight your choice.

Custom Class

The Custom Class option lets you assign a custom class name to your element, making it easier to apply custom styles to that particular element. Enter your chosen class name in the dedicated field.

CSS Selector

If you need to replicate your custom CSS, you can copy it by clicking the "copy" icon on the right side of the reference code.

With the Map Element, you're not just showing your location; you're making it easy for visitors to find you. From customisable markers to responsive sizing, the feature works well across any device.