Не удается загрузить карту Google через AngularJs

Question

Я хочу показать карту Google в своем html. Вот мой код:

HTML:

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

ЯШ:

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

Кроме того, я включаю

<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. Контейнер для карты должен иметь начальный размер: ширина и высота.