1

InfoBubbleと呼ばれる Google Maps API v3 でカスタマイズされた Info Window 実装を使用しようとしています。私はローカルで開発を行っていたので、Safari は泡をきれいにレンダリングしました。ただし、ライブサーバーにアップロードすると、バブルコンテンツの高さが正しく計算されなくなり、スクロールバーが表示されます (これは望ましくありません) ( http://luketilley.com/maps/を参照)。

いくつかの調査を行ったところ、問題は次のコードから発生しているようです。

InfoBubble.prototype.getElementSize_ = function(element, opt_maxWidth,
                                            opt_maxHeight) {
var sizer = document.createElement('DIV');
sizer.style['display'] = 'inline';
sizer.style['position'] = 'absolute';
sizer.style['visibility'] = 'hidden';


if (typeof element == 'string') {
  sizer.innerHTML = element;
} else {
  sizer.appendChild(element.cloneNode(true));
}

document.body.appendChild(sizer);
var size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);

// If the width is bigger than the max width then set the width and size again
if (opt_maxWidth && size.width > opt_maxWidth) {
  sizer.style['width'] = this.px(opt_maxWidth);
  size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
}

// If the height is bigger than the max height then set the height and size
// again
if (opt_maxHeight && size.height > opt_maxHeight) {
  sizer.style['height'] = this.px(opt_maxHeight);
  size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
}

document.body.removeChild(sizer);
delete sizer;
return size;
};

具体的には、次の行:

var size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);

サファリが報告する値を調査したところ、ページをローカルで表示する場合とオンラインで表示する場合で、サファリが実際に異なる値を報告することが確認されました。

さらにテストを行ったところ、情報バブルに画像を追加したときにのみ問題が発生することがわかりました (アフリカ沖のマーカーを確認してください)。

これがinfo_bubbleに入れようとしているコンテンツです

info_content = '<div class="bubble">' +
                            '<h1>' + markerData.name + '</h1>' +
                            '<div class="icons">' +
                            icon_html +
                            '</div>' +
                            '<img src="' + markerData.image + '"/>' +
                            '<p>' + markerData.description + '</p>' +
                            '<p><a target="_blank" href="' + markerData.url + '"><img src="learn_more.png"/></a></p>' +
                        '</div>';

ここで何が起こっているかについてのアイデアはありますか?必要なサイズを計算するより良い方法はありますか?

更新:これは Safari のバグである可能性があります。デバッガーでしばらく過ごしました。ブレークポイントを設定して関数を手動でステップ実行すると、正しい動作をしますが、そのまま実行すると、引き続き誤動作します。だから私は今質問だと思います:回避策はありますか?

4

0 に答える 0