Having trouble displaying the google map in an ionic modal - it shows up fine on the page but not in the modal. Any help would be greatly appreciated, as this is quite frustrating. Below is my controller js and code for the ionic modal.
$ionicModal.fromTemplateUrl('templates/mapmodal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal4 = modal;
});
$scope.openmapModal = function()
{
$scope.modal4.show();
};
$scope.closemapModal = function() {
$scope.modal4.hide();
};
var posOptions = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 0
};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
console.log(lat);
console.log(long);
$ionicLoading.hide();
$scope.openmapModal();
//var jus = document.getElementById('map');
// var map;
$scope.initMap = function() {
var myLatlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
console.log('entered map');
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
draggable: true,
position: myLatlng,
map: $scope.map,
title: "Your location"
});
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("lat").value = event.latLng.lat();
document.getElementById("long").value = event.latLng.lng();
});
}
google.maps.event.addDomListener(window, "load", $scope.initMap());
});<ion-modal-view >
<ion-header-bar align-title="center" class="common-header">
<h1 class="title">Add address</h1>
<button class="button button-icon icon ion-close" ng-click="modal4.hide();"></button>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-dark">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</ion-modal-view>