ウェブアプリのgoogle-mapは、アプリドロワーを隠した後、右にグレーの領域を表示します。

Question

は<app-drawer-layout>の中にあり、ドロワーが隠れている場合は地図の右側に灰色の領域が表示されます。

私はこの問題について発見したすべての議論は解決策は、マップのresizeイベントをトリガすることであると言うが、それは私のために動作しません。私はちょうど安全な側にいるために遅延を追加しようとしましたが、それでも何もしません。

document.querySelector('app-drawer').addEventListener('app-drawer-transitioned', function(){ 
    window.setTimeout(function(){ 
     console.log(map.clientWidth); 
     google.maps.event.trigger(map, 'resize'); 
    }, 100); 
}); 

コンソール出力は、resizeイベントをトリガする前にマップの幅が実際に変更されたことを確認しますが、グレーの領域は存続します。地図をパンしてズームしても、灰色の領域はまだそこにあります（ただし、パンに応じて幅が広がるか狭くなります）。唯一正しいことは、ブラウザウィンドウ全体のサイズを変更することです。

これはMac版Chromeのbtwです。

Answer 1

私はresizeイベントをMaps APIオブジェクトの代わりにDOM要素でトリガーしようとしていました。 Maps APIオブジェクトは<google-map> DOM要素の.mapプロパティで取得できます。

これは私のため

<script> 
    var mapElem = document.querySelector('google-map'); 

    mapElem.addEventListener('api-load', function(e) { 
     var mapObj = mapElem.map; 

     document.querySelector('app-drawer').addEventListener('app-drawer-transitioned', function(){ 
      google.maps.event.trigger(mapObj, 'resize'); 
     }); 
    }); 
</script>