AngularJs経由でGoogleマップを読み込むことができません

Question

私は自分のhtmlでGoogleマップを表示したいと思います。ここに私のコードは次のとおりです。

HTML：

<div class="map-content"> 
     <div map-marker="" ng-model="searchLocation" class="mapmarker"></div> 
    </div> 

JS：

app.directive('mapMarker',function(){ 
    return { 
     restrict: 'EA', 
     require: '?ngModel', 
     scope:{ 
      searchLocation: '=ngModel' 
     }, 
     controller: function ($scope) { 
      $scope.searchLocation = { 
       latitude: 48.137273, 
       longitude: 11.575251 
      }; 
     }, 
     resolve: { 
      load: function() { 

      } 
     }, 
     link: function(scope , element, attrs , ngModel){ 

      var mapOptions; 
      var googleMap; 
      var searchMarker; 
      var searchLatLng; 

      ngModel.$render = function(){ 

       searchLatLng = new google.maps.LatLng(scope.searchLocation.latitude, scope.searchLocation.longitude); 

       mapOptions = { 
        center: searchLatLng, 
        zoom: 12, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       googleMap = new google.maps.Map(element[0],mapOptions); 

       searchMarker = new google.maps.Marker({ 
        position: searchLatLng, 
        map: googleMap, 
        draggable: true 
       }); 

       google.maps.event.addListener(searchMarker, 'dragend', function(){ 

        scope.$apply(function(){ 
         scope.searchLocation.latitude = searchMarker.getPosition().lat(); 
         scope.searchLocation.longitude = searchMarker.getPosition().lng(); 
        }); 
       }.bind(this)); 

      }; 

      scope.$watch('searchMarker', function(value){ 
       var myPosition = new google.maps.LatLng(scope.searchLocation.latitude, scope.searchLocation.longitude); 
       searchMarker.setPosition(myPosition); 
      }, true); 
     } 
    } 
}); 

また、私はそれがSを知っている

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

が含まれますcriptファイルではありませんが、私のHTML上にマップを表示することはできません。なにか提案を？

Answer 1

少し修正してみると、例：see my plunkrが動作します。

angular 
    .module('app', []) 
    .directive('mapMarker',function(){ 
    return { 
     restrict: 'EA', 
     scope:{ 
      searchLocation: '=mapMarker' 
     }, 
     controller: function ($scope) { 
      $scope.searchLocation = { 
       latitude: 48.137273, 
       longitude: 11.575251 
      }; 
     }, 
     link: function(scope , element, attrs , ngModel){ 
      var mapOptions; 
      var googleMap; 
      var searchMarker; 
      var searchLatLng; 

      searchLatLng = new google.maps.LatLng(scope.searchLocation.latitude, scope.searchLocation.longitude); 

      mapOptions = { 
       center: searchLatLng, 
       zoom: 12, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      googleMap = new google.maps.Map(element[0], mapOptions); 

      searchMarker = new google.maps.Marker({ 
       position: searchLatLng, 
       map: googleMap, 
       draggable: true 
      }); 

      google.maps.event.addListener(searchMarker, 'dragend', function(){ 
       scope.$apply(function(){ 
        scope.searchLocation.latitude = searchMarker.getPosition().lat(); 
        scope.searchLocation.longitude = searchMarker.getPosition().lng(); 
       }); 
      }); 

      scope.$watch('searchMarker', function(value){ 
       var myPosition = new google.maps.LatLng(scope.searchLocation.latitude, scope.searchLocation.longitude); 
       searchMarker.setPosition(myPosition); 
      }, true); 
     } 
    } 
    }); 

1. あなたはngModelは必要ありません。特にngModel。$ render。あなたの場合ではない入力のために必要です。
2. マップ用のコンテナには、初期サイズ：幅と高さが必要です。