0

重複の可能性：
ブラウザのサイズ変更に応じてGoogleマップのサイズを変更する

したがって、通常、js API を使用する Google マップは次のようになります...

ここに画像の説明を入力

ここで、開発者ツールを上げてページを更新し、開発者ツールを少し下げると、次のようになります。

ここに画像の説明を入力

したがって、ウィンドウのサイズが変更されたときにコントロールを再描画し、マップのサイズを変更する方法を知りたいです。ここでこのコードを試しました。でも仕方ない…

#map_canvas {width:100%;height:100%;position: absolute; top: 42px; left: 0; right: 0;
 bottom:0; z-index: 1; overflow: hidden; }
4

1 に答える 1

2

window.onresize イベントが発生したときに #map_canvas のスタイル属性を設定します。

window.onresize = function(event) {
    var style = document.getElementById('map_canvas').style;
    style.width = '100%';
    style.height = '100%';
    style.position = 'absolute';
    style.top = '42px';
    style.left = '0';
    style.right = '0';
    style.bottom = '0';
    style.z-index = '0';
    style.overflow = 'hidden';
    google.maps.event.trigger(map, 'resize');
    map.setZoom(map.getZoom());
}

上部の 42px を考慮した jQuery equiv

window.onresize = function(event) {
    var el = $("#map_canvas");
    el.css("position", "absolute");
    el.css("top", "42px");
    el.css("left", "0px");
    el.css("right", "0px");
    el.css("bottom", "0px");
    el.css("width", "100%");
    el.css("height", $("body").height() - 42);
    el.css("overflow", "hidden");
    google.maps.event.trigger(Maps.map, 'resize');
    Maps.map.setZoom(Maps.map.getZoom());
}
于 2013-01-11T23:16:27.820 に答える