Webcomponents google-map displays gray area to the right after hiding app-drawer

Question

I have a <google-map> inside a <app-drawer-layout>, and it works fine except the map displays a gray area to the right when the drawer is hidden.

All the discussions I've found about this issue say that the solution is to trigger the resize event of the map, but it doesn't work for me. I even tried adding a delay just to be on the safe side, but still it does nothing.

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

The console output confirms that the map width has indeed changed before triggering the resize event, but the gray area persists. Even if I pan and zoom the map, the gray area is still there (although it becomes wider or narrower depending on the pan). The only thing that seems to correct it is resizing the entire browser window.

This is in Chrome on Mac btw.

Answer 1

Turns out that I was trying to trigger the resize event on the DOM-element instead of the Maps API object. The Maps API object can be obtained via the .map property of the <google-map> DOM-element.

This works for me

<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>