This feature is available only for Premium members

NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor. See this document if you need more information

 

Description and Code

 

IMPORTANT: It's required to insert your Google Maps API Key in the theme's customizer (Appearance   Customize   Contact section) in order to get the Google Maps scripts get working

 

The Google Maps shortcode allows you to easily put a Google Map into your site. It comes with options which can set the map with unique styles and layouts. Here's an example of the shortcode in code view:

[google_map_component address="" type="roadmap" map_style="default" overlay_color="" infobox="default" infobox_background_color="" infobox_text_color="" infobox_content="" icon="" width="100%" height="300px" zoom="14" scrollwheel="yes" scale="yes" zoom_pancontrol="yes" popup="yes" class="" id=""][/google_map_component]

 

Parameters

 

  • address
    • defines the location(s) which will be shown on the map
    • Possible values - string - like Spandauer Str. 3 Berlin, for multiple addresses, use the | symbol to separate them
  • type
    • defines the type of the map
    • Possible values - roadmap, satellite, hybrid or terrain
  • map_style
    • defines the layout styling of the map
    • Possible values - default or custom
  • overlay_color
    • controls the overlay color on the map
    • Possible values - hex code #000000
  • infobox
    • defines the infobox styling of the map
    • Possible values - default or custom
  • infobox_background_color
    • defines the background color of the custom infobox
    • Possible values - hex code #000000
  • infobox_text_color
    • defines the text color of the custom infobox
    • Possible values - hex code #000000
  • infobox_content
    • sets the content of the custom infobox
    • Possible values - string - like Spandauer Str. 3 Berlin, for multiple contents, use the | symbol to separate them
  • icon
    • defines the custom map marker image(s)
    • Possible values - string - like http://example.com/wp-content/uploads/image.jpg, for multiple markers, use the | symbol to separate them
  • width
    • defines the width of the map
    • Possible values - values with an unit 500px, 1000px or percents 50%, 100% etc.
  • height
    • defines the height of the map
    • Possible values - values with an unit 500px, 1000px or percents 50%, 100% etc.
  • zoom
    • sets the zoom level of the map on load
    • Possible values - number - like 10, 12 etc. - max. 21
  • scrollwheel
    • defines if the map will zoom when scrolling with mouse
    • Possible values - yes or no
  • scale
    • controls if the scale will be shown on the map
    • Possible values - yes or no
  • zoom_pancontrol
    • defines if the pan control button will be shown on the map
    • Possible values - yes or no
  • popup
    • sets if to show the popup (tooltip) of the location when map loads
    • Possible values - yes or no
  • class
    • custom class for CSS of component
    • Possible values - string - like custom-element-class
  • id
    • custom ID for CSS of component
    • Possible values - string - like custom-element-id

 

Basic Examples

 

Roadmap

 

 

Satellite

 

 

Hybrid

 

 

Terrain

 

 

Customized Examples