how to set google maps to 100% height in ngMap
Question
Hey I am using ngMap in order to display google map components. Now for a very basic example, I am using bootstrap and try to put the google map on half of the screen,therefore I give it col-lg-6.
But apparently I get always the same height which is 300px. I want the google map component to be in height of 100% and not a fixed height(which isn't responsive at all). This is the code which I am talking about:
Here is a plunker of the problem: 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="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> <script data-require="bootstrap@3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script data-require="jquery@2.1.3" 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>
1 answers
solution1
1 ACCPTED 2016-09-13 13:38:40
Don't worry. A problem = a solution.
css :
.map{width:100%;} .panel-body {width:100%;}
html :
<div ng-controller="EventSimpleCtrl" class="ng-scope">
<div class="container"></div>
<div class="row">
<div class="col-md-12">
<!--<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>-->
<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>
I hope I answered your question. I test it on your Plunker link and it's OK.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.