Google Map Element

Last Update: April 17, 2024

The Google Map Element is just one part of the integration Avada offers for Google Maps. This Element can be used on any page, post, or widget area. We include intuitive options that allow you to use the default google map styles, or customize the options to fit your branding style. Avada also lets you select multiple map locations on a single map, each with its own content. Select 4 map types, display a color overlay, upload a custom map marker, customize the map popup box along with many other unique options. Read on for an overview of this useful Element.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Google Map Element

The Google Map Element allows you to add customized maps anywhere on your site.

To start with the Google Map Element, you need to choose the Google API Type. You can choose from three API types, including JS API, Embed API, and Static API. Google have recently made big changes in the way Google Maps work, so it’s a good idea to start with the Google Maps User Guide to read up on that, and don’t forget to check out the Element Demo page to see the options available.

Once you have chosen your API type, you enter your address (or addresses). You can also use longitude and latitude coordinates. Then you select your map type, though the choices offered here will depend on the API type you have chosen. Next are a selection of styling options, including map dimensions and zoom level, and a few user interface options.

Read below for a detailed description of all element options.

Element Options

Note: The Default settings will use the global settings assigned for this element in the Options > Avada Builder Elements > Google Map section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

HeadingDescription
Google API TypeSelect the Google API type that should be used to load your map. The JavaScript API allows for more options and custom styling, but could be charged for by Google depending on the amount of map loads. The embed and the static API can be used for free regardless of map loads. For more information please see the Google Maps Users Guide.
AddressAdd the address of the location you wish to display. Address example: 775 New York Ave, Brooklyn, Kings, New York 11203. If the location is off, please try to use long/lat coordinates. ex: 12.381068,-1.492711.
Map TypeSelect the type of google map to display.
AddressAdd the address of the location you wish to display. Single address example: 775 New York Ave, Brooklyn, Kings, New York 11203. If the location is off, please try to use long/lat coordinates with latlng=. ex: latlng=12.381068,-1.492711. For multiple addresses, separate addresses by using the | symbol. ex: Address 1|Address 2|Address 3.
Map TypeSelect the type of google map to display.
Map DimensionsMap dimensions in percentage, pixels or ems. NOTE: Height does not accept percentage value. In case static API is selected width and height are limited to 640px (except for the premium Google Maps API plan) and must be specified in px only.
Zoom LevelChoose the zoom level for the map. 0 corresponds to a map of the earth fully zoomed out, and larger zoom levels zoom in at a higher resolution.
Scrollwheel on MapEnable zooming using the mouse scroll wheel. Use Cmd/Ctrl key + scroll to zoom. If set to no, zooming through two-finger movements (cooperative gesture handling) will be enabled.
Show Scale Control on MapDisplay the map scale.
Show Pan Control on MapDisplay pan control button.
Address Pin AnimationAnimate the address pin when the map first loads.
Show Tooltip by DefaultDisplay or hide tooltip by default when the map first loads.
Select the Map Styling SwitchChoose default styling for classic google map styles. Choose theme styling for our custom style. Choose custom styling to make your own with the advanced options below.
Map Overlay ColorCustom styling setting only. Pick any overlaying color for the map besides pure black or white. Works best with "roadmap" type.
Map ColorCustom styling setting only. Pick any color for the map besides pure black or white.
Infobox ContentCustom styling setting only. Type in custom info box content to replace address string. For multiple addresses, separate info box contents by using the | symbol. ex: InfoBox 1|InfoBox 2|InfoBox 3.
Infobox StylingCustom styling setting only. Choose between default or custom info box.
Info Box Text ColorCustom styling setting only. Pick a color for the info box text.
Info Box Background ColorCustom styling setting only. Pick a color for the info box background.
Custom Marker IconCustom styling setting only. Use full image urls for custom marker icons or input "theme" for our custom marker. For multiple addresses, separate icons by using the | symbol or use one for all. ex: Icon 1|Icon 2|Icon 3.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Useful Links & Resources

In this article