Google Map Element

07/08/2019

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.

Google Map Element Example
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.

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.

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 your Theme Options > Fusion Builder Elements > Google Map Element 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).

  • 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: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Google Map Element. 

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

Apart from the Element Options, there is a whole raft of options for Google Maps, located in the Theme Options, under Avada > Theme Options > Contact Form > 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

Google Maps Element Parameters

Copy to Clipboard
    • address – The address you’d like to display. To have multiple map markers, separate two addresses with a vertical line. For example, ( Address1 | Address2 ).
    • type – Choose from roadmap, terrain, hybrid, or satellite. Sets the type of Google Map to display.
    • width – Accepts a pixel value. For example, 35. Sets the map’s width.
    • height – Accepts a pixel value. For example, 35. Sets the map’s height.
    • zoom – Choose from 1-25. Sets the zoom level.
    • scrollwheel – Choose from yes, or no. Enable or disable scrolling.
    • scale – Choose from yes, or no. Show or hide map scale.
    • zoom_pancontrol – Choose from yes, or no. Show or hide the zoom controls.
    • animation – Choose from yes, or no. Enable or disable animation for address pins.
    • popup – Choose from yes, or no. Show or hide the map popup. Choose no to show popup on click.
    • map_style – Choose from default, theme, or custom. Sets the Google Map’s style.
    • overlay_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the map’s overlay color.

    • infobox_content – The custom content to replace address string. For multiple addresses, separate them with a vertical line ( Info1|Info2 ).
    • infobox – Choose from default, or custom. Sets the infobox’s style.
    • infobox_text_color – Accepts a hexcode ( #000000 ). Sets the infobox’s text color.
    • infobox_background_color – Accepts a hexcode ( #000000 ). Sets the infobox’s background color.
    • icon – The image URL for custom marker icons, or input theme for our custom marker. For multiple icons, separate them with a vertical line ( Icon1|Icon2 ).
    • hide_on_mobile – Can be one or all of these values: mobile-visibility, tablet-visibility, or desktop-visibility. Sets the element’s visibility.
    • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

    • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.