60

TwitterBootstrapを使用してGoogleマップをモーダルに挿入しようとしています。モーダルは、存在するマップの形状とともに表示されますが、マップの一部のみが表示され、残りは灰色です。画面のサイズを変更すると、地図は常に正しく表示されますが、中央が間違っています。

地図のサイズ変更イベントを呼び出す、地図画像の最大幅をnoneに設定するなどの提案を検索して見つけましたが、これらの提案はこれまでのところ役に立ちませんでした。非表示になっている要素内にある限り、マップは正しいサイズを認識できないようです。

JS

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(51.219987, 4.396237),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapCanvas"),
    mapOptions);
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.219987, 4.396237)
  });
  marker.setMap(map);
}

HTML

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3></h3>
  </div>
  <div class="modal-body">
    <div id="mapCanvas" style="width: 500px; height: 400px"></div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
  </div>
</div>

TwitterBootstrapv2.0.4を使用しています。サイズ変更イベントを正しくトリガーできないか、Googleマップがそのままになるようにcssを編集していないため、サポートが必要です。

4

11 に答える 11

110

Googleマップでは、動的要素内に配置されたときに「灰色」の領域が実際に表示されます（例：サイズ変更、フェードなど）。「サイズ変更」関数をトリガーするのは正しいです。この関数は、アニメーションが完了したら呼び出す必要があります（ Bootstrap3のイベントshown.bs.modalまたはBootstrap2のshown イベント）。

$("#myModal").on("shown.bs.modal", function () {
    google.maps.event.trigger(map, "resize");
});

Bootstrap 2では、次のことを行います。

$('#myModal').on('shown', function () {
    google.maps.event.trigger(map, "resize");
});

（ここmapで、はマップの変数名（詳細については、Googleマップのドキュメントを参照）、および#myModal要素のIDです）。

更新2018-05-22

MapMaps JavaScript APIのバージョン3.32の新しいレンダラーリリースでは、サイズ変更イベントはクラスの一部ではなくなりました。

ドキュメントには次のように記載されています

マップのサイズを変更すると、マップの中心が固定されます

  • フルスクリーンコントロールが中央を保持するようになりました。

  • サイズ変更イベントを手動でトリガーする必要がなくなりました。

ソース：https ：//developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize");バージョン3.32以降は効果がありません

于 2012-07-31T14:59:21.540 に答える
43

私にとっては、次のように機能します（Boostrap 3）：

$("#contact-modal").on("shown.bs.modal", function () {
    google.maps.event.trigger(map, "resize");
});
于 2013-09-27T10:19:56.560 に答える
38

地図を正しく中央に表示する

Bootstrap 3で動作するように、元の回答に基づいて行ったいくつかの変更を指摘したいと思います（モーダルの使用法について確認してください）。

// Resize map to show on a Bootstrap's modal
$('#map-modal').on('shown.bs.modal', function() {
  var currentCenter = map.getCenter();  // Get current center before resizing
  google.maps.event.trigger(map, "resize");
  map.setCenter(currentCenter); // Re-set previous center
});

この場合、最初の回答に対するJan-Henkのコメントで提案されたこの質問に基づいて、マップの再配置も行います。

于 2013-08-08T18:42:48.140 に答える
8

Bootstrap 3を使用する場合は、ドキュメントに記載されているものを使用する必要があります。つまり、「shown」の代わりに「shown.bs.modal」を使用します。

例：

 $('#modal').on('shown.bs.modal', function () { 
     initialiseMap();
 });
于 2013-11-05T15:11:57.937 に答える
5

受け入れられた答えは、実際、divの内容がローカルであるこの場合に機能します。残念ながら、リモートデータの一部として含まれている地図を表示するのと同じ問題が発生しました。マップのハンドルを取得してresizeを呼び出すと、マップが正しく中央に配置されませんでした。リモートデータの状況で問題を修正した方法は次のとおりです。

マップを初期化する関数を使用して、リモートデータの一部としてスクリプトタグを含めます

<script type="text/javascript">
    function renderMap() {
        var point = new google.maps.LatLng(51.219987, 4.396237);
        var map = new google.maps.Map(document.getElementById('map'), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 13,
            center: point
        });
        var marker = new google.maps.Marker({ position: point, map: map, icon: 'http://www.google.com/intl/en_us/mapfiles/ms/icons/red-dot.png' });
    }
