web-dev-qa-db-ja.com

モーダルボックスに埋め込まれたGoogleマップの一部に灰色のボックスが表示されます

モーダルボックスにv3APIを介してGoogleマップを埋め込む際に問題が発生しました。

モーダルが表示されると、マップキャンバスに灰色のボックスが表示されます。ブラウザウィンドウのサイズを変更したり、Web Inspectorを起動したりすると、すべてのマップタイルが表示されます。マップを「強制的に再レン​​ダリング」します。

マップ要素の親要素（section#map-modal、以下のコードを参照）には、ページの読み込み時にCSSにdisplay: noneが設定されています。 JSモーダルコードは、表示ボタンがクリックされると自動的にdisplay: blockを設定します。モーダル要素からdisplay: noneを一時的に削除すると、ページの更新時にマップが正しくレンダリングされます。グーグルマップは隠された親要素を持つのが好きではありませんか？

TwitterのBootstrapモーダルjQueryプラグインを使用しており、CSSでモーダル自体を制御しています。位置が固定されている、ピクセル幅があるなどです。異常なことは何もありません。

もちろん、私は解決策を探し回っていますが、resizeイベントをトリガーするGoogleAPIメソッドを多くの点で指摘しています。

google.maps.event.trigger(map, 'resize');

私は確かにそうしましたが、役に立ちませんでした。

関連コード： https://Gist.github.com/1591488

ご覧のとおり、39行目でイベントをトリガーしています。

（サイドバーの下部にある大きな地図を表示ボタンを押します）。

ファイル：

  • fagerhult.js
  • fagerhult.map.js
  • bootstrap-modal.js
  • master.css

私はすぐにそれに腹を立てるので、私はこれでどんな助けまたは余分な目でも深く感謝します。

javascriptgoogle-mapsgoogle-maps-api-3modal-dialog
18
Johan Brook

モーダルイベントハンドラーを使用してみてください。これは、プラグインを書き直さずにモーダルが表示された後にサイズを変更していることを確認するための最も簡潔な（そして正しい）方法だと思います。

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

更新：このソリューションではまだマップが適切に中央に配置されていないことに気付いたので、もう1つのコマンドを追加する必要がありました。

$('#map-modal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
  map.setCenter(new google.maps.LatLng(42.3605336, -72.6362989));
})
33
gabeodess

マップの親要素（モーダル）にdisplay: noneがあると、本当に混乱することがわかりました。どうなるか見ようと必死になってvisibility: hiddenに変更しましたが、うまくいきました！

また、モーダルが表示/非表示のときにモーダルをvisibility: visible/hiddenに設定するように、モーダルJSコードを変更しました。そうしないと、display: none/blockが再度設定され、灰色のボックスが再び作成されます。

7
Johan Brook

Bootstrap-modal.js v2.0の私のソリューション

modaldivの「invisible」のクラス「hide」を置き換えます

<div id="map_modal" class="modal fade invisible">
...
</div>

関数javascript

function open_map()
{   
   $('#map_modal').removeClass("invisible");
   $('#map_modal').modal('toggle');   
}

リンクhtml

<a href="javascript:open_map()">Open map</a>
4
falperez

ブートストラップを使用している場合は、「モーダル」クラスから「フェード」を削除する必要がありました。

から

<div class="modal fade"

に

<div class="modal" ...

私はgoogle.maps.event.trigger（map、 'resize'）;を呼び出して以前の解決策を試しました。しかし、それを理解しました

.on("shown.bs.modal" ...

呼び出されることはありませんでした。この問題は、フェードを取り除くことを私に指摘しているように見えました。
https://github.com/twbs/bootstrap/issues/1179

フェードは実際には非常に便利なので、これは最適なソリューションではありません...

3
mogile_oli

問題は、次のようなことをした場合です。

$("#mapModalLink").click(function(){
  google.maps.event.trigger(map,"resize");
});

サイズ変更イベントがトリガーされたときに、モーダルが開いていなかった（そして適切なサイズで表示されなかった）可能性があります。これを解決するには：

$("#mapModalLink").click(function(){
  $("#mapModal").show();
  google.maps.event.trigger(map, 'resize');
});

少なくとも私のために働いた:)

2
you786
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
     google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
          google.maps.event.trigger(map, 'resize');

     });
});
1
Mir Shakeel Hussain

この問題が発生し、drawメソッドへのコールバックを実行して解決しました。これは、ダイアログを表示するよりも早くマップを描画するために発生すると思います。

私はそれを解決するためにこのコードを使用しました（それはモーダルウィンドウではありませんでした）：

$('#map').show(function()
{
    var punto = new google.maps.LatLng(this.latitud, this.longitud);
    var myOptions = {zoom: 15, center: punto, mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControl:false, draggable:false};
    var map = new google.maps.Map(document.getElementById('mapa'),  myOptions);
    var marker = new google.maps.Marker({
    position:punto,
    map: map,
    title: this.nombre
});
});
1
khaz

Chrome JSライブ編集を使用して少し突っ込んだ限り、モーダルアニメーションを待つためにresizeの実行を遅らせることはうまくいくかもしれません:)

https://Gist.github.com/1592330#L107

0
Hiroaki Yamane

サイズ変更なしでマップが正常にレンダリングされました。

サイズ変更によって適切なマップが得られるのはなぜですか？

ブラウザがビューを再度ペイントするためです。

それを修正する方法は？

最近トリガーされたパネルでマップの適切なレイアウトを取得するには、パネルのロード後にマップをペイントする必要があります。これは、以下に説明する（setTimeout）コードによって実現できます。コードの目的は、60ミリ秒後にマップサイズ変更イベントをトリガーすることです。

setTimeout(function () {
        uiGmapIsReady.promise().then(function (maps) {
            google.maps.event.trigger(maps[0].map, 'resize');
            lat = -37;
            lon = 144;
            maps[0].map.panTo(new google.maps.LatLng(lat,lon));
            var marker = {
                id: Date.now(),
                coords: {
                    latitude: lat,
                    longitude: lon
                }
            };
            $scope.map.markers = [];
            $scope.map.markers.Push(marker);
            console.log($scope.map.markers);
        });
    }, 60);
0
Gyaneshwar Rao N