Google Map's "Only displaying top left tile", using gMaps.js in Angular JS

Question

I checked that there are checkresize() methods from google Map's native API.. but it doesn't seem to work with the refresh function from gmaps.js.

Does anyone has similar problems using AngularJS and gMaps.js? How do you come to solve it?

After i resize the window, the map appears again. So I am thinking is there anyway to check resize on initialization for gMap.js?

Answer 1

ng-cloak did not work for me when I tried it. I think this was because I am using the map in a panel which expands on user interaction instead of being visible on load.

I switched my ng-show to an ng-if and it worked correctly. This is because the map code(I used a directive) will not run until the if condition is true, which allows it to render properly.

*Sorry the fiddle got deleted. I don't remember what I had in it, but it was something like this
<gmap unique="231" center="{{getAddress(item)}}" destination="{{getAddress(item)}}" origin="{{getMyAddress(item)}}" type="roadmap" marker-content="Hello"></gmap>

The important thing is that the google scripts don't start doing their thing until your container element is actually displayed. This is accomplished with the ng-if.