Google Maps not showing in Ionic Modal

Question

I'm trying to show the google map in an ionic modal but it doesnt show up..but when i show it on page it shows up.Please i need some help regarding this.Its very annoying. Below in my controler js and 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>

Answer 1

It's possible that $cordovaGeolocation.getCurrentPosition(posOptions).then is being run before the HTML template templates/mapmodal.html is loaded. That way the elements you are trying to retrieve using document.getElementById don't exist yet. Try to call the code after the html is loaded. Also include some timeout to make sure the modal is already shown when initialising the map (alternatively you can watch for modal.shown event).

$ionicModal.fromTemplateUrl('templates/mapmodal.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal4 = modal;
      $scope.openmapModal();
      setTimeout(function(){//here!
          getPositionAndShowOnMap(); 
      }, 500);
    });

  $scope.openmapModal = function()
  {
     $scope.modal4.show();
  };

  $scope.closemapModal = function() { 
    $scope.modal4.hide();
  };     

function getPositionAndShowOnMap(){
    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.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();
            });
        };
        $scope.initMap();
    });
}