Is it possible make a google map height 100% of the parent div?
I noticed that with the height 100%, the map is not visible, but if I add the height of the div with the map in pixel the map is correctly visualize.
is there some tricks to achieve the map 100% of the parent div?
this doesn't works
<div class="block halfrect">
<div id="map" style="height:100%;"></div>
</div>
this works
<div class="block halfrect">
<div id="map" style="height:590px;"></div>
</div>
any idea?
reference: Mike Williams' Google Maps Javascript API v2 tutorial page: Using a percentage height for the map div
If you try to use style="width:100%;height:100%" on your map div, you get a map div that has zero height. That's because the div tries to be a percentage of the size of the <body>, but by default the <body> has an indeterminate height.
There are ways to determine the height of the screen and use that number of pixels as the height of the map div, but a simple alternative is to change the so that its height is 100% of the page. We can do this by applying style="height:100%" to both the <body> and the <html>. (We have to do it to both, otherwise the <body> tries to be 100% of the height of the document, and the default for that is an indeterminate height.)
code snippet:
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="block halfrect" style="height:100%">
<div id="map" style="height:100%;"></div>
</div>
Related
I'm trying to display google maps and every time I use this
<div class="large-12 columns" id="map-canvas"></div>
The map is showing.It is working as it should.
but when I put this div in a "row" class
<div class="row">
<div class="large-12 columns" id="map-canvas"></div>
</div>
the map disappears.
This is the css
html{
height: 100%;
}
body{
height: 100%;
}
#map-canvas{
height: 100%;
}
height:100% will only work if parent's height is explicitly defined or if all the parents have height 100% till html tag.
I want to show a google map in this html div:
<div id="map">
</div>
html,
body,
#map {
position: absolute;
top: 0;
bottom: 0;
left:0;
height:100%;
width:100%;
}
Everything is okay and it shows a google map fit to screen, and I want it to show on the other div like this:
<div style="z-index:1;" align="center">
some thing this
</div>
But when I run my app, I just see the google map, how can I solve this? problem?thanks.
The z-index property only applies to positioned elements (i.e. elements which have the position property set to something other than static (which is the default, and what the div is set to).
I'm putting the control element above the div with my map and vertical scrollbar appears. Can anybody tell me how to put the elements one above the other, so that they will fill the entire height of the screen without vertical scrollbar?
<style type="text/css">
html, body, #map {
height: 100%;
}
#mySelector {
margin-top:10px;
width:400px;
}
#map {
margin-top:10px;
}
</style>
<select id="mySelector"></select>
<div id="map"></div>
The code:
http://jsfiddle.net/anton9ov/n3LshvLL
Here is updated fiddle - http://jsfiddle.net/n3LshvLL/5/
I have added overflow:hidden and given height:90% to map. Please not that, the moment you increase height more than 90% than it will create problem, as you are telling map to cover entire area.
I have set the google map to have a height of 85%. If the window is big enough it will have the proper size. But if the window is small it overlaps somehow.
Here some images
When window is big enough:
When window is smaller (no gray border at the bottom):
Some of the code. I use Bootstrap 3
HTML:
<div class="row full-height">
<div class="col-md-12 full-height">
<div class="map-container">
{{> googleMap name="map" options=mapOptions}}
</div>
</div>
</div>
CSS:
html, body, section, .mainpanel, .contentpanel { height: 100%; }
.full-height {
height: 100%;
}
.map-container {
width: 100%;
height: 85%;
position: relative;
}
I wish it would resize properly so it does not overlap.
Any help would be appreciated.
To achieve the effect you are after, you either must use JavaScript to size/resize the map div or use CSS positioning techniques.
I trying to use a Google Map as a full screen background to a web app I am developing. I have used a div to hold the map and so far I cannot seem to find a method to effectively make it full screen.
When using absolute positioning, I can get it to fill the browser window, however if there are scroll bars on the page, and I scroll down, the background does not fill the remaining space below the browser window.
I have also tried using fixed positioning but that doesn't seem to work either. It pushes the rest of the content under the background unless I wrap it all and position it absolutely over the top, but that still doesn't fix the scroll problem.
This is an idea of how I have it at the moment:
<body>
<div id="background"></div>
<div id="wrapper" class="grid-container">
<!-- Content -->
</div>
<footer>
<!-- Footer -->
</footer>
</body>
And the CSS:
#background {
position:absolute;
width:100%;
min-height:100%;
top:0px;
left:0px;
z-index:-1;
}
The reason I have the footer outside of the wrapper div is because I am using a sticky footer (http://www.cssstickyfooter.com/) and I am using a responsive grid system called Unsemantic (http://unsemantic.com/).
Any help would be greatly appreciated!
Thanks,
Aaron
You got to wrap the map in a div, and call the script the the header calling the div name class or ID. give the div 100% width and a height in css. if you want the exact window height call a jquery
$(document).ready(function(e) {
var hheight = $(window).height();
$('#map_canvas').css('height', hheight);
$(window).resize(function(){
var hheight = $(window).height();
$('#map_canvas').css('height', hheight);
});
});
<html>
<head>
<style>
#map_canvas {
width: 100%;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>