Check out this html code snippet that integrates a Google Map:
<div> Map :
<div ng-controller = "CreateNewEvent" id="map" style="width: 100%; height: 400px" data-tap-disabled="true" ng-init="initMap()"> </div>
</div>
This particular code block corresponds to the following AngularJS code:
// initialization of the map
$scope.initMap = function() {
$ionicLoading.show({
template: '<p>Loading...</p><ion-spinner icon="spiral" class="spinner-balanced"></ion-spinner>'
})
$scope.googleMap().then(function(results){
var latLng = results.latLng;
var map = results.map;
var marker = new google.maps.Marker({
position: latLng,
visible:true,
Map: map,
Icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' //personalize with icon
});
$timeout(function(){
alert('timeout')
$scope.$apply();
$ionicLoading.hide();
})
})
}
...
// More angular functions and methods continue...
The issue arises when the screen is initially loaded for the first time. It appears that the map is being loaded on the $scope of the previous screen, causing it to be missing when the current screen loads. However, upon refreshing the page, the map displays correctly. Could it be possible that 'document.getElementById('map')' is referencing the previous page before the refresh? Any insights?