Set Google Maps Container DIV width and height 100%

Question

I loaded Google Maps API v3 and print Google Map in div. But when set width & height to 100% and auto I can't see the Map.

Here is HTML code snippet.

<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>

Is there a way to fix this issue?

What is the style of the element that the div#gmap_canvas contains? — Machiel, Apr 18 '12 at 12:52
` #content{background-color:#fff;border:solid 1px #a6a196;border-radius:4px;-moz-border-radius:4px;height:auto; overflow:hidden;}` — BBKing, Apr 18 '12 at 13:00

score 70 · Accepted Answer · answered Apr 18 '12 at 13:14

70

You have to set all parent containers to a 100% width if you want to cover the whole page with it. You have to set an absolute value at width and height for the #content div at the very least.

body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%; height: 100%;
}

answered Apr 18 '12 at 13:14

Machiel

1,495
12
15

6

What if i only want the map to appear at part of the site and not 100%? @Machiel – CodeGuru Dec 18 '12 at 08:03
@RainbowHat simply specify the size in your CSS, change the width and height from your div#content. – Machiel May 14 '13 at 15:14
5

To be clear, every parent element from the content div (in the OP's code it's #map-canvas, not #content) **must** have a specific width/height set, whether it be relative or exact. Do this, and this answer is correct. – Sep 01 '14 at 18:34

score 47 · Answer 2 · answered Aug 09 '13 at 12:56

Setting Map Container to position to relative do the trick. Here is HTML.

<body>
    <!-- Map container -->
    <div id="map_canvas"></div>
</body>

And Simple CSS.

<style>
html, body, #map_canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map_canvas {
    position: relative;
}
</style>

Tested on all browsers. Here is the Screenshot.

enter image description here

score 39 · Answer 3 · edited Jun 20 '20 at 09:12

39

Very few people realize the power of css positioning. To set the map to occupy 100% height of it's parent container do following:

#map_canvas_container {position: relative;}

#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

If you have any non absolutely positioned elements inside #map_canvas_container they will set the height of it and the map will take the exact available space.

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 08 '14 at 14:58

CyberRobot

686
9
20

Very interesting technique. I've been a web dev for a while and wasn't aware of this one. – Lyn Headley May 24 '15 at 21:17
Too bad the person who downvoted this question never bother to say 'why?' ... Works great for me – Chris Mar 23 '16 at 13:43
Great technique. Never used it before and worked very well. – Gardner May 02 '18 at 21:21

score 3 · Answer 4 · answered Oct 25 '18 at 20:58

3

If you can't affect your parents elements (like in a nested components situation) you can use height: 100vh which will make it a full window (=view) height;

answered Oct 25 '18 at 20:58

YoniXw

425
5
12

what if you are using a grid layout? – Michael Oct 17 '20 at 20:28

score 2 · Answer 5 · answered Jan 03 '18 at 08:02

This Work for me.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 

#cont{
    position: relative;
    width: 300px;
    height: 300px;
}
#map_canvas{
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
</style> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
function initialize() {
    console.log("Initializing...");
  var latlng = new google.maps.LatLng(LAT, LNG);
    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
}
</script>
</head>

<body onload="initialize()">
<div id="cont">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>

Wow, something ACTUALLY worked for this issue. Incredible thank you! — Jonathan, Feb 01 '19 at 05:52

score 1 · Answer 6 · answered Aug 30 '17 at 09:26

1

You can set height to -webkit-fill-available

<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>

answered Aug 30 '17 at 09:26

Naresh Chennuri

1,133
11
10

score 0 · Answer 7 · answered Feb 18 '13 at 11:01

Gmap writes inline style position to relative to the div. Overwrite that with :

google.maps.event.addListener(map, 'tilesloaded', function(){
    document.getElementById('maps').style.position = 'static';
    document.getElementById('maps').style.background = 'none';
});

Hope it helps.

score -2 · Answer 8 · answered Apr 15 '19 at 22:15

Better late than never! I made mine a class:

.map
{
    position:absolute;
    top:64px;
    width:1100px;
    height:735px;
    overflow:hidden;
    border:1px solid rgb(211,211,211);
    border-radius:3px;
}

and then

<div id="map" class="map"></div>

score -3 · Answer 9 · answered Apr 18 '12 at 12:54

-3

If that div is the only thing on your page, set:

body, html {
  height: 100%;
  width: 100%;
}

answered Apr 18 '12 at 12:54

Juan G. Hurtado

2,057
16
25

http://stackoverflow.com/questions/13926371/google-map-inside-container#comment19198810_13926371 – CodeGuru Dec 18 '12 at 05:33

score -3 · Answer 10 · answered Oct 01 '13 at 13:24

I struggled a lot to find the answer.

You don't really need to do anything with body size. All you need to remove the inline style from the map code:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=new+york&amp;aq=&amp;sll=53.546224,-2.106543&amp;sspn=0.02453,0.084543&amp;ie=UTF8&amp;hq=&amp;hnear=New+York,+United+States&amp;t=m&amp;z=10&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=new+york&amp;aq=&amp;sll=53.546224,-2.106543&amp;sspn=0.02453,0.084543&amp;ie=UTF8&amp;hq=&amp;hnear=New+York,+United+States&amp;t=m&amp;z=10&amp;iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>

remove all the inline style and add class or ID and then style it the way you like.

score -5 · Answer 11 · edited Jun 20 '20 at 09:12

-5

This worked for me.

map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 14 '15 at 07:56

Vilas Chavan

1

score -7 · Answer 12 · answered Nov 11 '13 at 09:45

-7

I just added inline style .
<div id="map_canvas" style="width:750px;height:484px;"></div>
And it worked for me .

answered Nov 11 '13 at 09:45

Nikhil_K_R

2,383
5
27
51

Set Google Maps Container DIV width and height 100%

12 Answers12

map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

Linked