Google Map

 

Description and Code

 

 

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