Angular Google Maps second

Question

There are answers to this problem but they don't work on my current situation.

1. solution 1: resize.

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

The resize redraws the map but it doesn't center, the center gets moved to the top left corner.

I tried to also put another event trigger like ...trigger(map, 'center') without success.

2. ng-if and refresh=true don't work at all, the map is not rendered as before.

3. other questions seem to be solved by using angular ui (not quite sure what they meant by this) but this is based in angular material.

Thanks to all for the help.

When using angular google maps 2.0.19 and angular material, a Google Map displays properly the first time it loads. But if the user clicks on a different state and then comes back, without reloading, of course, it only displays a corner of the original map.

Notice on the left the angular material look and on the right the empty space in darker gray, where the rest of the map should show.

The configurations is pretty vanilla:

 <ui-gmap-google-map draggable="true"
        pan="true"
        zoom="map.zoom"
        dragging="true"
        center="map.center"
        events="map.events"
        control="map.control"
        refresh="true">

And the loading from the controller also:

$scope.map = addressStore.setMap({lat: address.latitude,
                        lng: address.longitude}); 
 //...also loads other parameters.

In a previous project had the same problem with Angular UI but got solved with this command at the begining of the controller:

 google.maps.visualRefresh = true;

But then I moved to Angular Material in this app and the problem showed again.

Thanks in advance.