Problem with Google Map in tab

[Bastien Bournet-Charrier]

Hey there,

We’ve tried to find a solution to this issue without luck.

Most of the solutions we found referred to Google Maps being embedded with an iFrame. Since this is not the case with TEC, we’re not too sure how to fix this.

Apparently Google Maps is known to cause some issues when it’s put inside a tab. It looks like we need to trigger the “google.maps.event.trigger(map, ‘resize’)” event.

We’ve tried to add this little script :

jQuery( document ).ready(function($){
    $( '#venue-tab' ).click(function(e){
            var center;
             
			center = map.getCenter();
 
			$( "#tribe-geo-map-wrapper" ).resize( function() {
				google.maps.event.trigger( map, "resize" );
				google.maps.event.addListener(map, 'idle', function() {
						   map.setCenter( center );
				});
			});
    });
});

We’ve tried with an alert and the script do fire when we click on the “Venue” tab, however the map still displays greyed out.

As soon as we click on “Full screen” and then press ESC, the map will be displayed and behave appropriately.

Any help would be greatly appreciated!

Kind regards,
Bastien

[Bastien Bournet-Charrier]

Note : The code was actually taken from this thread -> https://theeventscalendar.com/support/forums/topic/fixed-a-bug-map-centering-and-window-resizing/

[Andras]

Hey Bastien,

Thanks for reaching out!

I checked your site and in the console I saw an error and a warning. Here’s a screenshot of that.

Both of them are connected, the error with “map is not defined” seems to be the issue here. Likely you will need to adjust the jQuery snippet a bit to define the map somehow.

Does that help you move forward?

Cheers,
Andras

[Bastien Bournet-Charrier]

Hey Andras,

Thank you for the reply and information.

I had not set the Google Maps API key indeed so I did that.

However the jQuery error related to the resize script is more finicky. I fixed it, sort of, there’s no more error in the console but it’s not working.

Upon checking the code of the Venue tab, there is no “#tribe-geo-map-wrapper” identifier. I tried to change it to the class that wraps the venue map without luck.

When I resize the browser the map will start to display (although the centering is off) but I want to trigger that event the moment the person clicks on the tab.

The problem, I believe, is that the “map” var is not declared in our script but when I look inside tribe-events-ajax-maps.js it’s not really clear how to set this var :

var marker = {
	position: myLatlng,
	map     : tg.map,
	title   : title
};

Here’s the value of tg :
{"map":[],"geocoder":[],"geocodes":[],"bounds":[],"markers":[],"refine":false}

It doesn’t look good to me since there’s no data in here.

Here’s the value of tt :
{"pushstate":true,"webkit":true}

It looks like this condition fails to return a TRUE value :
if ( tt.map_view() )

This tt.map_view() indeed returns FALSE.

—

I have removed all conditionals as they doesn’t look necessary in our case. I’ve stripped down the script to only this :

jQuery( document ).ready(function($){
    $( '#venue-tab' ).click(function(e){
		var tg, map;
		tg   = tribe_ev.geoloc;
		map  = tg.map;
		google.maps.event.trigger( tg.map, "resize" );
		
		//alert(JSON.stringify(tg) + ", " + tg.map);
	});
});

If you would be able to put us on the right path to trigger the resize event properly that would be fantastic.

Waiting for your feedback and thank you for the help.

All best,
B

• This reply was modified 8 years, 6 months ago by Bastien Bournet-Charrier.

[Andras]

Hey Bastien,

Sorry to hear it still doesn’t work.

I will try to get someone to take a look at this, this is beyond my skills.

Also please note, this is beyond the scope of support that we normally provide for our plugins, thus it might take a couple of days until someone gets back to you on this. If you don’t receive an answer until next Monday, then ping me and I’ll check if there is any progress.

Thanks for your understanding and your patience!

Cheers,
Andras

[Bastien Bournet-Charrier]

Hey Andras,

Just following-up with you to see if you could have someone to take a quick look on this and maybe suggest a path of resolution. It seems to be a pretty common issue and hopefully someone already know the solution but unfortunately I can’t get my head wrapped around the concept of using APIs just yet and I’m not sure how to tackle at this issue.

Hope we can find a solution!

All best,
B

[Andras]

Hi Bastien,

Sorry for the silence, we got a bit busy. Nonetheless I managed to gather something you can try.

It looks like you have some code in place that does an alert() when the tab changes.

You could take advantage of that and once the venue tab is visible you could trigger this bit of JS:

jQuery( 'head' ).append(
'<script type="text/javascript" src="https://www.nexustickets.com/wp-content/plugins/the-events-calendar/src/resources/js/embedded-map.min.js"></script>'
);

So long as the venue tab is visible when that runs, it should magically make everything just happen.

Let me know if that helps you move forward.

Also, to let you know we have logged a ticket to improve our embedded-map.js to make it a little easier to resolve this kind of situation in future.

Cheers,
Andras

[Bastien Bournet-Charrier]

Hey Andras,

Thank you very much for the snippet. I had some troubles at first because it seems jquery has some issues with closing tags…

The only reason you can’t do $(‘<script></script>’) is because the string </script> isn’t allowed inside javascript because the DOM layer can’t parse what’s js and what’s html. You can even do $(‘<script><\/script>’) to get around that limitation – qwertymk Nov 23 ’14 at 22:55

I also changed the trigger code so that it would only fire once and not add a script on every click.

Here’s the final snippet :

jQuery( document ).ready(function($){
	$( '#venue-tab' ).one("click", function() {
		var tecscript = document.createElement("script");
		tecscript.src = '/wp-content/plugins/the-events-calendar/src/resources/js/embedded-map.min.js';
		$('head').append(tecscript);
	});
});

Pretty neat!

Thanks for help all along!

[Andras]

Awesome work Bastien! I’m happy we could help you out in getting this to work.

I am going to close this ticket for now, but if you need anything else related to this topic or another please create a new ticket and we’ll be happy to help.

Cheers,
Andras

PS: If you like our plugins, and you didn’t yet do so 🙂 we would be happy to receive a review in the wordpress.org repository. Thanks!
https://wordpress.org/support/view/plugin-reviews/the-events-calendar/
https://wordpress.org/support/view/plugin-reviews/event-tickets/

PS2: We’d be also grateful if you would give us feedback on your satisfaction with support. Just click on one of the classy looking emojis below. 🙂 If you can spare a few words, that’s even better. Doublethanks!

 

[Author]

Posts