This is an issue with google maps. I’m not aware of a fix for this and I’m not sure that a good solution is possible until the map is able to render at the correct size when it initially not visible.
Thread Starter
Leah
(@gezan)
Solved this by adding the iframe with jQuery when clicking on tab.
$('.entry-content').on('click','#tablist1-tab4',function(){
$( "#mapdivid" ).append( "<iframe src='your-map-url' width='760' height='570'></iframe>" );
});
Not sure this is the best way but works for me 🙂
Thanks for posting that Leah – it looks like an interesting approach.
I have a similar problem. How exactly should the iframe be added with jQuery? Where should I use the jQuery code snippet?
Thread Starter
Leah
(@gezan)
Hi mmanna,
Don’t know how familiar you are with WordPress but here’s how I do it:
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Thanks for the response, Leah! I can’t get this to work, though.
I successfully linked the jQuery script file to my WordPress site. The content of my .js file is the following:
jQuery(function($) {
$('.entry-content').on('click','#[tabby tab id] ',function(){
$( "#[map div id]" ).append("<iframe src='[map url]' width='780px' height='600px'></iframe>");
});
});
The div, which is of the same size as the map, remains blank. What could be the problem, any thoughts?
