Google Map Element

24/07/2022

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.

IMPORTANT NOTE: Google Maps introduced pricing plans for their Google Map Service in June 2018. Read this Setting Up Google Maps article to help you get started.

View Element Demo Page!

How To Use The Google Map Element

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

Step 1 – Create a new page or edit an existing one.

Step 2 – Add a container then select your desired column layout.

Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘Google Map’ element and click it to bring up its options window.

Step 4 – 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.

Step 5 – 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.

Step 6 – Once you have completed customizing your map, click Save. You will be returned to the edit page. You can preview the page to view the map, and you can always edit the element again to make changes.

Read below for a detailed description of all element options.

868,152 Businesses Trust Avada

Get Avada

868,152 Businesses Trust Avada

Get Avada

868,152 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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.

Google API Type – Select 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 number 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.
Address – Add 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. This option will only show if you choose the Embed API.
Map Type – Select the type of google map to display. Choose from Road, or Satellite. This option will only show if you choose the Embed API.
Address – This option will only show if you choose the JS API. Add 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 Type – This option will only show if you choose the JS API. Select the type of google map to display. Choose from Roadmap, Satellite, Hybrid, or Terrain.
Map Dimensions – Map dimensions in percentage, pixels or ems. NOTE: Height does not accept percentage value.
Zoom Level – A higher number will be more zoomed in on the map. Choose from 1-25.
Scrollwheel on Map – Enable zooming using the mouse scroll wheel. Use Cmd/Ctrl key + scroll to zoom. If set to NO, cooperative gesture handling will be enabled.
Show Scale Control on Map – Displays the map’s scale.
Show Pan Control on Map – Displays the Pan Control button.
Address Pin Animation – Choose to animate the address pin when the map first loads.
Show Tooltip by Default – Display or hide the tooltip by default when the map first loads.
Select the Map Styling Switch – Choose 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 Color – Custom styling setting only. Pick any overlaying color for the map besides pure black or white. Works best with “roadmap” type.
Map Color – Custom styling setting only. Pick any color for the map besides pure black or white.
Infobox Content – Custom styling setting only. Type in custom infobox content to replace address string. For multiple addresses, separate infobox contents by using the | symbol. ex: InfoBox 1|InfoBox 2|InfoBox 3.
Infobox Styling – Custom styling setting only. Choose between default or custom infobox.
Infobox Text Color – Custom styling setting only. Pick a color for the infobox text.
Info Box Background Color – Custom styling setting only. Pick a color for the infobox background.
Custom Marker Icon – Custom 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.
Custom Marker Icon – Custom 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. NOTE: Icon images may be in PNG, JPEG or GIF formats and may be up to 4096 pixels maximum size (64×64 for square images).
Margin – In pixels or percentage, ex: 10px or 10%.
Element Visibility – Allows you to select the screen sizes to show or hide the element in. You can choose one or more settings. Choose from Small Screen, Medium Screen, or Large Screen.
CSS Class – Allows you to add a class to the wrapping HTML.
CSS ID – Allows you to add an ID to the wrapping HTML.

View The Options Screen

Global Options

Location: As well as the Element Options, there is a single global option that can be set for the Google Map Element in the Global Options (Avada > Options > Avada Builder Elements > Google Map.

Apart from the Element Options, there is a whole raft of options for Google Maps, located in the Theme Options, under Avada > Options > Contact Template > Google Map & > Google Map Styling. See the article in the Links section below for more information.

Google API Type – Select 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 number 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.

View The Options Screen