I have embedded a map on the third tab on a page.

Page here > 'Itinerary' tab

If you go straight to the tab while the page is still loading - it loads the map perfectly. However, if you wait until the page has fully loaded and then click on the tab 'Itinerary', the map loads totally zoomed out and not where it should be.

I have tried entering all the details like

<iframe src="" height="500px" width="100%" frameborder="0" .790716,4.166708&z=8&t=m&hl=en-GB&gl=US&mapclient=apiv3&skstate=action:mps_dialog$apiref:1&output=classic></iframe>

but it still won't work for me. I have very little knowledge of Javascript but I'm guessing that it needs to be reloaded on the tab or something to get it to zoom in.

I have embedded a map on the third tab on a page.

Page here > 'Itinerary' tab

If you go straight to the tab while the page is still loading - it loads the map perfectly. However, if you wait until the page has fully loaded and then click on the tab 'Itinerary', the map loads totally zoomed out and not where it should be.

I have tried entering all the details like

<iframe src="http://ridewithgps/routes/1342529/embed" height="500px" width="100%" frameborder="0" http://maps.google/maps?ll=43.790716,4.166708&z=8&t=m&hl=en-GB&gl=US&mapclient=apiv3&skstate=action:mps_dialog$apiref:1&output=classic></iframe>

but it still won't work for me. I have very little knowledge of Javascript but I'm guessing that it needs to be reloaded on the tab or something to get it to zoom in.

• javascript
• embed
• google-maps
• tabs

• Currently your google maps address is sitting in the middle of your iframe tag. It should take place of the src attribute, unless I'm missing something. – Eric Holmes Commented Jan 2, 2014 at 14:50

3 Answers 3

You are using iframe in tab structure.So,
1) When page loads fully, the iframe in itenary tab has display none. so it is not loading the zoomed map properly.
2) When you switch to itenary tab before loading completes, iframe is display block i.e visible so it loads the url/map properly.

So for this what you can do is give id to your iframe say "#itenary_map". and reinitiate iframe when itenary tab is clicked as below

var iframe = document.getElementById("itenary_map");
iframe.src = iframe.src;

Update:
You can use below jQuery code in your main.js.

jQuery('#section-tabs-header li:nth-child(3)').click(function() { //click on itenary tab


if( !jQuery( '#itenerary_map' ).find('iframe').hasClass('clicked') ){//Check if its clicked once or else will reload iframe on every click
        jQuery( '#itenerary_map' ).find('iframe').attr( 'src', function ( i, val ) { return val; });

jQuery( '#itenerary_map' ).find('iframe').addClass( 'clicked' ); // add any class to say its clicked
    }
});

You can modifiy above js, by giving classes or id to your iframe. I've written this in generalised form.

Excellent response - just ran into something similar and worked on it a bit more to make it even more generalized:

jQuery().ready(function($) {
    $('.tabs').tabs();
    $('.tabs li').not(':first').click(function() { 
        tab_id=$(this).children('a').attr('href');
        iframe_id=$(tab_id).children('iframe').attr('id');
        if (!$('#'+iframe_id).hasClass('clicked')) {
            $('#'+iframe_id).attr(  'src', function ( i, val ) { return val; });
            $('#'+iframe_id).addClass( 'clicked' ); // add a class to say its clicked
        }
    });
});

For me, what fix was add a default width style for all iframes in my page:

iframe {
    width: 100% !important;
}