Google Map iframe in a tab issue

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.