Загрузил Google Maps API v3 и распечатал карту Google в div. Но когда задана ширина & высота до 100% и автоматически, я не вижу карту.Установите Google Maps Container DIV ширину и высоту 100%
Это фрагмент кода HTML.
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
Есть ли способ исправить эту проблему?
Вы должны установить все родительские контейнеры в соответствии с шириной в 100%, если вы хотите, чтобы покрыть всю страницу с ним. Вы должны установить абсолютное значение по ширине и высоте для #content div, по крайней мере.
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
Что делать, если я хочу, чтобы карта отображалась на части сайта, а не на 100%? @Machiel – CodeGuru
@RainbowHat просто укажите размер в CSS, измените ширину и высоту вашего содержимого div #. – Machiel
Чтобы быть ясным, каждый родительский элемент из содержимого div (в коде OP это # map-canvas, а не #content) ** должен ** иметь определенную ширину/высоту, будь то относительный или точный. Сделайте это, и этот ответ правильный. – Will
Если div это единственное, что на вашей странице, установите:
body, html {
height: 100%;
width: 100%;
}
http://stackoverflow.com/questions/13926371/google-map-inside-container#comment19198810_13926371 – CodeGuru
Gmap записывает встроенное положение стиля относительно div. Перезапишите, что:
google.maps.event.addListener(map, 'tilesloaded', function(){
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
});
Надеюсь, это поможет.
Настройка карты Контейнер в положение относительно относительного трюка. Вот 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>
Протестировано во всех браузерах. Вот Снимок экрана.
Я боролся много, чтобы найти ответ.
Вам не нужно ничего делать с размером тела. Все, что вам нужно удалить встроенный стиль из кода карты:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.co.uk/maps?f=q&source=embed&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
удалить все строчный стиль и добавить класс или идентификатор, а затем стиль его так, как вам нравится.
Я только что добавил встроенный стиль.
<div id="map_canvas" style="width:750px;height:484px;"></div>
И это сработало для меня.
Очень мало людей понимают силу позиционирования css. Чтобы установить карту, чтобы занять высоту 100% от его родительского контейнера сделайте следующее:
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
Если у вас есть не абсолютно позиционируемые элементы внутри #map_canvas_container они будут задавать высоту его и карта возьмут точное доступное пространство.
Очень интересная техника. Некоторое время я был веб-разработчиком и не знал об этом. –
Жаль, что человек, который отказался от этого вопроса, никогда не удосужился сказать «почему?». ... отлично работает для меня – Chris
Это сработало для меня.
Вы можете установить высоту -webkit-заполняющая доступны
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
Эта работа для меня.
<!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>
Каков стиль элемента, который содержит div # gmap_canvas? – Machiel
'#content {background-color: #fff; border: solid 1px # a6a196; border-radius: 4px; -moz-border-radius: 4px; height: auto; overflow: hidden;} ' – BBKing