Using gm map inside <md-content ng-view> renders with weird stripe

I am following the steps described in README for setting up the angularGM directives for use in my angular material project. I'm getting the gmap to display inside a <md-content ng-view> which (naturally) is dynamically populated on route changes. The map is fully functional, the only issue is that a weird stripe appears over the map which make is kind of ugly. I've had this issue with every other lib I've tried (http://jbdemonte.github.io/angular-google-maps-native/ & https://angular-ui.github.io/angular-google-maps/#!/) and with your plugin the problem is much less obvious so that's a good start!

I've tried triggering a resize event on the gmap but this didn't really solve it. When I'm placing the map outside the tag everything works as a charm. But when in there, things get nasty. Check screenshot for reference.

This is the empty tag where my templates get rendered:

   <md-content id="content" ng-view>
   </md-content>

the content of the template where I'm adding the map looks something like this:

<form name="propertyForm" ng-controller="PropertyController as propertyCtl"> 
    <h2>Pin to map</h2>
    <gm-map gm-map-id="'myMap'" gm-center="center" gm-zoom="zoom" gm-map-options="map">
     </gm-map>
    //more input fields here
</form>

dylanfprice / angular-gm

Using gm map inside <md-content ng-view> renders with weird stripe #84