2
Hey ich benutze ngMap um Google Map Komponenten anzuzeigen. Jetzt für ein sehr einfaches Beispiel benutze ich Bootstrap und versuche, die Google Map auf die Hälfte des Bildschirms zu legen, daher gebe ich es Col-lg-6.Wie setze ich Google Maps auf 100% Höhe in ngMap
Aber anscheinend bekomme ich immer die gleiche Höhe, die 300px ist. Ich möchte die Google Map-Komponente in der Höhe von 100% und nicht eine feste Höhe (die überhaupt nicht reagiert). Dies ist der Code, die ich rede:
hier ein Plunker des Problems: 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>
mir bitte helfen ..... – Brk