Google Maps - Security Design
414
page-template-default,page,page-id-414,page-child,parent-pageid-121,theme-bridge,woocommerce-no-js,ajax_fade,page_not_loaded,,columns-4,qode-theme-ver-16.7,qode-theme-bridge,wpb-js-composer js-comp-ver-4.12,vc_responsive
 

Google Maps

[gmap height=”250″ latitude=”52.21132″ longitude=”6.01808″ zoom=”10″ popup=”true”]
[divider_padding]

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.