Style the maps

[Dinah]

Hi,

I would like to style the Google Maps and searched in the forum for a solution, but unfortunately couldn’t find an answer.

In this post: https://theeventscalendar.com/support/forums/topic/google-maps-styling-2/ you are mentioning the Themer’s Guide and the possibility to customize the different views (what I am using already).

So I took a look into the different map related views but could not find the correct place where to add the JSON (generated with Google Styling wizard) and found in ../tribe-events/modules/map.php a hint in the following filter:

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

After searching for this filter in your documentation I found a postwhere it seems as if this filter can be used to influence the map. For example with:

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

The size of the map can be changed. Can this filter (when added in functions.php of my child theme) also been used to change the styling of the map?

Or is there another file where the styling code for the map has to be implemented?

Many thanks in advance,
Dinah

[Patricia]

Hey Dinah,

Thank you for reaching out to us!

To achieve what you want you need to dequeue pro/src/resources/js/tribe-events-ajax-maps.min.js and then enqueue your own script instead.

I would suggest you to check this post for further information on how to dequeue Events Calendar scripts.

I’ve implemented a simple example to help you get started with this customization: please note that this method is not ideal, since you will loose your changes with the plugin updates:

1- First, create a backup copy of:

events-calendar-pro/src/resources/js/tribe-events-ajax-maps.min.js

2- After that, open tribe-events-ajax-maps.min.js and replace the minified code with:

https://gist.github.com/nefeline/bf22f7fbb45c87d743c7b60912bc18f4

3- In this example I implemented my own style (from this example) on line 122 and this is the result you will see in your main Map view calendar.

I hope this helps you get started! Let me know if you need anything else and I’ll be happy to assist!

Best regards,

Patricia

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts