Loading...
Google Maps 2018-04-05T16:14:55+00:00

Google Map Shortcode

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 shortcode 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.

4 Different Google Map Types to Select

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.

Google Map Roadmap

Google Map Satellite

Google Map Hybrid

Google Map Terrain

Easily Customize Map Styles, Info Box Colors & Content!

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.

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 the classic Google Maps styling!

Theme Map Styling

We have added a custom theme styling that is unique to the Avada theme. When using this styling, the map color overlay, map marker and info box will be automatically set with our unique settings!

Custom Map Styling

The custom map style allows you to use any uploaded image or icon as a custom map marker. As well as any overlay color, infobox background and text color. This is perfect for branding your site!

Powerful Map Controls

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

Avada Admin

Zoom Level

This option allows you to control the number of posts that will display with the blog shortcode.

Avada Admin

Scrollwheel on Map

This option allows you to choose which category or categroies will display with the blog shortcode.

Avada Admin

Scroll Scale Control on Map

This option allows you to choose which category or categroies will display with the blog shortcode.

Avada Admin

Show Pan Control on Map

This option allows you to choose which category or categroies will display with the blog shortcode.

Avada Admin

Address Pin Animation

This option allows you to choose which category or categroies will display with the blog shortcode.

Avada Admin

Show Tooltip by Default

This option allows you to easily exclude one or more categories. Perfect for those who have many.

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 Show on Desktop

Only Show on Tablet

Only Show on Mobile

Complete Set of Options

Every option and description included with the google maps shortcode is listed below.

  • address – Your physical address. To have multiple map markers, separate two addresses with a vertical line. For example, 579 Allen Road Basking Ridge, NJ 07920 | Mount Arlington, NJ 07856.
  • type – Can be one of these values: roadmap, terrain, hybrid, or satellite. Sets the type of Google Map to display.
  • map_style – Can be one of these values: default, theme, or custom. Choose custom to use advanced color options.
  • overlay_colorCustom setting only. Accepts a hexcode ( #000000 ) or RGBA values ( rgba(0,0,0,0) ). Sets the overlaying color for the map. Leave Blank for Theme Option selection.
  • infobox – Custom setting only. Can be one of these values: default, or custom. Choose custom to use advanced options.
  • infobox_background_colorCustom setting only. Accepts a hexcode ( #000000 ). Sets the infobox’s background color. Leave Blank for Theme Option selection.
  • infobox_text_colorCustom setting only. Accepts a hexcode ( #000000 ). Sets the infobox’s text color. Leave Blank for Theme Option selection.
  • infobox_contentCustom setting only. Type in custom info box content to replace address string. For multiple addresses, separate them with a vertical line ( Info1|Info2 ).
  • iconCustom setting only. Type in full image URLs for custom marker icons, or input theme for our custom marker. For multiple icons, separate them with a vertical line ( Icon1|Icon2 ).
  • width – Accepts a pixel or a percentage value. For example 25px, or 50%. Sets the map’s width.
  • height – Accepts a pixel or a percentage value. For example 25px, or 50%. Sets the map’s height.
  • zoom – Accepts a numerical value that represents the map zoom level. The higher the number, the more it will zoom in.
  • scrollwheel – Can be one of these values: yes, or no. This will enable or disable the mouse scrolling.
  • scale – Can be one of these values: yes, or no. This will show or hide the scale graphic.
  • zoom_pancontrol – Can be one of these values: yes, or no. This will show or hide the zoom controls.
  • animation – Can be one of these values: yes, or no. This will enable or disable the animation for address pins.
  • popup – Can be one of these values: yes, or no. This will show or hide the map popup graphic. If set to no, then the popup will show on click.
  • class – Add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id – Add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.

Join The 425,000+ Satisfied Avada Users!

BUY AVADA NOW!

Sliding Bar Section For Widgets

This is the sliding section that can be enabled or disabled on any demo. You can insert anywhere from 1-6 columns along with any widget that comes with Avada, WordPress or additional 3rd party plugins. It's perfect for placing additional information on your site.

Recent Works

Contact Info

12345 North Street, New York City, NY 555555

Phone: 1-800-555-5555

Mobile: 1-234-567-8910

Fax: 1-234-879-5641

Web: http://yourwebsite.com