Angular google map fill space

+1 vote
asked May 24, 2016 by curob

I am trying to use an Angular Google Map inside of a web application that is using Bootstrap for styling. Right now I am just trying to get a basic example working that shows a webpage consisting of a navigation bar and a google map (using Angular's ui-gmap-google-map element) that takes up all of the remaining space. However, I cannot get the Google Map to have anything other than a fixed height that does not account for the sizes of other elements on the screen.

Below is my code:

mapSandbox.html

<!DOCTYPE html>
<html ng-app="myApp" lang="en" ng-controller="myCtrl">
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Welcome</title> <!--CSS--> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#/"> BRAND GOES HERE </a> </div> </div>
</nav>
<!-- 'container-fluid' was an attempt to make the division use the full width -->
<div id="main" class="container-fluid"> <!-- THIS IS WHAT NEEDS TO FILL THE REMAINING SPACE --> <ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control"></ui-gmap-google-map> <h1>Other content here</h1>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script>
<script type="text/javascript" src="js/lodash.min.js"></script>
<script src="js/angular-google-maps.min.js"></script>
<script src="js/angular-simple-logger.js"></script>
<script src="js/mapSandbox.js"></script>
</body>
</html>

js/mapSandbox.js

// Initialize angular
var app = angular.module('myApp', ['uiGmapgoogle-maps']);
app.controller('myCtrl', function($scope) { $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
})
.config(function (uiGmapGoogleMapApiProvider) { uiGmapGoogleMapApiProvider.configure({ key: '{KEY IS HERE}', v: '3.22', libraries: 'weather,geometry,visualization' });
});

css/style.css

.angular-google-map-container { height: 100%;
}
html, body { height: 100%; width: 100%; margin: 0px;
}

I am aware that this is a really common question; however, none of the proposed fixes that I have work. I have looked at the following solutions and address my problem:

  • The official Angular tutorial indicates that something like .angular-google-map-container { height: 400px; } should be used. This is not what I want as this is a fixed size and does not fill the remaining space.
  • Using .angular-google-map-container { height: 100vh; } is close except it does not take into account anything else that is already there (like the navigation bar). As a result the entire page length becomes 100% of view height + the height of all other items (which results in a scroll bar).
  • Using .angular-google-map-container { height:100%; width:100%; position:absolute; top:0; left:0; } (see here) was the closest I got and looks like it does the right thing. However, under closer inspection it is clear that something is really screwed up and this is just a hack. For example, Chrome's inspection tools show that the divisions that contain the .angular-google-map-container (e.g. #main) have zero height even though their child (the map element in question) is huge. Also, the map takes up the entire webpage (the navbar appears to be given a z order that puts it on top of the map) instead of just taking up the remaining space.

I apologize if this is a stupid question, I find myself banging my head against everything in sight whenever I have to do any CSS work. Doing something similar with Swing, Android, etc. is so trivially easy that I would expect that there is a similarly easy way to do this here.

Here is a test for this.

2 Answers

0 votes
answered May 25, 2016 by seminull

Typically I've accomplished what I need with this:

html, body { height: 100%; font-family: Roboto, Arial, sans-serif;
}
#map-canvas { position: relative; height: 100%; width: 100%;
}
.angular-google-map-container { position: absolute; top: 0; bottom: 0; right: 0; left: 0;
}
<div id="map-canvas"> <ui-gmap-google-map></ui-gmap-google-map>
</div>
0 votes
answered Nov 8 by mosh-feu

You can achieve is by set the #main's position to absolute as the following code:

P.S. The one thing with a fix size is the top which is OK because the nav's height is fix in any resolution.

var app = angular.module('myApp', ['uiGmapgoogle-maps']);
app.controller('myCtrl', function($scope) { $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
})
.config(function (uiGmapGoogleMapApiProvider) { //uiGmapGoogleMapApiProvider.configure({ // key: '{KEY IS HERE}', // v: '3.22', // libraries: 'weather,geometry,visualization' //});
});
/* Styles go here */
html, body, .wrapper { height: 100%; width: 100%; margin: 0px;
}
.wrapper { display: flex; flex-direction: column;
}
#main { /*position:absolute; width:100%; bottom:0; top:51px;*/ flex-grow: 1; position:relative;
}
ui-gmap-google-map, .angular-google-map,.angular-google-map-container { position:absolute; top:0; left:0; width:100%; height:100%;
}
<!DOCTYPE html>
<html ng-app="myApp" lang="en" ng-controller="myCtrl"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Welcome</title> <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script data-require="lodash.js@*" data-semver="4.11.1" src="https://cdn.jsdelivr.net/lodash/4.11.1/lodash.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <script src="https://cdn.rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.min.js"></script> <script data-require="angular-google-maps@*" data-semver="2.0.11" src="//rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script> <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> </head> <body> <div class="wrapper"> <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#/"> BRAND GOES HERE </a> </div> </div> </nav> <!-- 'container-fluid' was an attempt to make the division use the full width --> <h1>Other content here</h1> <div id="main"> <!-- THIS IS WHAT NEEDS TO FILL THE REMAINING SPACE --> <ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control"></ui-gmap-google-map> </div> </div> </body>
</html>
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
...