-1

ウィザード形式で Google マップを作成したいのですが、マップが正しく読み込まれず、半分しか表示されません。サイズを変更してみましたが、地図がまだ完全に表示されません。ありがとう

<div class="row">
    <div class="col-sm-6">
        <div id="gmaps" style="width: 100%; height: 417px;"></div>
    </div>
</div>

ブートストラップレスポンシブを使用しました。

    $(function ()
{
    $("#wizard").steps({
        headerTag: "h2",
        bodyTag: "section",
        transitionEffect: "slideLeft"
    });
});


var map;
function initialize() {
   var mapOptions = {
   zoom: 8,
   center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('gmaps'),
  mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", resizingMap());
$('#wizard').on('changed.fu.wizard', function(){
    resizeMap();
});
function resizeMap(){
    if(typeof map == "undefined") return;
    setTimeout(function(){resizingMap();} , 400);
}
function resizingMap(){
    if(typeof map == "undefined") return;
    var center = map.getCenter();
    google.maps.event.trigger(map,"resize");
    map.setCenter(center);
}
4

1 に答える 1

0

マップはコンテナーのピクセル値を使用し、% は一部のケース/ブラウザーで機能しないと思います。

私は過去に次のようなことをしました：

マップが完全に読み込まれたら、親のサイズを使用してコンテナのサイズを更新します。

google.maps.event.addListenerOnce(map, 'idle', function(){
    // do something only the first time the map is loaded
});

詳細については、こちらをお読みください: Google マップが完全に読み込まれているかどうかを確認するにはどうすればよいですか?

于 2015-01-19T11:39:03.350 に答える