NG-マップがUI

Question

に部分的なマップを示している私は私がgetingていますなぜ知らないNGマップを使用して、画面の半分のUIをgetingが、フルのdivに

var app = angular.module('app', ['ngMap']); 
 

 
app.controller('ctrl', ['$scope', 'ngMap','$timeout', function($scope, ngMap,$timeout) { 
 
    NgMap.getMap().then(function(map) { 
 
    var center = map.getCenter(); 
 
    google.maps.event.trigger(map, "resize"); 
 
    map.setCenter(center); 
 
    }); 
 
    $timeout(function() { 
 
    NgMap.getMap().then(function(map) { 
 
     google.maps.event.trigger(map, 'resize'); 
 
    }); 
 
    }, 500); 
 
}]);

#ng-map { 
 
    width: 100% !important; 
 
    height: 100% !important; 
 
    position: absolute !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div map-lazy-load="https://maps.google.com/maps/api/js" id="ng-map" map-lazy-load-params="https://maps.google.com/maps/api/js?key=AIzaSyB4qnR0XX1tetbLUxSSLVWKi_E4WzGi1tk"> 
 
    <ng-map zoom="4"> 
 

 
    </ng-map> 
 
    </div> 
 
</div>

それをgetingておりませんこのエラー。助けてください

Answer 1

最初のことは間違った要素に設定していると思います＃ng-map div内の要素に設定する必要がありますCSSを変更してみてください）：

#ng-map ng-map{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 

その後、あなたが設定してみてください：

default-style="false" 

をごNG-MAPディレクティブで、また、インラインスタイルにしてみてください、ここでの例です：

<ng-map zoom="4" default-style="false"> 
</ng-map> 

そしてplunker： http://plnkr.co/edit/Qh2O0W?p=preview