angularjs関数のGoogleマップAPIを初期化する

Question

Googleマップの初期化関数を関数から初期化しようとしていますが、関数の働きはマップを含む新しいdivタグを追加することです。 私は、関数内のコメント領域に書かれたコードを試しましたが、機能していませんが、関数外で動作しています。

app.controller('controller1', function($scope, $http, $window) { 

$scope.addMapPanel = function() { 

    var ref_div = angular.element(document.querySelector('#ref_div')); 

    var map_div = angular.element(document.querySelector('#map_div')); 

    if(map_div.length){ 
     console.log('exist'); 
    }else{ 
     console.log('doesnot'); 
     ref_div.append('<div class="col-md-6" id="map_div"></div>'); 
    } 

    /*$scope.initialize = function() { 
     var map = new google.maps.Map(document.getElementById('map_div'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', $scope.initialize);*/ 

    }; 
}); 

似たタイプの回答：How do I add google map in angular.js controller?

Answer 1

あなたはまだそのライブラリがロードされた後DomListenerコールにいくつかの機能を持っている必要があります。そこからdivが存在するかどうかを確認するだけです。そうでなければ、それを追加して、そのdivにマップを初期化する必要があります。

しかし、DOMの操作にはdirectivesを使用することをお勧めします。これは、ビューロジックがMVCアーキテクチャに存在する必要があるためです。さらに、再利用が可能です。

angular.module('app', []). 
 
controller('mapController', function($scope) { 
 
    $scope.initialize = function() { 
 
     
 
     var ref_div = angular.element(document.querySelector('#ref_div')); 
 

 
     var map_div = angular.element(document.querySelector('#map_div')); 
 

 
     if(map_div.length){ 
 
     var map = new google.maps.Map(document.getElementById('map_div'), { 
 
      center: {lat: -34.397, lng: 150.644}, 
 
      zoom: 8 
 
     }); 
 
     }else{ 
 
      ref_div.append('<div class="col-md-6" id="map_div"></div>'); 
 
      var map = new google.maps.Map(document.getElementById('map_div'), { 
 
      center: {lat: -34.397, lng: 150.644}, 
 
      zoom: 8 
 
     }); 
 
     } 
 
    }; 
 

 
    google.maps.event.addDomListener(window, 'load', $scope.initialize); 
 

 
});

#map_div { 
 
    width: 150px; 
 
    height: 150px; 
 
}

<div id="ref_div" ng-app="app" ng-controller="mapController"> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" 
 
    src="https://maps.googleapis.com/maps/api/js"> 
 
</script>