</script>

メインページのダイアログの表示されたイベントで関数を呼び出します

<script type="text/javascript">

    $(document).ready(function () {
        $('#dlgReportInfo').on('shown', function () {
            renderMap();
        });
    })
</script>

このように、マップは、初期化する前にダイアログですでにサイズ設定されています。うまくいけば、これは同様の状況を持つ他の人を助けるでしょう。

于 2012-10-15T15:02:34.683 に答える
5

受け入れられた回答は灰色のボックスを取り除きましたが、マップを正しい座標の中央に配置していません。私の解決策は、モーダルの表示が終了するまでマップのレンダリングを待つことでした。

$('#modal').on('shown', function () {
    initialize();
});
于 2013-04-19T17:53:12.910 に答える
5

次のコードは、ブートストラップ3で完全に機能します

$("#mapModal").on("shown.bs.modal", function () {initialize();});
于 2014-04-27T01:06:40.907 に答える
4 
    this works for me 
    **<!-- Modal -->**
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Google Maps</h4>
                </div>
                <div class="modal-body">

                    <div id="map_canvas" style="width:auto; height: 500px;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


**Button**
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Map</button>

**javascript**
<script type="text/javascript">
    function initializeMap() {
        var mapOptions = {
            center: new google.maps.LatLng(51.219987, 4.396237),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(51.219987, 4.396237)
        });
        marker.setMap(map);
    }

    //show map on modal
    $('#myModal').on('shown.bs.modal', function () {
        initializeMap();
    });

</script>

これが役立つことを願っています

于 2015-05-26T00:29:12.503 に答える
3

私は解決策で修正しました：

$('#myId').on('shown.bs.modal', function () { 
    initializeMap() // with initializeMap function get map.
});

//モーダルブートストラップのイベントshown.bs.modalは、モーダルショーの前に呼び出されるため、show.bs.modalを使用せずにモーダルショーの後に発生します。

于 2015-07-28T05:30:48.910 に答える
1

これを試して ！

<div class="modal fade" id="map_modal" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body"><div id="map_canvas" style="width:530px; height:300px"></div></div>

    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->


var map = marker = new Array();
geocoder = NULL;


                    function addPoint(location, id, mapId) {
                        if (!marker[id]) {
                            marker[id] = new google.maps.Marker({
                                position: location,
                                map: map[mapId],
                                draggable: true
                            });
                        }

                    }


                    function placeMarker(location, editStr, id) {
                        if (!marker[id]) {
                            marker[id] = new google.maps.Marker({
                                position: location,
                                map: map[id],
                                draggable: false
                            });
                        }
                        marker[id].setPosition(location);
                        map[id].setCenter(location);
                        $("#longitud").val(location.lat());
                        $("#latitud").val(location.lng());


                    }


                    function  initializeMap(id, div_id, lat, lng, editStr) {
                        if (!geocoder)
                            geocoder = new google.maps.Geocoder();

                        if (!map[id]) {
                            var coordinates = new google.maps.LatLng(lat, lng);
                            var myOptions = {zoom: 8, center: coordinates, mapTypeId: google.maps.MapTypeId.ROADMAP}
                            map[id] = new google.maps.Map(document.getElementById(div_id), myOptions);
                            google.maps.event.addListener(map[id], 'click', function(event) {
                                placeMarker(event.latLng, editStr, id);
                            });

                            placeMarker(coordinates, editStr, id);

                        }
                    }


                    $('#map_modal').on('shown.bs.modal', function(e) {
                        initializeMap("#newMaps", "map_canvas", 10.444598, -66.9287, "");
                    })
于 2013-12-10T16:05:41.967 に答える
1

私も同じ問題に直面していますが、マップの「アイドル」状態（つまり、終了時）を待ってから、サイズ変更を呼び出すことで解決します。

 google.maps.event.addListenerOnce(map, 'idle', function () {
                 var currentCenter = map.getCenter();
                 google.maps.event.trigger(map, 'resize');
                 map.setCenter(currentCenter);

                 map.setZoom(15);
             });

後

              map = new google.maps.Map(document.getElementById('map-canvas2'),mapOptions);
于 2014-03-22T10:00:56.320 に答える