jQuery UI TabsにGoogleMap埋め込むと表示位置ズレる

GoogleMapの地図を埋め込んでみたが、どうも初期の中心地がズレる。
原因を調べていたら、どうもjQuery UI Tabsの相性（？）の問題。

jQuery UIタブの中と外にそれぞれ同じiframeを埋め込んだのが下図。

タブ内の方はタブの分だけ（かな？）右下にズレてしまって、世田谷区じゃなくて目黒区になっている。
タブの外にあるのはA地点が中心に来ていて期待した位置。

対応方法を探す。iframeじゃなくて、マップAPIのようだけど、下記参考にみてみた。
Problems with Google Maps API v3 + jQuery UI Tabs - Stack Overflow

結論としては、iframeのsrcをrelに書き換えて、tabのshowでrelの値をsrcに設定することでズレは解消。

    $(function(){$('#tab').tabs({
            show:function(event, ui) {
                var rel = $(ui.panel).find('iframe').attr('rel');
                $(ui.panel).find('iframe').attr('src',rel);
            }
        })
     });

地図のあるタブに切り替えるたびに読み込み中になるのは、まぁ良しとする。