Google Map Element

Google Map element is very simple and useful element to embed Google map in your website. Using this element will let your users know the location of your office. You can even use it for showing other locations if you want. Like- if you have a site of multiple restaurants or hotels then this element will be a handy.

To add this element in a section or column, follow these steps. Select Add New Element from column to open elements list modal From there select Google Map element

A popup will appear showing two tabs - General & Advanced. These tabs will help you to bring the changes in the map. You can add address, set the view option, set the height of the map etc. The details are given below.

General Tab

The general tab holds the basic setting of Google map. You’ll find the following editing options here.

• Address - The address field will help you add the address of the desired location you want to display. Insert the address in the input field and google map will instantly show the location.
• Views - From view option, you can decide how you want to show the location in google map. There are 4 options available. These views are -
  1. Map - the map view will show you the views of lands, roads, building etc.
  2. Hybrid - you'll find a “hybrid” view that overlays map data (street names for example) on top of satellite view.
  3. Satellite - satellite view will provide the view look from satellite. You’ll see the roofs of every building and every road name.
  4. Terrain - Terrain view shows the 3D elevation of natural geographic features, such as mountains and canyons.
• Zoom - Zoom slide option will allow you to set the map in any percentage of zoom. You show your viewer which county or state or town your office is. This will get them an idea in case if they ever want to visit your office.
• Height - You can set the height of the map. You can set at any pixel you want. You can set in a little square area or just a big one.

Advanced Tab

The advanced tab has the advanced level of settings. You can edit then if you find it necessary or just leave it they way it is. Here you’ll find six fields : Element styles, Background, Border & Box Shadow, Animation, Custom CSS, and Identifier. These fields are described below in details.

• Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
• Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple color.
• Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
• Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
• Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
• Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.