{"id":1896538,"date":"2019-10-18T13:19:24","date_gmt":"2019-10-18T17:19:24","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/how-to-change-the-map-size-in-the-single-events-template\/"},"modified":"2024-12-08T01:43:08","modified_gmt":"2024-12-08T06:43:08","slug":"how-to-change-the-map-size-in-the-single-events-template","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/how-to-change-the-map-size-in-the-single-events-template\/","title":{"rendered":"Change the Height and Width of Google Maps"},"content":{"rendered":"\n

\ud83d\udca1<\/strong> Note:<\/strong> The Events Calendar is not fully compatible yet with Full Site Editing, which is a part of the Twenty TwentyTwo theme. Thus, we recommend running the conflict test with Twenty Twenty.<\/p>\n\n\n\n

By default, the map in the single events template is set to 350px in height. Follow the steps below to change this behavior.<\/p>\n\n\n\n

Remove the max-height CSS property<\/h3>\n\n\n\n

To remove the max-height styling of the map, append the following to your theme’s additional CSS section (Appearance -> Customize -> Additional CSS)<\/p>\n\n\n

\n.tribe-events-venue-map > iframe, .tribe-events-meta-group-gmap, div[id^="tribe-events-gmap"] {\n   max-height: unset !important;\n}\n<\/pre><\/div>\n\n\n
Filter map size<\/h3>\n\n\n\n
To filter the map size add the following snippet to your theme’s functions.php<\/code> file.<\/p>\n\n\n
\nadd_filter( 'tribe_events_single_map_default_width', function( $width ) {\n\treturn '600px';\n}, 20 );\n\nadd_filter( 'tribe_events_single_map_default_height', function ( $height ) {\n\treturn '600px';\n}, 20 );\n<\/pre><\/div>\n\n\n
Change the width and height field in that snippet to the desired size for your site. The snippet as written sets the width to 600 pixels and the height to 600 pixels.<\/p>\n","protected":false},"excerpt":{"rendered":"
By default, the map in the single events template is set to 350px in height. Follow the steps below to change this behavior. Remove the max-height CSS property To remove the max-height styling of the map, append the following to your theme’s additional CSS section (Appearance -> Customize -> Additional CSS) Filter map size To…<\/p>\n","protected":false},"author":17,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[79],"tags":[25,58],"stellar-product-taxonomy":[161],"class_list":["post-1896538","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-snippets","tag-customizations","tag-php","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":79,"label":"Snippets"}],"post_tag":[{"value":25,"label":"Customizations"},{"value":58,"label":"PHP"}],"stellar-product-taxonomy":[{"value":161,"label":"The Events Calendar"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Andras Guseo","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/andras\/"},"comment_info":0,"category_info":[{"term_id":79,"name":"Snippets","slug":"snippets","term_group":0,"term_taxonomy_id":79,"taxonomy":"category","description":"","parent":0,"count":136,"filter":"raw","term_order":"0","cat_ID":79,"category_count":136,"category_description":"","cat_name":"Snippets","category_nicename":"snippets","category_parent":0}],"tag_info":[{"term_id":25,"name":"Customizations","slug":"customizations","term_group":0,"term_taxonomy_id":25,"taxonomy":"post_tag","description":"","parent":0,"count":177,"filter":"raw","term_order":"0"},{"term_id":58,"name":"PHP","slug":"php","term_group":0,"term_taxonomy_id":58,"taxonomy":"post_tag","description":"","parent":20,"count":128,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1896538"}],"version-history":[{"count":2,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896538\/revisions"}],"predecessor-version":[{"id":1963685,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896538\/revisions\/1963685"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1896538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1896538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1896538"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1896538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}