Best IT Recipes

Set Google Maps Container DIV to Width and Height 100%

I downloaded the Google Maps API v3 and printed the google map in a div . But when the width and height are set to 100%, and auto, I do not see the map.

Here is a snippet of HTML code.

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

Is there any way to fix this problem?

+56
css google-maps google-maps-api-3 css-position google-maps-api-2
Apr 18 2018-12-12T00:
source share
12 answers

You must set 100% width for all parent containers if you want to cover the entire page. You should set the absolute width and height for the #content div at least.

 body, html { height: 100%; width: 100%; } div#content { width: 100%; height: 100%; }
+64
Apr 18 2018-12-18T00:
source share

Setting the Card container to a position relative to a relative trick. Here is the 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 in all browsers. Here is a screenshot .

enter image description here

+40
Aug 09 '13 at 12:56 on
source share

Very few understand the power of css positioning. To set the card to occupy 100% of the height of its parent container, follow these steps:

#map_canvas_container {position: relative;}

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

If you have some not quite positioned elements inside #map_canvas_container, they will set the height and the map will occupy the exact available space.

+37
Oct 08 '14 at 2:58
source share

This is a job 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>
+2
Jan 03 '18 at 8:02
source share

Gmap writes the string position of the style relative to the div. Overwrite this with

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

Hope this helps.

0
Feb 18 '13 at 11:01
source share

You can set the height in -webkit-fill-available

 <!-- Maps Container --> <div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
0
Aug 30 '17 at 9:26
source share

If you cannot influence the parent elements (as in the situation with nested components), you can use height: 100vh which will make it the height of the whole window (= view);

0
Oct. 25 '18 at 20:58
source share

Better late than never! I made my 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>
0
Apr 15 '19 at 22:15
source share

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

 body, html { height: 100%; width: 100%; }
-3
Apr 18 2018-12-12T00:
source share

I struggled to find the answer.

You really don't have 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 the whole inline style and add a class or id and then customize it the way you like.

-3
01 Oct '13 at 13:24
source share

It worked for me.

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

-5
Sep 14 '15 at 7:56
source share

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

-6
Nov 11 '13 at 9:45
source share


More articles:


All Articles