Today, while testing popover messages on my cordova/ionic app, I compiled the app and noticed that the maps weren't loading. Instead, only my custom "Loading map..." spinning icon kept showing.
Upon investigating further, I found that
var setMap = new google.maps.Map(document.getElementById("mapBody"), mapOptions) ;
was actually loading - as I was able to print setMap to the console.
I have a function that constantly checks for tilesloaded every 500ms in order to stop the spinner and allow the map to load naturally.
However,
google.maps.event.addListenerOnce(setMap,'tilesloaded', function() {..}This issue started happening simultaneously on iOS and Android without any changes to the mapping code.
code:
$scope.mapLoader = 0 ;
$scope.mapTrigger = 0 ;
function checkLoader() {
if ($scope.mapLoader == 0) {
//console.log(setMap) ;
if (setMap && $scope.mapTrigger == 0) {
console.log("setMap/mapTrigger") ;
console.log(setMap) ;
$scope.mapTrigger = 1 ;
google.maps.event.addListenerOnce(setMap,'tilesloaded', (function() {
////// it never makes it inside here, as the function never fires.
console.log("tilesloaded done") ;
$scope.mapLoader = 1 ;
$scope.$apply() ;
});
setTimeout(function() {
//console.log("Checking Loader") ;
checkLoader() ;
},500) ;
}
}
if ($scope.mapLoader == 0) {
checkLoader() ;
} else {
$scope.mapLoader = 1 ;
}
Even though set map is loading and it appears that the tilesloaded event is complete (as shown in the console log below), the addListenerOnce function isn't firing. This could explain why the map fails to load and the inner addListenerOnce function never gets triggered. Strangely, there are no errors or indications of issues in the console.
console.log output:
setMap/mapTrigger