だんだんと寒くなってきましたね。村上です。

冬はイベント事が多いので大好きなんですが（笑）やっぱり寒いもんは寒い！ひやっこい！
乾燥もするから加湿器も買わなきゃなあと思いつつ、、まずはこたつかなあ。

そんなこんなで今回はタイトル通り、複数のGoogleマップを表示させる場合にJavaScriptのタブを使うと発生しまう問題。

わたしは普段、こちらのタブを使用しているのですが↓

タブ切替をサクッと実装：
http://archiva.jp/web/javascript/tab-menu.html


先日こちらのタブとGoogleマップ（埋め込み）を使って、
タブを切り替えると別のマップを表示させるというものを作っていたのですが



↓タブを切り替えると・・・


こんなかんじで表示させたい！


はずが････


実際は2個目以降のタブは上の図のようにずれて表示がされてしまいます。。マップ同士が干渉しているのかな...とにかくこまった！


調べてみるとこちらのサイトでは、原因がタブを切り替えるときの display:none;が影響しているのでは？と書かれています。。

また同サイトでこの問題の解消法が書いておりましたので、ご紹介させていただきます。


方法としては2通り。

方法 (1): iFrame の要素 REL に URL を埋込み、クリックファンクションで REL -> SRC に変換する

方法 (2): クリックファンクションで HTML を読み込んで表示する


ということで、実際に今回は　方法 (1)　を試してみました！


まず、Googleマップのソースの中の

<iframe width="578" height="250" ･･･src=（省略）

こちらのsrcをrelにします。


そしてあとはjsでクリックを押したときにrelがsrcに変わるようにすればOK。

例）
jQuery('#クリックするタブ').click(function(){
        var rel = jQuery('#クリックするタブのエリア').find('iframe').attr('rel');
        jQuery('#クリックするタブのエリア').find('iframe').attr('src',rel);
});


というかんじ。あーすっきり！



●参考サイト

・埋め込みGoogle マップの座標がズレる場合のメモ。
・jQuery UI TabsにGoogleMap埋め込むと表示位置ズレる
・埋め込みGoogleマップをdisplay: none;にすると座標がズレる件。