Google map not displaying on events or venue pages

[Gonzalo Alatorre]

Hi there,
Working with:
WP 4.5.3
The Events Calendar PRO 4.2.2.1
The Events Calendar: Filter Bar 4.2.1
The Events Calendar 4.2.2

Have set up the Google maps api key. The single event and venue pages don’t display the google maps, even though they’re configured to display. Instead, it just renders the container of the map <div id="tribe-events-gmap-Username *" style="height: 200px; width: 100%"></div> with nothing inside.

Not seeing any script errors or warnings in the dev console.

I’ve done a series of tests disabling and enabling the other installed plugins, with no success in getting the maps to load.

[Gonzalo Alatorre]

This reply is private.

[Geoff B.]

Good evening Kevin and welcome to the Events Calendar Support forum!

Thank you for reaching out to us.

We are sorry to hear about the maps displaying
I would love to help you with this topic.

With that in mind, I tried going on your website, but even with info you gave me, I get hit by a “This content is for registered and logged in members only.” message.

Ideally, I would need to get a better look (maybe some screenshots) of how you set up your API with Google.
It is worth noting that they substantially changed their API authorization policies as of June 22nd.

They are now way stricter, especially with wildcard domains APIs. In any case, if you haven’t already done so, I would recommend reading the following article on that topic: https://theeventscalendar.com/knowledgebase/setting-up-your-google-maps-api-key/

Let me know if that helps.

Have a great day!

Geoff B.

[Gonzalo Alatorre]

This reply is private.

[Geoff B.]

Good evening Kevin,

Thank you for writing back.

It looks like I unfortunately still can’t access the events with the credentials you have given me through the front-end. Would you mind testing that access on your end ?

That being said, I am wondering if this glitch is impacting only events or pages where the content is protected (for members only) ?

Finally, I am not sure I understand correctly what you are trying to accomplish.

 

Why are you trying the script from loading exactly ?

Best regards,

Geoff B.

[Gonzalo Alatorre]

Hi Geoff,

Just checked back in here to see if there was any news on this and realized that the follow up reply I’d sent to your last message isn’t there, explaining why I hadn’t heard anything. Not sure what happend to my reply, so I’ll add it again.

I’ve tested the user account I created for you to access and can confirm that it is now working correctly.

The primary issue is still that the maps are not displaying on the Events Calendar related pages (single event, venue, etc) and I’m not sure why. There aren’t any script errors in the console.

The secondary issue is relating to the loading (or not) of the Google Maps api script. On other pages of the site, we’re also displaying Google Maps and so need to ensure that the Google Maps api script is loaded. As Events Calendar (Pro) loads the api script on its related pages only, that means that when I load it in the template for the other pages, it gets doubled up on the Events Calendar pages. So for that reason, I’ve set up my script to enqueue on pages OTHER THAN Events Calendar related pages. This is working using

wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDyAZ99za_vXoHJVoIYZzB3zTtB3pwirto',['jquery'],null,true);
     
if (!is_singular(array('tribe_events', 'tribe_venue', 'tribe_organizer'))) {
    wp_enqueue_script('googlemaps');
}

but only on the single pages. On the main Events archive page it’s still loading your version and mine and is causing the “You have included the Google Maps API multiple times on this page. This may cause unexpected errors.” error in the console. So I’m still working at figuring out how to not add my version of the script to that particular page and was wondering if you had an idea on that. Otherwise, how can I go about having the Events Calendar version not load at all, and we’ll just load it from our theme on all pages instead?

Thanks,
Kevin

[Geoff B.]

Good evening Kevin,

Thank you for writing back and for testing the accesses. They work great now.

Your explanation was also crystal clear. I totally understand what you are trying to do now: avoid Google Map API duplicate calls.

However, overriding things manually through function calls might be interfering here.
For that reason, I would like to run this by Dev to get their opinion on the best way to achieve what you are trying to do and get back to you shortly.

In the meantime, if you have the time, I would be curious to see what happens if you temporarily completely disable your other Google Map API call (and remove your snippet).
Does that allow the maps to display properly again ?

Hang in there!

Best regards,

Geoff B.

[Gonzalo Alatorre]

Hi Geoff,
I’ve removed the version of the GM api script that I was enqueuing. On the Events Calendar related pages, the map still doesn’t load, and on the other, non-Events pages maps are no longer loading, which you can see if you click the Branches menu.

Thanks,
Kevin

[Geoff B.]

Good afternoon Kevin,

Thank you for running those tests.

As promised, I reached out to Dev on this and here are some of their ideas:

The issue is the map div is getting a weird id (‘tribe-events-gmap-Username *’) which will prevent the correct loading of the map. This seems to be conflicting with the theme

