I've been troubleshooting how to integrate Google Maps into a modal, but I keep encountering the error TypeError: Cannot read property 'offsetWidth' of null. I've gone through all the suggested solutions on various forums, and it seems that the issue could be because the modal doesn't exist when the page initially loads. I attempted using ng-init to load it when the modal appears, but I still face the same error. Interestingly, I discovered that the map controller runs when the main page loads instead of when the modal is displayed.
Controller
.controller('mapCtrl', function($scope) {
$scope.init = function() {
var myLatlng = new google.maps.LatLng(51.508742,-0.120850);
var mapProp = {
center: myLatlng,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map"),mapProp);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
$scope.map = map;
}
})
Modal
<ion-modal-view ng-controller="mapCtrl">
<ion-header-bar id="modalheader">
<h1 class="title"></h1>
<!-- button to close the modal -->
<button class="button icon ion-android-close" ng-click="closeModal();"></button>
</ion-header-bar>
<ion-content class="item-icon-right item-text-wrap" id="modal">
<ion-list id="modalitem">
<ion-item>
<!-- displays the larger view of the office address -->
<h1>{{office.LocationName}}</h1>
<p id="mdets">{{office.LocAddressLine1 + ", " + office.LocAddressLine2 + ", " + office.LocCity + ", " + office.LocCountryDescription + ", " + office.LocZipPostalCode}}</p>
<i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" ng-click="togglefav(office.id); $event.stopPropagation();"></i>
</ion-item>
</ion-list>
<!-- creates the map view from the json data -->
<div ng-init="init()">
<div id="map" style="width:500px;height:380px;"></div>
</div>
</ion-content>
</ion-modal-view>