web-dev-qa-db-ja.com

タブの問題でGoogleマップのiframe

ページの3番目のタブに地図を埋めました。

ページはこちら >「旅程」タブ

ページがまだ読み込まれている間にタブに直接移動すると、完全に地図が読み込まれます。ただし、ページが完全にロードされるまで待ってから[旅程]タブをクリックすると、マップは完全にズームアウトされ、本来の場所ではありません。

私はすべての詳細を次のように入力してみました

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

しかし、それでもまだうまくいきません。私はJavascriptについてはほとんど知識を持っていませんが、ズームインするためにはタブまたは何かにリロードする必要があると思います。

javascriptembedgoogle-mapstabs
1
Ciarán

タブ構造でiframeを使用しています。
1）ページが完全にロードされると、itenaryタブのiframeにはnoneと表示されます。そのため、ズームマップを正しくロードしていません。
2）ロードが完了する前にitenaryタブに切り替えると、iframeは表示ブロック、つまり表示されるので、URL /マップを正しくロードします。

ですから、あなたができることは、iframeに "#itenary_map"と言うidを与えることです。以下のようにitenaryタブがクリックされたときにiframeを再起動する


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

更新：
main.jsで以下のjQueryコードを使用できます。


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

IframeにクラスやIDを与えることで、jsより上で修正することができます。私はこれを一般化した形で書いた。

2
shahpranaf

優れた反応 - 似たようなものに遭遇し、さらに一般化するためにもう少し作業を進めました。

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