埋め込み Google マップの座標がズレる場合のメモ。

Webサイトに Google マップを埋め込んでいたんだけど、何故かデフォルト座標がずれてハマったのでメモ。
原因は、要素が非表示の状態で Google マップの埋め込みHTMLが読み込まれていると発生するらしい。

どうやら、display: none; がダメ。

ダメな例

// HTMLソース

<div id='g-map'><iframe>コピペ部分</iframe></div>

// 外部JS(jQuery)

$(function(){
    $('#g-map').hide();

    $('#button').click(function(){
        $('#g-map').show();
    });
});

いい例

// HTMLソース

<div id='g-map'> </div>

// 外部JS(jQuery)

$(function(){
    $('#g-map').hide();

    $('#button').click(function(){
        $('#g-map').show().html('<iframe>コピペ部分</iframe>');
    });
});

簡単なブラウザ毎の挙動

ブラウザ	挙動
Google Chrome	△
Mozilla Firefox	×
Opera	○

なまじOperaだけまともに表示される所為で、原因の特定が困難に。
jQueryでお手軽デザインしていると尚更。

もしGoogle マップを埋め込んで座標がずれたら、埋め込む際に要素が非表示になってないか確認してみる価値はあるかと。