I've found that if I leave my state caching set to true my google map works but if I set it to false then the map goes grey and I'm not able to get it back. How can I get around this while leaving cache:false ?
Here's a codepen example of my google maps issues. Make sure you navigate between home and map a couple of times to trigger the cache reset.
.state('tabs.map', {
url: "/map",
cache:false, // change to true and it works again
views: {
'map-tab': {
templateUrl: "templates/map.html",
controller: "MapCtrl"
}
}
});
It is probably because when view is not cached it takes a while to render and the entire view, controller gets instantiated before view is rendered completely in DOM. So possible that element selection does not happen properly. However if you wait till the next digest cycle (ex: using a timeout) problem seems to to have been solved.
$timeout(function(){
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
$scope.map = map;
});