The Google Map block in Frontis Blocks lets you add a map to your website. You can enter your address to show your location. It’s a quick way to help visitors find you.

Adding Frontis Google Map Block 

To insert the Google Map block, navigate to the post or page where you wish to include it. Next, tap the (+) plus icon located at the upper left corner of the display.

The Frontis menu bar interface will appear. Search for the Google Map block in the search box or select it from the menu bar.

After inserting the Google Map  blocks, follow the steps below;

• Click on the Document Overview button, and you will be able to view the block list on the right side.
• Click on the block; all the control tabs will show here (Basic, Style, and Extra).

Basic Section

Address Section: The Address section is used to add a place name or location. The map shows that place on the screen.

Width Section: The Width section sets how wide the map looks. You can make it small or full-width to fit your page.

Height Section: The Height section adjusts how tall the map looks on your page. 

Zoom Level: The Zoom Level section controls how close or far the map looks. A higher number zooms in, and a lower number zooms out. It helps show more detail or a wider area.

My Type: The My Type section gives you some styles, like (Roadmap, Satellite, Hybrid, Terrain), for the map. You can choose any one of them.

Style Section

• Pading: Padding allows you to add spaces around an object to increase the inner area. You can also add space on a single side with this feature. Click on the Link icon and add or reduce the padding on any side you want.

• Margin: Margin controls the space outside the element, helping to adjust its position on the canvas. You can add a margin to all sides or just one. Use the Link icon to manage each side separately.
• Background Color: This function allows you to change the background color of your Google map. You can use classic or gradient colors, according to your work’s needs.
• Border: The border section lets you add a border and customize its style, color, stroke, and radius of the Google Map. Here, you can also add a box shadow to it.

Extra Section

Z-Index: Consider the z-index as layers of sheets on a table. The greater the z-index, the more “above” the element appears. Therefore, if two elements intersect, the one with the greater z-index will be displayed in front.

However, it functions only when the element is positioned (relative, absolute, fixed, or sticky). Without it, z-index has no effect. 

Custom CSS: If you are an expert or have coding knowledge, you can add custom CSS in this section to make it responsive.