Google Maps

Google Maps

[tabs]
[tab title= »Parameters » icon= »check » icon_color= »#3cabce »]

Parameters

[divider_line]
[list icon= »check » color= »blue »]

  • width
  • height
  • address: Address on which the viewport will be centered.
  • latitude: Point on which the viewport will be centered. If not given and no markers are defined the viewport defaults to world view.
  • longitude: Same as above but for longitude…
  • zoom: Zoom value from 1 to 19 where 19 is the greatest and 1 the smallest.
  • html: Content that will be shown within the info window for this marker.
  • popup: If true the info window for this marker will be shown when the map finished loading. If « html » is empty this option will be ignored.
  • controls: A simple array of string values representing the function names (without « () ») to add controls. Please refer to the Google Maps API for possible values. If empty the default map controls will be applied.
  • scrollwheel: Set to false to disable zooming with your mouses scrollwheel. If « controls » is not set this option will be ignored (because default map controls are applied).
  • maptype: Predefined variable for setting the map type. Please refer to the
    Google Maps API for possible values.
  • marker: Set to false to disable display a marker in the viewport.

[/list]
[/tab]
[tab title= »Shortcode Option Panel » icon= »check » icon_color= »#3cabce »]

Shortcode Option Panel

[divider_line]
[image source_type= »attachment_id » source_value= »3229″ caption= »Google Maps Shortcode Options Panel » alt= »Google Maps Shortcode Options Panel » align= »center » icon= »zoom » width= »594″ autoHeight= »true » quality= »100″ lightbox= »true » title= »Google Maps Shortcode Options Panel »]
[/tab]
[/tabs]

[divider_top]

Simple map with marker

Displays a simple map with controls and adds one marker. The viewport gets centered automatically.

[code]
[gmap latitude= »47.660937″ longitude= »9.569803″]
[/code]

[gmap latitude= »47.660937″ longitude= »9.569803″]

[divider_padding]
[divider_top]

Different map type

Changes the map type to physical view.

[code]
[gmap maptype= »TERRAIN » marker= »false » zoom= »10″]
[/code]

[gmap maptype= »TERRAIN » marker= »false » zoom= »10″]

[divider_padding]
[divider_top]

Map without controls

[code]
[gmap controls= »false » scrollwheel= »false » marker= »false » zoom= »3″]
[/code]

[gmap controls= »false » scrollwheel= »false » marker= »false » zoom= »3″]

[divider_padding]
[divider_top]

Map with marker and info window

[code]
[gmap latitude= »47.660937″ longitude= »9.569803″
html= »Tettnang, Germany » popup= »true » zoom= »10″]
[/code]

[gmap latitude= »47.660937″ longitude= »9.569803″ html= »Tettnang, Germany » popup= »true » zoom= »10″]

[divider_padding]
[divider_top]

Map with address

you can use address instead of latitude/longitude.
gMap automatically geocodes the given string and places a marker and center the viewport.
[code]
[gmap address= »Tettnang, Germany » html= »Tettnang, Germany » zoom= »10″]
[/code]
[gmap address= »Tettnang, Germany » html= »Tettnang, Germany » zoom= »10″]

[divider_padding]
[divider_top]

Fullwidth Gmap in the Feature Header Area

[tabs]
[tab title= »Featured Header Code » icon= »check » icon_color= »#3cabce »][divider_padding]

Feature Header Area Code

To get a fullwidth gmap into the feature header gmap shortcode needs to be inserted into the Feature Header Custom text-area in the Striking Page General options of that page and make sure the Feature Header Type is set to display that area only.

[image source_type= »attachment_id » source_value= »1876″ caption= »Gmap Shortcode in Feature Header Custom text area. » alt= »Insert striking Gmap Shortcode in Feature Header Custom text area » align= »center » icon= »zoom » width= »620″ autoHeight= »true » quality= »100″ lightbox= »true » group= »gmapfa » title= »Gmap Shortcode in Featured Header Custom text area. »]

[/tab]
[tab title= »Custom CSS » icon= »check » icon_color= »#3cabce »][divider_padding]

Custom CSS is Needed

After that in the same Striking Page General options Custom CSS is needed to alter the behaviour of the Feature Header.
[image source_type= »attachment_id » source_value= »1879″ caption= »Gmap Shortcode in Featured Header Custom CSS » alt= »Insert Gmap Shortcode in Featured Header Custom CSS » align= »center » icon= »zoom » width= »620″ autoHeight= »true » quality= »100″ lightbox= »true » group= »gmapfa » title= »Gmap Shortcode in Featured Header Custom CSS »]
[/tab]
[tab title= »The Code » icon= »check » icon_color= »#3cabce »][divider_padding]

The Shortcode for the Fullwidth Gmap : in the Striking Page Options -> Feature Header Settings -> Feature Header Custom Text Area field

[divider_padding]
[code]
[gmap zoom= »3″ latitude= »51.51121389999999″ longitude= »-0.11982439999997041″ popup= »false » controls= »true » align= »center » width= »100% » scrollwheel= »false » html= »London UK, Map center »]
[/code][divider_padding]

The Custom CSS for the Fullwidth Gmap : in the Striking Page Options -> Page Design Settings -> Custom CSS Text field

[divider_padding]
[code]
#feature .inner {
width:100%;
padding: 0px;
}

#introduce {
padding:0px;
}

#feature .bottom_shadow,
#feature .top_shadow,
.has-shadow #feature .bottom_shadow,
.has-shadow #feature .top_shadow {display:none;}

#feature .inner .gmap_marker {
color:#3867b1;
}
[/code]
[/tab]
[/tabs]
[divider_top]
Note: Gmaps center on pageload not on page resize or swap from landscape to portrait or vice versa.

Leave a Response