Googleマップがイオンモーダルに表示されない

Question

イオンマップでGoogleマップを表示しようとしていますが、表示されません。とてもうるさい。私のコントローラーとイオンモーダルの下。

$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

これは、HTMLテンプレートtemplates/mapmodal.htmlがロードされる前$cordovaGeolocation.getCurrentPosition(posOptions).thenが実行されている可能性があります。そうすれば、document.getElementByIdを使って取得しようとしている要素はまだ存在しません。 htmlが読み込まれた後にコードを呼び出すようにしてください。また、マップを初期化するときにモーダルが既に表示されていることを確認するために、いくつかのタイムアウトを含めてください（あるいは、modal.shownイベントを見ることもできます）。

$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(); 
    }); 
}