지도를 반응형으로 넣는 방법문의 드립니다.
관련링크
본문
테마를 사용하고 있고요.(basic에서도 동일)
index.php 화면의 최신글 위에 카카오지도를 넣으려고 합니다.
지도를 넣다 보니 반응형으로 되지 않아서 반응형으로 만드는 방법을 문의 드립니다.
아래 처럼 <div>로 삽입되는 것으로 그누보드와 별개로 넣는것인데 방법이 있는지요?
고수님의 조언을 구합니다. 감사합니다.
<?php
define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/index.php');
return;
}
if(G5_COMMUNITY_USE === false) {
include_once(G5_THEME_SHOP_PATH.'/index.php');
return;
}
include_once(G5_THEME_PATH.'/head.php');
?>
<!--kakao map start-->
<div id="map" style="width:400px;height:200px; border: #EF1417 solid thick; "></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=855f8********"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(35.85824, 128.63060), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new daum.maps.Map(mapContainer, mapOption);
// 마커가 표시될 위치입니다
var markerPosition = new daum.maps.LatLng(35.85824, 128.63060);
// 마커를 생성합니다
var marker = new daum.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
var iwContent = '<div style="padding:5px;">Hello World! <br> <img src="img/gnu_icon.gif"> <a href="http://map.daum.net/link/map/Hello World!,35.85824, 128.63060" style="color:red" target="_blank">큰지도보기</a> <a href="http://map.daum.net/link/to/Hello World!,35.85824, 128.63060" style="color:blue" target="_blank">길찾기</a></div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwPosition = new daum.maps.LatLng(33.450701, 126.570667); //인포윈도우 표시 위치입니다
// 인포윈도우를 생성합니다
var infowindow = new daum.maps.InfoWindow({
position : iwPosition,
content : iwContent
});
infowindow.open(map, marker);
</script>
<!--kakao map end-->
<h2 class="sound_only">최신글</h2>
<!-- 최신글 시작 { -->
<?php
// 최신글
$sql = " select bo_table
from `{$g5['board_table']}` a left join `{$g5['group_table']}` b on (a.gr_id=b.gr_id)
where a.bo_device <> 'mobile' ";
if(!$is_admin)
$sql .= " and a.bo_use_cert = '' ";
$sql .= " order by b.gr_order, a.bo_order ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
if ($i%2==1) $lt_style = "margin-left:20px";
else $lt_style = "";
?>
<div style="float:left;<?php echo $lt_style ?>">
<?php
// 이 함수가 바로 최신글을 추출하는 역할을 합니다.
// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
echo latest('theme/test', $row['bo_table'], 5, 25);
?>
</div>
<?php
}
?>
<!-- } 최신글 끝 -->
<?php
include_once(G5_THEME_PATH.'/tail.php');
?>
답변 4
<div id="map" style="width:400px;
부분에서 width:100%;로 변경하시고,
div#map을 감싸는 부모 div 추가하셔서
해당 부모 div를 media로 분기하시면 됩니다.
!-->반응형의 기초는 @media 입니다.
검색해보시면 참고하실만한 자료가 많으실거에요.
가로100% 하시고 세로는 적당히 맞춰주셔도 되겠네요.
저도 보통 가로 100% 줍니다.
문제가 있을경우 모바일이랑 pc해서 따로 주는경우도있구여
if(G5_IS_MOBILE)