Вопрос по css, google-maps-api-3 – Установите ширину и высоту DIV Google Maps Container 100%

55

Я загрузил Google Maps API v3 и распечатал Карту Google вdiv, Но когда установить ширину & amp; высота до 100% и авто я не вижу карту.

Вот фрагмент кода HTML.

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

Есть ли способ исправить эту проблему?

`#content {background-color: #fff; border: solid 1px # a6a196; border-radius: 4px; -moz-border-radius: 4px; высота: авто; переполнение: скрытый;} ` BBKing
Каков стиль элемента, который содержит div # gmap_canvas? Machiel

Ваш Ответ

11   ответов
-5

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

если вы хотите покрыть ими всю страницу. Вы должны установить абсолютное значение по ширине и высоте для #content div как минимум.

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

div#content {
  width: 100%; height: 100%;
}
Error: User Rate Limit ExceededmustError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0

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

Вам действительно не нужно ничего делать с размером тела. Все, что вам нужно, чтобы удалить встроенный стиль из кода карты:

<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>

удалите все встроенные стили и добавьте класс или идентификатор, а затем стилизуйте их так, как вам нравится.

2

    <!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>
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0

ть это с помощью:

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

Надеюсь, поможет.

-3

Если этоdiv это единственное на вашей странице, установите:

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

вложенными компонентами), вы можете использоватьheight: 100vh что сделает его полным окном (= вид) высотой;

40

тHTML.

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

И простойCSS.

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

Проверено на всех браузерах. ЗдесьScreenshot.

enter image description here

-6

Я просто добавил встроенный стиль.
<div id="map_canvas" style="width:750px;height:484px;"></div>
И это сработало для меня.

37

нимала 100% высоты своего родительского контейнера, сделайте следующее:

#map_canvas_container {position: relative;}

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

Если внутри #map_canvas_container есть какие-либо не совсем позиционированные элементы, они установят его высоту, и карта займет точно доступное пространство.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Похожие вопросы