Google Map Options

You can customize Google Map in Avada > Options > Contact Form using various options. There are three sub-panels in the Contact Form tab: Contact Form, Google Map, and Google Map Styling. Please continue reading below to know more about each option from the Google Map and Google Map Styling tabs.

Google Maps API Key – Allows you to insert the Google Maps API Key that is required for the Google Maps to show up. Follow the steps in the Google docs to get the API key. This key applies to both the contact page map and Avada Builder google map element.

Google API Type – Controls the Google API type that should be used to load your map. Choose between JS API, Embed API, or Static API. The JavaScript API allows for more options and custom styling, but could be charged for by Google depending on map loads, while the Embed and Static API can be used for free regardless of map loads but do not offer the vast majority of Avada’s custom styling options. For more information please see the Google Maps Users Guide.

Address – This field will display when using the Embed API. Add the address of the location you wish to display. Leave empty, if you don’t want to display a map on the contact page.

Map Type – This field will display when using the Embed API. Allows you to set the type of Google map that displays. Choose from Roadmap, or Satellite.

Google Map Address – Allows you to set the address to the location you wish to display. This is for the JS API Type. For single address, ex: 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.

Google Map Type – Allows you to set the type of google map that displays. Choose from Roadmap, Satellite, Hybrid, or Terrain.

Google Map Dimensions – Allows you to set the width and height of the google map. Note: Height does not accept percentage value. Enter values including any valid CSS unit, ex: 100%, 415px.

Google Map Top Margin – Allows you to set the distance to menu/page title. This is only applied to google maps that are not 100% width.

Map Zoom Level – Allows you to set the zoom level of the google map. Higher number is more zoomed in.

Address Pin – Allows you to display the google map address pin.

Address Pin Animation – Allows you to enable or disable address pin animation.

Map Popup On Click – Allows you to display the popup graphic with address info for the pin on the map on click.

Map Zoom With Scrollwheel – Allows you to use the mouse scrollwheel to zoom the google map.

Map Scale – Allows you to display the google map scale.

Map Zoom & Pan Control Icons – Allows you to display the google map zoom control icon and pan control icon.

Select the Map Styling – Allows you to set the google map styles. Choose from Default Styling, Theme Styling, or Custom Styling. Default is google style, Theme is our style, or choose Custom to select your own style options.

Map Overlay Color – Allows you to set any overlaying color for the map besides pure black or white. Works best with “roadmap” type. Note: This option is only available for Custom Styling setting.

Info Box Styling – Allows you to set the styling of the info box. Choose from Default Infobox or Custom Infobox. Note: This option is only available for Custom Styling setting.

Info Box Content – Allows you to insert custom info box content to replace the default address string. For multiple addresses, separate info box contents by using the | symbol, ex: InfoBox 1|InfoBox 2|InfoBox 3. Note: This option is only available for Custom Styling setting.

Info Box Background Color – Allows you to set the info box background color. Note: This option is only available for Custom Infobox setting.

Info Box Text Color – Allows you to set the info box text color. Note: This option is only available for Custom Infobox setting.

Custom Marker Icon – Allows you to insert 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: This option is only available for Custom Infobox setting.