Google Maps Container DIV 너비 및 높이를 100 % 설정
Google Maps API v3를로드하고 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%;
}
지도 컨테이너를 상대 위치로 설정하면 트릭을 수행 할 수 있습니다. 다음은 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>
모든 브라우저에서 테스트되었습니다. 다음은 스크린 샷 입니다.
CSS 포지셔닝의 힘을 깨닫는 사람은 거의 없습니다. 지도가 부모 컨테이너의 100 % 높이를 차지하도록 설정하려면 다음을 수행하십시오.
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
#map_canvas_container 내부에 절대 위치가 아닌 요소가있는 경우 요소의 높이가 설정되고지도는 사용 가능한 정확한 공간을 차지합니다.
이것은 나를 위해 일합니다.
<!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>
높이를 -webkit-fill-available으로 설정할 수 있습니다.
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
Gmap은 div를 기준으로 인라인 스타일 위치를 씁니다. 다음으로 덮어 씁니다.
google.maps.event.addListener(map, 'tilesloaded', function(){
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
});
도움이 되었기를 바랍니다.
중첩 된 구성 요소 상황에서와 같이 부모 요소에 영향을 줄 수없는 경우 height: 100vh전체 창 (=보기) 높이로 만드는 데 사용할 수 있습니다 .
안하는 것보다 늦게하는 것이 낫다! 내 수업을 만들었습니다.
.map
{
position:absolute;
top:64px;
width:1100px;
height:735px;
overflow:hidden;
border:1px solid rgb(211,211,211);
border-radius:3px;
}
그리고
<div id="map" class="map"></div>
이것이 div페이지의 유일한 경우 다음을 설정하십시오.
body, html {
height: 100%;
width: 100%;
}
나는 답을 찾기 위해 많은 노력을 기울였습니다.
몸의 크기로 아무것도 할 필요가 없습니다. 지도 코드에서 인라인 스타일을 제거하기 위해 필요한 모든 것 :
<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>
모든 인라인 스타일을 제거하고 클래스 또는 ID를 추가 한 다음 원하는 방식으로 스타일을 지정합니다.
이것은 나를 위해 일했습니다.
map_canvas {위치 : 절대; 상단 : 0; 오른쪽 : 0; 하단 : 0; 왼쪽 : 0;}
방금 인라인 스타일을 추가했습니다.
<div id="map_canvas" style="width:750px;height:484px;"></div>
그리고 그것은 나를 위해 일했습니다.
참고 URL : https://stackoverflow.com/questions/10209704/set-google-maps-container-div-width-and-height-100
'programing tip' 카테고리의 다른 글
| Rsync include 및 exclude 옵션을 사용하여 패턴별로 디렉터리 및 파일 포함 (0) | 2020.12.11 |
|---|---|
| AngularJS에서보기가 업데이트되지 않았습니다. (0) | 2020.12.11 |
| 작업 표시 줄 아이콘 크기 (0) | 2020.12.11 |
| MySQL 대 PostgreSQL? (0) | 2020.12.10 |
| Windows XP에서 MySQL 명령 줄 클라이언트를 통해 열린 MySQL 화면을 지우는 방법 (0) | 2020.12.10 |