読者です 読者をやめる 読者になる 読者になる

ゆず日記

戦う Vimmer 兼 Dvorakユーザ 兼 Kinesisユーザ 兼 おぺらー が戦わないブログ

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

JavaScript jQuery

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