0

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.

enter image description here

enter image description here

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.

Magnus
  • 17,157
  • 19
  • 104
  • 189
  • 1
    This looks 200% a resize issue and triggering a map resize should be the solution, unless you have some fancy CSS around that would cause this behavior. Have you tried with the `opened-changed` event instead of `app-drawer-transitioned`? – MrUpsidown Nov 02 '17 at 10:23
  • And maybe have a look here as well: https://github.com/PolymerElements/app-layout/issues/108 Might be that the docs are not fully up to date. Sorry I don't know app-drawer at all but that might help. – MrUpsidown Nov 02 '17 at 10:30
  • @MrUpsidown Figured it out - I was trying to trigger the event on the DOM-element instead of the API object. The `opened-changed` event didn't work btw, I guess it might be called before the drawer has finished opening/closing. – Magnus Nov 02 '17 at 11:57
  • Right, yes you have to call that on the map object itself. Glad you figured it out. And so you don't need the `setTimeout`, right? – MrUpsidown Nov 02 '17 at 12:40

1 Answers1

0

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>
Magnus
  • 17,157
  • 19
  • 104
  • 189