谷歌地图在angularjs不加载并没有在JavaScript

Question

对谷歌荫回环与angularjs 1.x和所有的JavaScript库加载谷歌地图映射控制台错误，它没有显示在div标签

Answer 1

有你加入应该包含地图的div的宽度和高度。请找到我编写的下面的map指令，根据需要重新使用和修改。

它可用于像，

<map trip="latLongObj" on-create="controllerFunction()"></map>

和定义，

function map($window) { 
    return { 
     restrict: 'E', 
     scope: { 
      onCreate: '&', 
      trip: '=', 
      location: '@' 
     }, 
     link: function ($scope, $element) { 

      var DirectionsDisplay; 
      var DirectionsService = new google.maps.DirectionsService(); 

      function initialize(trip) { 
       DirectionsDisplay = new google.maps.DirectionsRenderer(); 

       var origin = {}, destin = {}; 

       if (!$scope.location) { 
        origin.lat = trip.origin.latitude; 
        origin.long = trip.origin.longitude; 

        destin.lat = trip.destination.latitude; 
        destin.long = trip.destination.longitude; 
       } else { 
        origin.lat = trip.location.latitude; 
        origin.long = trip.location.longitude; 
       } 

       var mapOptions = { 
        center: new google.maps.LatLng(origin.lat, origin.long), 
        zoom: 13, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        mapTypeControl: false, 
        streetViewControl: false 
       }; 


       var map = new google.maps.Map($element[0], mapOptions); 

       if (!$scope.location) { 
        DirectionsDisplay.setMap(map); 
        DirectionsService.route({ 
         origin: new google.maps.LatLng(origin.lat, origin.long), 
         destination: new google.maps.LatLng(destin.lat, destin.long), 
         travelMode: google.maps.TravelMode.DRIVING 
        }, function (response, status) { 
         if (status === google.maps.DirectionsStatus.OK) { 
          DirectionsDisplay.setDirections(response); 
         } else { 
          $window.alert('Directions request failed due to ' + status); 
         } 
        }); 
       } 

       $scope.onCreate({ map: map }); 
      } 

      $scope.$watch('trip', function (trip) { 
       if (trip) { 
        initialize(trip); 
       } 
      }, true) 
     } 
    } 
} 

可以acheive，而无需一个观察者，并采用NG-如果在使用该指令确保有数据。