In other words, it looks like your theme is using some customizations (through it’s /tribe-events/  folder or functions.php file). It is highly possible that these are in need of updating to run smoothly with our plugins.
At this point, I would recommend either:

1. Removing that custom id generation from there
2. Temporarily reverting to a default WordPress theme (such as twenty-fifteen) to see if the issue still persists

From there we can tackle the double script potential issues.

Let me know how that goes.

Best regards,
Geoff B.

[Gonzalo Alatorre]

OK, looks like it’s the file the-events-calendar\src\views\modules\map.php

if ( ! defined( 'ABSPATH' ) ) {
	die( '-1' );
}

$style = apply_filters( 'tribe_events_embedded_map_style', "height: $height; width: $width", $index );
?>
<div id="tribe-events-gmap-<?php esc_attr_e( $index ) ?>" style="<?php esc_attr_e( $style ) ?>"></div>

And the $index var is conflicting with something from Paid Memberships Pro.

Will see if I can sort that out with them.

In the meantime, is there a way that we can easily prevent The Events Calendar (Pro, and Filter Bar) from loading the Google Maps api script completely? The script will be enqueued by our custom theme rather than the plugin, so that we can use maps on other pages as needed?

[Gonzalo Alatorre]

OK, issue with the maps not loading has been fixed.

The issue was that Paid Memberships Pro does not have a built in method for moving the placement of the required signup field asterisk * for the default/required Username, E-mail address and Password membership fields.

We used the following to manually add the asterisk beside the labels for those field elements:

function change_checkout_details( $translated_text, $text, $domain ) {
    switch ( $translated_text ) {
      case 'Username' : //select the word/sentence you would like to change
        $translated_text = __( 'Username *', 'pmpro' ); //change text to 'Username *'
      break;
      case 'E-mail Address' :
        $translated_text = __( 'E-mail Address *', 'pmpro' );
      break;
      case 'Confirm E-mail Address' :
        $translated_text = __( 'Confirm E-mail Address *', 'pmpro' );
      break;
      case 'Choose a password (8-40 characters)' :
        $translated_text = __( 'Choose a password (8-40 characters) *', 'pmpro' );
      break;
      case 'Confirm Password' :
        $translated_text = __( 'Confirm Password *', 'pmpro' );
      break;
    }
    return $translated_text;
}
add_filter( 'gettext', 'change_checkout_details', 20, 3 );

And that’s what was conflicting with the Events Calendar map snippet in the reply above.

To fix this, we’ve changed it so the add_filter is only being run on the specific membership checkout page:

function checkPageID(){
	$currentPost = get_post();
	if ( $currentPost->ID == "50") {
		add_filter( 'gettext', 'change_checkout_details', 20, 3 );
	}
}
add_action( 'the_post', 'checkPageID' );

With this in place, the maps on the Events Calendar pages are now displaying properly.

It would still be great to prevent Events Calendar from adding the Google maps api script, so that we can use our own.

[Geoff B.]

Good evening Kevin,

Thank you for writing back.

Wow, I am super impressed by this solution.
Thank you so much for sharing it for everybody’s benefit.

I will ask Dev to see if I a snippet could not do exactly that.

I will get back to you with my findings.

Have a great day!

Geoff B.

[Geoff B.]

Hey Kevin,

As promised, I have reached out to Dev.

The good news is that you can totally dequeue if you want to.
That can be done via:

1. tribe_events_google_maps_api
2. tribe_events_embedded_map

(either one or both, depending what you want to replace)

Let me know if you are good to go with just these assets or if you would prefer additional help with this ?

Best regards,

Geoff B.

[Gonzalo Alatorre]

So I tried removing the script using:

function pp_dequeue_unnecessary_scripts() {
  wp_dequeue_script( 'tribe_events_google_maps_api' );
  wp_deregister_script( 'tribe_events_google_maps_api' );
}
add_action( 'wp_print_scripts', 'pp_dequeue_unnecessary_scripts', 100 );

But that doesn’t work.

There’s likely a better way, but what I was able to get working was tweaking how I enqueue our version of the maps API to be

if (!is_singular(array('tribe_events', 'tribe_venue', 'tribe_organizer'))) {
  if (is_post_type_archive(array('tribe_events'))) {
		  
  }
  else {
    wp_enqueue_script('googlemaps');
  }
}

It doesn’t like !is_post_type_archive(array(‘tribe_events’))

[Cliff]

Hi Kevin. I’m Cliff, jumping in here for Geoff to help with your specific issue regarding Google Maps.

I reviewed your messages in this thread and want to be clear what our aim is. My understanding is that you are using another plugin for Google Maps throughout your site for non-Event pages and wanting to use our plugin’s native functionality on the Events pages (single and archives). Is this correct?

If yes, could you please re-state what our current status is / what the remaining unresolved issues are?

Thank you.

[Author]

Posts