1

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

  • 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 Jan 2 '14 at 14:50
2

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.

  • Hi, Thanks for the response your explanation makes sense. I have put an id of itinerary-tab on the tab with the map. The only thing I'm not sure of is where to put the 'var iframe...' bit of the code? I've tried putting it in my main.js file with no success but i get a bit lost when it comes to javascript in WordPress. – Ciarán Jan 2 '14 at 14:17
  • add above code in "jQuery( document ).ready( function()". if still not coming then replace "$" with "jQuery". It should work. i've tested on your site using firebug tool – shahpranaf Jan 3 '14 at 11:35
  • Hi, I've tried putting it in the bottom of my main.js file after the last }); and I've put exactly what you have above with $ in place of jQuery. So I have jQuery( document ).ready( function(){code above here. I'm obviously missing some syntax but I've tried lots of different ways but can't get it working! Thanks for trying to help me and apologies for my lack of js knowledge – Ciarán Jan 3 '14 at 15:25
  • your id is not #itinerary-map. its #itinerary-tab. Use #itinerary-tab wherever #itinerary-map is used in above js – shahpranaf Jan 6 '14 at 5:13
  • Ah perfect I was sure I tried that but I obviously changed along with another change to make it work so thank you very much for helping with this! – Ciarán Jan 7 '14 at 17:31
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.