Map view tooltip

[Rosa Maria]

Hello,

I’d like to know how to change the style’s tooltip shown on Google Map on Map View.

Also, i’d like to delete the words “Event:” and “Address:” shown on this tooltip. How can I do it?

Thanks.

[George]

Hey @Rosa Maria,

Doing either thing here would unfortunately require custom coding. I say “unfortunately” because we cannot help with this sort of thing – please read the “Product Support” section of this page for more information → http://theeventscalendar.com/terms.

—

Despite all of that, I’d still love to help here if I can.

1. Can you share a link to the page on your site where the Map View tooltips are visible?

2. What are the specific things you want to change about these tooltips? By this I mean what do you want to change other than the change of “Event” to “Address” text. Or is this change of text the only change you want to make?

Thanks!
George

[Rosa Maria]

Hi George,

I’m working offline, so I don’t have a link to share with you…

I want to delete the “Event:” and “Address:” text, and also I’d like to change the font size and background color of the tooltip.

Thanks!

[George]

Hey @Rosa Maria,

When it comes to font and background-color changes, you will unfortunately have to implement these customizations yourself. We cannot help with customizations here – please see the “Product Support” section of this page for more information → http://theeventscalendar.com/terms

To make it easier to write custom CSS on your site, definitely check out a [free!] tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome. They have “Inspector” tools that let you zoom right over the element whose styles you need to change, which makes writing custom CSS much easier.

You can also hire someone to help you do this if need be – here’s a list of highly-rated customizers available for hire, in case it is helpful → http://m.tri.be/18k1

—

Now, despite everything above, since the deletion of the “Event:” and “Address:” text is a bit trickier I went ahead and wrote some custom code for you anyways 🙂

You can get rid of those labels by adding the following code snippet to your theme’s functions.php file:

if ( function_exists( 'Tribe_ECP_Load' ) ) {
/**
* Modify 'Event:' and/or 'Address:' text in Map View tooltips.
*
* @link http://theeventscalendar.com/?p=1052594
*/
function tribe_support_1052594( $data ) {

if ( tribe_is_map() ) {
$data['map_tooltip_event'] = ''; // Default is 'Event: '.
$data['map_tooltip_address'] = ''; // Default is 'Address: '.
}

return $data;
}

add_filter( 'tribe_events_pro_localize_script', 'tribe_support_1052594' );
}


This will make the Map View tooltips only show the event title and the address, as shown in this screenshot:

I hope this helps!

Best of luck with further customizations on your site.

Sincerely,
George

[Alvaro]

Would it be possible to include the Venue´s name (and permalink) using this method?
Thank you.

[George]

Hey @Alvaro,

Unfortunately adding those details is a bit more complicated. Permalinks can be retrieved using WordPress’ own function get_permalink(), and venue information can be retrieved using tribe_get_venue() and other such functions, but adding that information to the tooltips requires a bit more code editing than the simple swapping of data I demonstrated above.

The amount of customization required is quite significant. We cannot offer much help with the whole customization, but hopefully these suggestions help:

1. Make the simple customization demonstrated in my earlier reply here for starters. Then tinker around with this to get a first-hand sense of how the Google Maps markers work and are generated.

2. Find the map_add_marker() JavaScript function here in your Events Calendar Pro (not The Events Calendar, but Events Calendar Pro!) plugin files:

src/resources/js/tribe-events-ajax-maps.js

It should look like this:

This function is where some of the tricky elements of the customization start to arise. You’ll have to take the reins from here, but essentially you will need to recreate the event-generation JavaScript but for a third item on the marker, which will be a text link of the venue name linked to the venue permalink….

I’m sorry that we can’t delve into the whole thing for you! I wish you the best of luck with your customizations.

Also, since this thread is so old and was unanswered for almost a month before you posted in it, I will close this thread to facilitate keeping the forums recently active.

Thank you,
George

[Author]

Posts