Skip to content

Instantly share code, notes, and snippets.

@nmccready

nmccready/dynamic-height.css

Created July 30, 2014 14:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nmccready/503e3d778852f7ab48f1 to your computer and use it in GitHub Desktop.
Save nmccready/503e3d778852f7ab48f1 to your computer and use it in GitHub Desktop.
Download ZIP
Example for html on angular google maps for having dynamic height.
Raw
dynamic-height.css
/*
let me google that for you (many ways to skin this cat)
http://stackoverflow.com/questions/10209704/set-google-maps-container-div-width-and-height-100 (implemented here)
http://stackoverflow.com/questions/2821596/100-height-with-fixed-footer-and-embedded-google-map
*/
body, html {
height: 100%;
width: 100%;
}
.angular-google-map-container {
height: 100%;
width: 50%;
position: absolute;
}
.middle {
display: table;
width: 50%;
margin-left: auto;
margin-right: auto;
}
/*
Use bootstraps container w/ some overrides, nice thing about this on bootstrap is there is
psuedo element with clearfix and display: table; , all after (which is why I know .middle works above)
*/
.container{
width: 50%;
padding-left: 0;
padding-right: 0;
}
Raw
dynamic-map-height.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/stylesheets/example.css">
<link rel="stylesheet" href="assets/stylesheets/dynamic-height.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.underscore.js"></script>
<script src="../dist/angular-google-maps.js"></script>
<script src="assets/scripts/controllers/dynamic-map-height.js"></script>
<title>Map</title>
</head>
<body>
<div data-ng-controller="ctrl" class="middle">
<google-map id="map"
center="map.center"
pan="map.pan"
zoom="map.zoom"
draggable="true"
refresh="map.refresh"
options="map.options"
events="map.events"
bounds="map.bounds">
<map-control template="clear.tpl.html" position="top-right" index="1" controller="mapWidgetCtrl"></map-control>
<nggmap-free-draw-polygons polygons="map.polys" draw="map.draw" ></nggmap-free-draw-polygons>
</google-map>
<ul>
<li ng-repeat="p in map.polys">{{p.getPath()}}</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment