Googleマップを非表示にする

Question

私はangularjsを使用していますが、Googleマップから地図を表示しているディレクティブを表示して削除するにはng-ifを使用していますが、そのディレクティブを削除して再度地図を表示するたびにロードしてグレーになります。誰もが任意のideiaを持っているか、この問題を解決する方法を知っていますか？

これは、アコーディオンコードです：

<uib-accordion close-others="oneAtATime"> 
     <uib-accordion-group ng-repeat="mission in missions" is-open="status.open"> 
      <uib-accordion-heading > 
       <div class="noOutline"> 
        <i class="fa fa-map-o fa-2x pull-left"></i> 
        {{mission.description}} 
        {{status.open}} 
       </div> 
      </uib-accordion-heading> 
      <missions-Map id='map' missionId='20' ng-if="status.open"></missions-Map> 
     </uib-accordion-group> 
    </uib-accordion> 

これは、ディレクティブコードです：

angular.module("dronesIntershipProject").directive('missionsMap', function() { 
var opened = false; 
return { 
    restrict: 'E', 
    template: "<div></div>", 
    replace: true, 
    link: function(scope, element, attrs) { 
     console.log(attrs.ngIf); 
     var myLatLng = new google.maps.LatLng(20,20); 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: -34.397, lng: 150.644}, 
      scrollwheel: true, 
      zoom: 8 
     }); 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      title: "My Marker" 
     }); 
     marker.setMap(map); 
     document.getElementById('map').removeAttribute("ng-if"); 
     console.log(element); 
    } 

} 

Answer 1

あなたはng-show代わりのng-ifを使用してみましたか？

ngIf documentation

状態：

ngIf指令は{式}に基づいて、DOMツリー の一部を除去またはを再現します。 ngIfに割り当てられた式が を偽の値に評価すると、その要素はDOMから削除されます。そうでない場合は、要素の クローンがDOMに再挿入されます。

マップを作成するときは、map要素にアタッチするが、それはngIfにより除去されると、それは単になくなっています。地図が再び表示されるように、地図を再作成する必要があります。

documentation for ngShow状態：

ngShowディレクティブショーやngShow属性に提供 式に基づいて与えられたHTML要素を隠します。要素は と表示され、CSSクラスの.ng-hideを削除または追加して 要素に表示されます。 ng-showを使用することにより

は、あなたが完全にng-ifのようなDOMから削除するのではなく、それは単にそれにCSSクラスを追加することにより、要素を隠しているので、あなたの目標を達成することができるようになります。