AngularJs- TypeError: Невозможно прочитать свойство «широта» неопределенного

Question

Я хочу показать карту Google с помощью перетаскиваемого маркера на моей странице. Вот мой код:

header.php:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true"></script> 

map.js:

app.directive('mapDirective',function(){ 
    return { 
     templateUrl: 'map.html', 
     restrict: 'EA', 
     require: '?ngModel', 
     scope:{ 
      myModel: '=ngModel' 
     }, 
     link: function(scope , element, attrs , ngModel){ 
      var mapOptions; 
      var googleMap; 
      var searchMarker; 
      var searchLatLng; 
      scope.searchLocation = { 
       latitude: 48.137273, 
       longitude: 11.575251 
      }; 
      ngModel.$render = function(){ 
       console.log("hhh"); 
       searchLatLng = new google.maps.LatLng(scope.myModel.latitude, scope.myModel.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.myModel.latitude = searchMarker.getPosition().lat(); 
         scope.myModel.longitude = searchMarker.getPosition().lng(); 
        }); 
       }.bind(this)); 

      }; 

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

map.html:

<div> 
    <div style="display: block; height: 200px; width: 100%; "> 
    </div> 
</div> 

index.html:

<map-directive ng-model="testModel"></map-directive> 

На самом деле, я получил эту ошибку:

TypeError: Cannot read property 'latitude' of undefined 

Как решить эту проблему?

EDITED: Я меняю maps.js:

app.directive('mapDirective',function(){ 
    return { 
     templateUrl: '/app/user/ngApp/templates/libsView/templates/directives/map.html', 
     restrict: 'EA', 
     require: '?ngModel', 
     scope:{ 
      myModel: '=ngModel' 
     }, 
     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; 

      ngModel.$render = function(){ 
       console.log("hhh"); 
       searchLatLng = new google.maps.LatLng(scope.myModel.latitude, scope.myModel.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.myModel.latitude = searchMarker.getPosition().lat(); 
         scope.myModel.longitude = searchMarker.getPosition().lng(); 
        }); 
       }.bind(this)); 

      }; 

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

Но это не меняет.

Answer 1

переменная myModel должна содержать значения широты и долготы. который должен быть установлен от

<map-directive ng-model="testModel"></map-directive>

Вы должны создать объект, как показано ниже в контроллере и назначить этот объект Директива выше HTML.

var testModel = { 
    latitude:1.2323, 
    longitude:2.3434 
};