Google Maps iframe not showing dropped pins centered - google-maps

Question

I am trying to add two maps to my website, each with two drop pins. Users can switch between the two maps by clicking on tabs. I built the two maps using the Google Maps Engine. The first map appears great, zoomed in to the right amount and showing the two pins. However, the second map is totally off. I tried doing what was suggested in this previous question Marker not centering in iframe for google map but 1) it was still off and 2) I was unable to add a second pin to the map (plus the map did not look as nice as the iframe I embedded directly on to the site).
Here is the JsFiddle: http://jsfiddle.net/SbH3Y/5/
Google Maps iframes:
<iframe src="http://mapsengine.google.com/map/embed?mid=zzFoZgN4yc_E.kT_V1HoEUMHs" width="461" height="350" scrolling='no' marginheight='0' marginwidth='0'></iframe>
Thanks

Answer 1

You need to reload the iframe in the 2nd tab when it gets selected. The best would be when you initially have an empty iframe and set the src at the first time the tab will be selected.
simple reloading of the frame would be easy:
$('#pickup-date2').show(0,function(){
$('iframe',this)
.attr('src','http://mapsengine.google.com/map/embed?mid=zzFoZgN4yc_E.kT_V1HoEUMHs');
});
http://jsfiddle.net/doktormolle/jUVuB/
But this would reload the iframe each time you select the tab.
Better approach:
the iframe:
<iframe src="about:blank"
data-src="http://mapsengine.google.com/map/embed?mid=zzFoZgN4yc_E.kT_V1HoEUMHs"
width="461" height="350"></iframe>
As you see the map initially will not be loaded, the src is blank and the URL of the map is stored in the data-src-attribute
the script:
$('#pickup-date2')
.show(0,function(){
//when the iframe has data-src
if($('iframe',this).data('src')){
$('iframe',this)
//set the src-attribute
.attr('src',$('iframe',this).data('src'))
//and set data-src to null,
//so the iframe will only be reloaded on the first click
.data('src',null);
} });
http://jsfiddle.net/doktormolle/tWCUR/