Google Map iframe in a tab issue

3 comments

1. 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.

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

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

   iframe {
       width: 100% !important;
   }
   

Comments are closed.