Google Map iframe in a tab issue

Question

Google Map iframe in a tab issue

Ciarán

2020年11月13日 19:49

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.com/routes/1342529/embed" height="500px" width="100%" frameborder="0" http://maps.google.com/maps?ll=43.790716,4.166708z=8t=mhl=en-GBgl=USmapclient=apiv3skstate=action:mps_dialog$apiref:1output=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.

Topic google-maps tabs embed Wordpress javascript

Category Web

Edmiel Leandro · Accepted Answer · 2020年11月13日 19:49

1

Edmiel Leandro answered at 2020年11月13日 19:49

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

iframe {
    width: 100% !important;
}

user3079356 · Accepted Answer · 2015年1月5日 06:01

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
        }
    });
});

shahpranaf · Accepted Answer · 2014年1月2日 14:46

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.

Google Map iframe in a tab issue

About