2
Эй, я использую ngMap, чтобы отображать компоненты карты Google. Теперь для очень простого примера я использую bootstrap и пытаюсь поместить карту Google на половину экрана, поэтому я даю ей col-lg-6.Как установить карты Google на 100% высоту в ngMap
Но, видимо, я получаю всегда ту же самую высоту, которая составляет 300 пикселей. Я хочу, чтобы компонент карты google был в высоте 100%, а не фиксированная высота (которая вообще не реагирует). Это код, который я говорю:
Вот это plunker проблемы: http://plnkr.co/edit/BQgMe5EQiFBmojgx45t5?p=preview
var app=angular.module('myapp', ['ngMap']);
app.controller('EventSimpleCtrl', ['$scope', '$timeout', function($scope, $timeout) {
var marker, map;
$scope.$on('mapInitialized', function(evt, evtMap) {
map = evtMap;
marker = map.markers[0];
});
$scope.centerChanged = function(event) {
$timeout(function() {
map.panTo(marker.getPosition());
}, 3000);
}
$scope.click = function(event) {
map.setZoom(8);
map.setCenter(marker.getPosition());
}
}]);.map .panel-body {
padding: 0;
}<html ng-app="myapp">
<head>
<link data-require="[email protected]" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="[email protected]" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="http://code.angularjs.org/1.2.25/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div ng-controller="EventSimpleCtrl" class="ng-scope">
<div class="row">
<div class="col-lg-6">
<!--<div class="panel panel-primary map">-->
<!-- <div class="panel-heading">Test</div>-->
<!-- <div class="panel-body">-->
<!-- <map zoom="4" center="-25.363882, 131.044922" on-center-changed="centerChanged()">-->
<!-- <marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"></marker>-->
<!-- </map>-->
<!-- </div>-->
<!--</div>-->
</div>
<div class="col-lg-6">
<map zoom="4" center="-25.363882, 131.044922" on-center-changed="centerChanged()">
<marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"></marker>
</map>
</div>
</div>
</div>
</body>
</html>
Пожалуйста, помогите мне ..... – Brk