Google Map Element

Fully Integrated & Flexible

Avada Integrated Google Maps

Avada has integration for Google Maps. We have a dedicated contact page template with map integration that allows you to set many different map options via our theme options panel. In addition, we have a Google Map Element that can be used on any page or post, or widget section. 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.

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

4 Map Types To Choose From

We offer up 4 completely different map types and appearances for you to select based on your requirements and design. These are Roadmap, Satellite, Hybrid and Terrain.

Roadmap

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

Satellite

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

Hybrid

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

Terrain

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

Customize Your Maps Appearance

Using our customization options you can completely change the appearance of your included google map. Choose from default styling, to styling that matches your themes colour scheme, or completely customize pointers and colours to further brand your Google Map.

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

Default Google Styling

The default map style gives you the exact styling that comes from Google Maps. This includes all the map coloring, the info box styles, and map marker. This is classic Google Maps styling!

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

Theme Styling

Avada map styling is unique. When using this styling, the map color overlay, map marker, and info box will be automatically set with our unique settings!

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

Custom Styling

Custom map styling allows you to add images or icons as a custom map marker, overlay colors, infobox backgrounds, and text color which is perfect for branding!

Powerful Map Controls

Edit and customize your map controls ranging from the zoom level of your map to the address pin being animated.

Zoom Level

Scrollwheel On Map

Scroll Scale Control On Map

Show Pan Control On Map

Address Pin Animation

Show Tooltip By Default

Google Maps API Option

We’ve added a brand new API option that gives you the ability to load in and have as many Google Map impressions as you like for absolutely free.

Mobile Visibility Settings

Our mobile visibility system gives you full control over what displays based on 3 customizable screen sizes. Every Fusion Builder Element has these settings and they allow you to show or hide elements on various screen sizes. In addition, you can choose what those screen sizes are! This gives you maximum control to set the exact point when an element should show or hide. Resize the page to see the elements appear or disappear based on what we set.

Only Display on Desktop

Mobile Visibility Setting

Only Display on Tablet

Mobile Visibility Setting

Only Display on Mobile

Mobile Visibility Setting

Display Everywhere

Mobile Visibility Setting

Advanced Options Network

Theme Options are global, Page Options are individual. This setup gives you amazing creative flexibility that becomes indespensible when you start creating your site. Having the option to freely choose how individual pages are styled is an incredible freedom.

#1 Selling Theme Of All Time

525,000+

Individuals & Businesses Trust Avada

BUY AVADA NOW!

Documentation & Videos

We have a wide range of support material to suit your learning style. Our documentation is extensive and growing. There are almost 500 documents, where you can search and read about almost any aspect of Avada. Prefer to watch? We have a growing library of HD video tutorials covering the basics and much, much more. Like to engage? Submit a support ticket, join our Community Forum, or engage with other users on the community run Facebook Avada Users Group.

Documentation

Start Searching

Video Tutorials

Start Watching

Need Support?

Start Engaging

Customize Elements Globally Or Individually

Elements can be controlled globally inside of the Fusion Theme Options, or individually per Element by changing the options for each once added to a page or post. Individual Element options will always override the global theme options. This flexibility gives you the ultimate freedom to style Elements and content that is unique and will stand out from the rest of the site.

Element Options

  • Google API Type  – Select the API Type for your Google Map. Default, JS API, Embed API*, Static API.
  • Google API Type Embed – Reduces Map Type to Roadmap and Satellite only, due to API Type.
  • Address – Type in Addresses for the Google Map.
  • Map Type – Choose the map type: Roadmap, Satellite, Hybrid, Terrain.
  • Map Dimensions – Set the Width and Height of the map.
  • Zoom Level – Set the Zoom level for your Google Map.
  • Scrollwheel on Map – Choose if the Map has a scrollwheel.
  • Show Scale Control on Map – Choose if the Map has scale control.
  • Show Pan Control on Map – Choose if the Map has pan control.
  • Address Pin Animation – Choose if the Address Pin has animation.
  • Show Tooltip By Default – Choose if to show Tooltip by Default.
  • Select the Map Styling Switch – Set the Map Styling. Choose from Default Styling, Theme Styling or Custom Styling*.
  • Map Styling Custom Styling – Advanced Options Include: Map Overlay Color, Infobox Content, Infobox Styling, Custom Marker Icon.

  • Element Visibility – Choose to show or hide the element on small, medium or large screens.

  • CSS Class – Add a class to the wrapping HTML element.

  • CSS ID – Add an ID to the wrapping HTML element.