Publish what you learn… I read it at Smashing Magazine and it gave me answers to all my doubts I had before about publishing:
Do I know enough? What if I make a mistake? What if my solution is not the best solution?
The article answered with:
- When you learn something, write about it, and don’t do it just to make money off it.
- Don’t be afraid to make mistakes.
- Teaching others will help you learn.
- Encourage collaboration by allowing a free flow of constructive comments.
- If you make a mistake, fix it.
So, today I finally figured out the solution to a problem I’ve been having for months.
For a new project I am using The Event Calendar Pro and I have put some of the content in Flowplayer JQuery Tabs to keep it nice.
The Venue information is hidden in the second tab, but while clicking it the Google Maps would not load. The problem was that the JQuery tabs tells the site to display:none that tab and it’s contents on body load.

I have read many forum posts about this issue and some people had solutions by changing the Google Maps from iFrame to something else, but since the Google Maps is generated by The Event Calendar plugin, those solutions did not help me.
Even the writer of the JQuery Tabs code could not help me.
Today I bumped into a forum posts of someone at jquerytools.org with a similar problem, who found the answer himself. I tried what he did, but it didn’t help. But after playing around I finally fixed it. This is what I added to my script.js
// -------- Event tabs --------
$("ul.tabs").tabs("div.panes > div");
$("ul.tabs").click(function() {
$("#pane2").css({'display':'block'});
$("#googlemaps").css({'width':'584px', 'height':'350px'});
initialize();
//alert('showMap Clicked!');
});
initialize();
My php file (events/single.php) looks like this:
<div id="tribe-events-event-meta" itemscope itemtype="http://schema.org/Event" name="location">
<dl>
<div></div>
<?php if(tribe_get_venue()) : ?>
<dt><?php _e('Venue:', 'tribe-events-calendar') ?></dt>
<dd itemprop="name"><?php echo tribe_get_venue_link(get_the_ID(), true); ?></dd>
<?php endif; ?>
<?php if(tribe_get_phone()) : ?>
<dt><?php _e('Phone:', 'tribe-events-calendar') ?></dt>
<dd itemprop="telephone"><?php echo tribe_get_phone(); ?></dd>
<?php endif; ?>
<?php if( tribe_address_exists( get_the_ID() ) ) : ?>
<dt><?php _e('Address:', 'tribe-events-calendar') ?><br /></dt>
<dd>
<?php echo tribe_get_full_address( get_the_ID() ); ?>
</dd>
<dt><?php _e('More:', 'tribe-events-calendar') ?><br /></dt>
<dd>
<?php echo tribe_get_venue_link( get_the_ID() ); ?>
</dd>
<dt>Link to Map</dt>
<dd><?php if( tribe_show_google_map_link( get_the_ID() ) ) : ?>
<a itemprop="maps" href="<?php tribe_the_map_link() ?>" title="<?php _e('Click to view a Google Map', 'tribe-events-calendar'); ?>" target="_blank"><?php _e('Google Map', 'tribe-events-calendar' ); ?></a>
<?php endif; ?></dd>
<?php endif; ?>
</dl><!--End column-->
<?php if( tribe_embed_google_map( get_the_ID() ) ) : ?>
<?php if( tribe_address_exists( get_the_ID() ) ) { echo tribe_get_embedded_map(); } ?>
<?php endif; ?>
</div><!--/ TAB 2 Location-->
Now the map looks like it should:

I hope my first coding posts will help someone…
This post is also available in: Dutch



English
Dutch