Google Maps in modal not showed after two times open - Ionic

前端未结

关注

 2  618

I\'m created a Google Map in a modal view, once I\'m open that modal, the map was showed. Then, I clicked nav-back-button to go to main page. After that I tried to open the moda

相关标签:

2条回答

余生分开走

2021-01-22 01:54
Moving the code to a mainCtrl instead of HomeTabCtrl resolve the issue:

check this CodePen

HTML:
```
<body ng-controller="mainCtrl">
...
```
JS:
```
.controller('mainCtrl', function($scope, $ionicModal, $compile) {
// the code previously in HomeTabCtrl
}
```
I noticed that you are using an old version of Ionic and also old-style directives. Here is a version updated of Ionic app using Angular-google-maps:

http://plnkr.co/edit/n4Qr3OMcGIb5uU28xISU?p=preview
0 讨论(0)
发布评论:

提交评论
- 加载中...

难免孤独

2021-01-22 01:56

After almost 1 week sitting try to find the solution, finally I've got the answer.

All the code is same stated in the questions, but I'm only add this in my controller. Check it out

//Remove modal
$scope.$on('$destroy', function () {
    $scope.modal.remove();
});

//Set $scope.map to null
$scope.$on('modal.hidden', function () {
    $scope.$on('$destroy', function () {
        $scope.map = null;
    });
});

I'm also change the maps module code, I'm used $cordovaGeolocation. Below is full code for homeTabCtrl

Javascript: homeTabCtrl

 .controller('HomeTabCtrl', function($scope, $ionicModal, $cordovaGeolocation) {

    $ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
        $scope.modal = $ionicModal;
    }, {
        scope: $scope,
        animation: 'slide-in-up'
    });  

     $scope.showMap = function (){
        var options = {
           timeout: 10000,
           enableHighAccuracy: true
        };

        $cordovaGeolocation.getCurrentPosition(options).then(function (position) {

          var latLng = new google.maps.LatLng(lat, lng);

          var mapOptions = {
             center: latLng,
             zoom: 15,
             mapTypeId: google.maps.MapTypeId.ROADMAP
          };

          $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);

          google.maps.event.addListenerOnce($scope.map, 'idle', function () {

            var marker = new google.maps.Marker({
                map: $scope.map,
                animation: google.maps.Animation.DROP,
                position: latLng
            });
        });

        }, function (error) {
           alert("Could not get location");
        });
    };

    $scope.openModal = function(){
      $scope.modal.show();
      $scope.showMap();
    };

    //Remove modal
    $scope.$on('$destroy', function () {
        $scope.modal.remove();
    });

    //Set $scope.map to null
    $scope.$on('modal.hidden', function () {
        $scope.$on('$destroy', function () {
            $scope.map = null;
        });
    });
});

0 讨论(0)