Change the Height and Width of Google Maps

💡 Note: 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.

By default, the map in the single events template is set to 350px in height. Two possible methods to change the size are to edit the template or use a filter.

Filter map size

To filter the map size add the following snippet to your theme’s functions.php file.

add_filter( 'tribe_events_embedded_map_style', 'modify_embedded_map_inline_styles' );
function modify_embedded_map_inline_styles() {
	return 'width: 100%; height: 1000px';
}

Change the width and height field in that snippet to the desired size for your site. The snippet as written sets the width to 100% and the height to 1000 pixels.

Edit map size in the template

The other method to edit the map size is to directly edit it in the template.

To being, start with our Themer’s Guide to learn how to move Event templates to your theme folder for safe editing.

Then look for this template in The Events Calendar plugin directory:

the-events-calendar/src/views/modules/map.php

Once you have found it, move that template to your theme according to the guide and modify this line with your own custom sizes:

$style = apply_filters( 'tribe_events_embedded_map_style', 'height: 1000px; width: $width', $index );

In that snippet above the height is changed to 1000 pixels and the width is left to the default size.