{"id":414,"date":"2010-10-01T03:57:21","date_gmt":"2010-10-01T03:57:21","guid":{"rendered":"https:\/\/thethemebuilders.review\/"},"modified":"2010-10-01T03:57:21","modified_gmt":"2010-10-01T03:57:21","slug":"google-maps","status":"publish","type":"page","link":"https:\/\/thethemebuilders.review\/smalldemo\/shortcodes\/google-maps","title":{"rendered":"Google Maps"},"content":{"rendered":"<div id=\"google_map_453\" class=\"google_map\" style=\"height:250px;\"><\/div>\n<div class=\"divider_padding\"><\/div>\n<h2>Google Maps<\/h2>\n<div class=\"tabs_container\"><ul class=\"tabs\"><li><a href=\"#\"><i class=\"theme-icon icon-check\" style=\"color:#3cabce\"><\/i>Parameters<\/a><\/li><li><a href=\"#\"><i class=\"theme-icon icon-check\" style=\"color:#3cabce\"><\/i>Shortcode Option Panel<\/a><\/li><\/ul><div class=\"panes\"><div class=\"pane\"><h3>Parameters<\/h3>\n<div class=\"divider_line\"><\/div>\n<ul class=\"list_check list_color_blue\">\n<li><strong>width<\/strong><\/li>\n<li><strong>height<\/strong><\/li>\n<li><strong>address:<\/strong> Address on which the viewport will be centered.<\/li>\n<li><strong>latitude:<\/strong> Point on which the viewport will be centered. If not given and no markers are defined the viewport defaults to world view.<\/li>\n<li><strong>longitude:<\/strong> Same as above but for longitude&#8230;<\/li>\n<li><strong>zoom:<\/strong> Zoom value from 1 to 19 where 19 is the greatest and 1 the smallest.<\/li>\n<li><strong>html:<\/strong> Content that will be shown within the info window for this marker.<\/li>\n<li><strong>popup:<\/strong> If true the info window for this marker will be shown when the map finished loading. If &#8220;html&#8221; is empty this option will be ignored.<\/li>\n<li><strong>controls:<\/strong> A simple array of string values representing the function names (without &#8220;()&#8221;) to add controls. Please refer to the <a href=\"http:\/\/code.google.com\/intl\/en-US\/apis\/maps\/documentation\/javascript\/v2\/reference.html#GControlImpl\">Google Maps API<\/a> for possible values. If empty the default map controls will be applied.<\/li>\n<li><strong>scrollwheel:<\/strong> Set to false to disable zooming with your mouses scrollwheel. If &#8220;controls&#8221; is not set this option will be ignored (because default map controls are applied).<\/li>\n<li><strong>maptype:<\/strong> Predefined variable for setting the map type. Please refer to the<br \/>\n<a href=\"http:\/\/code.google.com\/intl\/en-US\/apis\/maps\/documentation\/javascript\/v2\/introduction.html#MapTypes\">Google Maps API<\/a> for possible values.<\/li>\n<li><strong>marker:<\/strong> Set to false to disable display a marker in the viewport.<\/li>\n<\/ul><\/div><div class=\"pane\"><h3>Shortcode Option Panel<\/h3>\n<div class=\"divider_line\"><\/div>\n<figure id=\"image_5601\" class=\"image_styled aligncenter\" style=\"width:596px\">\n\t\t<div class=\"image_frame effect-icon\"><div class=\"image_shadow_wrap\">\n\t\t<a data-fittoview=\"true\" class=\"image_size_medium image_icon_zoom lightbox\" title=\"Google Maps Shortcode Options Panel\" href=\"https:\/\/thethemebuilders.review\/smalldemo\/wp-content\/uploads\/2014\/01\/shortcode-googlemaps.jpg\"><img decoding=\"async\" class=\"image-frame\" alt=\"Google Maps Shortcode Options Panel\" src=\"https:\/\/thethemebuilders.review\/smalldemo\/wp-content\/uploads\/2014\/01\/shortcode-googlemaps.jpg\" data-theme-retina-image=\"false\"  data-thumbnail=\"3229\" data-thumbnail-class=\"IjMyMjki\" width=\"596\" height=\"1094\" \/><\/a>\n\t\t<\/div><\/div><span class=\"image_caption\">Google Maps Shortcode Options Panel<\/span><\/figure><\/div><\/div><\/div>\n<div class=\"divider top\"><a href=\"#\">Top<\/a><\/div>\n<h3>Simple map with marker<\/h3>\n<p>Displays a simple map with controls and adds one marker. The viewport gets centered automatically.<\/p>\n<code class=\"code\">&#91;gmap latitude=\"47.660937\" longitude=\"9.569803\"&#93;<\/code>\n<div id=\"google_map_141\" class=\"google_map\" style=\"height:400px;\"><\/div>\n<div class=\"divider_padding\"><\/div>\n<div class=\"divider top\"><a href=\"#\">Top<\/a><\/div>\n<h3>Different map type<\/h3>\n<p>Changes the map type to physical view.<\/p>\n<code class=\"code\">&#91;gmap maptype=\"TERRAIN\" marker=\"false\" zoom=\"10\"&#93;<\/code>\n<div id=\"google_map_444\" class=\"google_map\" style=\"height:400px;\"><\/div>\n<div class=\"divider_padding\"><\/div>\n<div class=\"divider top\"><a href=\"#\">Top<\/a><\/div>\n<h3>Map without controls<\/h3>\n<code class=\"code\">&#91;gmap controls=\"false\" scrollwheel=\"false\" marker=\"false\" zoom=\"3\"&#93;<\/code>\n<div id=\"google_map_912\" class=\"google_map\" style=\"height:400px;\"><\/div>\n<div class=\"divider_padding\"><\/div>\n<div class=\"divider top\"><a href=\"#\">Top<\/a><\/div>\n<h3>Map with marker and info window<\/h3>\n<code class=\"code\">&#91;gmap latitude=\"47.660937\" longitude=\"9.569803\" \nhtml=\"Tettnang, Germany\" popup=\"true\" zoom=\"10\"&#93;<\/code>\n<div id=\"google_map_822\" class=\"google_map\" style=\"height:400px;\"><\/div>\n<div class=\"divider_padding\"><\/div>\n<div class=\"divider top\"><a href=\"#\">Top<\/a><\/div>\n<h3>Map with address<\/h3>\n<p>you can use address instead of latitude\/longitude.<br \/>\ngMap automatically geocodes the given string and places a marker and center the viewport. <\/p>\n<code class=\"code\">&#91;gmap address=\"Tettnang, Germany\" html=\"Tettnang, Germany\" zoom=\"10\"&#93;<\/code>\n<div id=\"google_map_985\" class=\"google_map\" style=\"height:400px;\"><\/div>\n<div class=\"divider_padding\"><\/div>\n<div class=\"divider top\"><a href=\"#\">Top<\/a><\/div> <\/p>\n<h4>Fullwidth Gmap in the Feature Header Area<\/h4>\n<div class=\"tabs_container\"><ul class=\"tabs\"><li><a href=\"#\"><i class=\"theme-icon icon-check\" style=\"color:#3cabce\"><\/i>Featured Header Code<\/a><\/li><li><a href=\"#\"><i class=\"theme-icon icon-check\" style=\"color:#3cabce\"><\/i>Custom CSS<\/a><\/li><li><a href=\"#\"><i class=\"theme-icon icon-check\" style=\"color:#3cabce\"><\/i>The Code<\/a><\/li><\/ul><div class=\"panes\"><div class=\"pane\"><div class=\"divider_padding\"><\/div>\n<h4>Feature Header Area Code<\/h4>\n<p>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.<\/p>\n<figure id=\"image_9763\" class=\"image_styled aligncenter\" style=\"width:622px\">\n\t\t<div class=\"image_frame effect-icon\"><div class=\"image_shadow_wrap\">\n\t\t<a rel=\"gmapfa\" data-fittoview=\"true\" class=\"image_size_medium image_icon_zoom lightbox\" title=\"Gmap Shortcode in Featured Header Custom text area.\" href=\"https:\/\/thethemebuilders.review\/smalldemo\/wp-content\/uploads\/2013\/11\/striking_r-gmap-demo.jpg\"><img decoding=\"async\" class=\"image-frame\" alt=\"Insert striking Gmap Shortcode in Feature Header Custom text area\" src=\"https:\/\/thethemebuilders.review\/smalldemo\/wp-content\/uploads\/strikingr\/images\/1876_striking_r-gmap-demo-620x493.jpg\" data-theme-retina-image=\"false\"  data-thumbnail=\"1876\" data-thumbnail-class=\"IjE4NzYi\" width=\"622\" height=\"493\" \/><\/a>\n\t\t<\/div><\/div><span class=\"image_caption\">Gmap Shortcode in Feature Header Custom text area.<\/span><\/figure><\/div><div class=\"pane\"><div class=\"divider_padding\"><\/div>\n<h4>Custom CSS is Needed<\/h4>\n<p>After that in the same Striking Page General options Custom CSS is needed to alter the behaviour of the Feature Header.<br \/>\n<figure id=\"image_8902\" class=\"image_styled aligncenter\" style=\"width:622px\">\n\t\t<div class=\"image_frame effect-icon\"><div class=\"image_shadow_wrap\">\n\t\t<a rel=\"gmapfa\" data-fittoview=\"true\" class=\"image_size_medium image_icon_zoom lightbox\" title=\"Gmap Shortcode in Featured Header Custom CSS\" href=\"https:\/\/thethemebuilders.review\/smalldemo\/wp-content\/uploads\/2013\/11\/striking_r-gmap-demo-customcss.jpg\"><img decoding=\"async\" class=\"image-frame\" alt=\"Insert Gmap Shortcode in Featured Header Custom CSS\" src=\"https:\/\/thethemebuilders.review\/smalldemo\/wp-content\/uploads\/strikingr\/images\/1879_striking_r-gmap-demo-customcss-620x327.jpg\" data-theme-retina-image=\"false\"  data-thumbnail=\"1879\" data-thumbnail-class=\"IjE4Nzki\" width=\"622\" height=\"327\" \/><\/a>\n\t\t<\/div><\/div><span class=\"image_caption\">Gmap Shortcode in Featured Header Custom CSS<\/span><\/figure><\/div><div class=\"pane\"><div class=\"divider_padding\"><\/div>\n<h5><strong>The Shortcode for the Fullwidth Gmap : in the Striking Page Options -> Feature Header Settings -> Feature Header Custom Text Area field<\/h5>\n<p><\/strong><div class=\"divider_padding\"><\/div>\n<code class=\"code\">&#91;gmap zoom=\"3\" latitude=\"51.51121389999999\" longitude=\"-0.11982439999997041\" popup=\"false\" controls=\"true\" align=\"center\" width=\"100%\" scrollwheel=\"false\" html=\"London UK, Map center\"&#93;<\/code>\n<div class=\"divider_padding\"><\/div>\n<h5><strong>The Custom CSS for the Fullwidth Gmap : in the Striking Page Options -> Page Design Settings -> Custom CSS Text field<\/strong><\/h5>\n<div class=\"divider_padding\"><\/div>\n<code class=\"code\">#feature .inner {\nwidth:100%; \npadding: 0px;\n}\n\n#introduce {\npadding:0px;\n}\n\n#feature .bottom_shadow,\n#feature .top_shadow,\n.has-shadow #feature .bottom_shadow,\n.has-shadow #feature .top_shadow {display:none;}\n\n#feature .inner .gmap_marker {\n  color:#3867b1;\n}<\/code><\/div><\/div><\/div>\n<div class=\"divider top\"><a href=\"#\">Top<\/a><\/div>\n<b>Note: Gmaps center on pageload not on page resize or swap from landscape to portrait or vice versa.<\/b><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google Maps Simple map with marker Displays a simple map with controls and adds one marker. The viewport gets centered automatically. Different map type Changes the map type to physical view. Map without controls Map with marker and info window Map with address you can use address instead of latitude\/longitude. gMap automatically geocodes the given &#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":121,"menu_order":79,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-414","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thethemebuilders.review\/smalldemo\/wp-json\/wp\/v2\/pages\/414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thethemebuilders.review\/smalldemo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thethemebuilders.review\/smalldemo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thethemebuilders.review\/smalldemo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thethemebuilders.review\/smalldemo\/wp-json\/wp\/v2\/comments?post=414"}],"version-history":[{"count":0,"href":"https:\/\/thethemebuilders.review\/smalldemo\/wp-json\/wp\/v2\/pages\/414\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/thethemebuilders.review\/smalldemo\/wp-json\/wp\/v2\/pages\/121"}],"wp:attachment":[{"href":"https:\/\/thethemebuilders.review\/smalldemo\/wp-json\/wp\/v2\/media?parent=414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}