Google Maps
[divider_top]
Simple map with marker
Displays a simple map with controls and adds one marker. The viewport gets centered automatically.
[gmap latitude=”47.660937″ longitude=”9.569803″]
[divider_padding]
[divider_top]
Different map type
Changes the map type to physical view.
[gmap maptype=”TERRAIN” marker=”false” zoom=”10″]
[divider_padding]
[divider_top]
Map without controls
[gmap controls=”false” scrollwheel=”false” marker=”false” zoom=”3″]
[divider_padding]
[divider_top]
Map with marker and info window
[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.
[gmap address=”Tettnang, Germany” html=”Tettnang, Germany” zoom=”10″]
[divider_padding]
[divider_top]
Fullwidth Gmap in the Tabs
[tabs history=”true”]
[tab title=”Tab1″ anchor=”Tab1″ icon=”home”]
Nunc sagittis elementum metus, quis volutpat arcu vehicula non. Suspendisse lacus purus, fringilla scelerisque tincidunt ac, aliquam eget libero. In ultricies est volutpat, posuere arcu id, interdum nunc. Morbi tristique sed augue at ornare. Sed congue arcu augue, in rutrum urna malesuada sit amet? Vestibulum varius suscipit elit, non varius lorem hendrerit in. Nam et dui ac sem pretium aliquet.
[gmap address=”Central Park, New York” scrollwheel=”false”]
[/tab]
[tab title=”Tab2″ anchor=”Tab2″ icon=”map-o”]
Nunc sagittis elementum metus, quis volutpat arcu vehicula non. Suspendisse lacus purus, fringilla scelerisque tincidunt ac, aliquam eget libero. In ultricies est volutpat, posuere arcu id, interdum nunc. Morbi tristique sed augue at ornare. Sed congue arcu augue, in rutrum urna malesuada sit amet? Vestibulum varius suscipit elit, non varius lorem hendrerit in. Nam et dui ac sem pretium aliquet.
[gmap address=”Bangkok Thailand” scrollwheel=”false”]
[/tab]
[tab title=”Tab3″ anchor=”Tab3″ icon=”map-marker”]
Nunc sagittis elementum metus, quis volutpat arcu vehicula non. Suspendisse lacus purus, fringilla scelerisque tincidunt ac, aliquam eget libero. In ultricies est volutpat, posuere arcu id, interdum nunc. Morbi tristique sed augue at ornare. Sed congue arcu augue, in rutrum urna malesuada sit amet? Vestibulum varius suscipit elit, non varius lorem hendrerit in. Nam et dui ac sem pretium aliquet.
[gmap address=”Tettnang, Germany” scrollwheel=”false”]
[/tab]
[/tabs]
[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.