2026, 새로운 도약을 시작합니다.

구글지도(구글맵) 쉽게 사용하는 반응형 자바스크립트 함수

1. 먼저 https://www.google.com/maps/ 로 입방해서 아래의 과정을 거쳐 아이프레임 코드를 복사합니다.

3553550769_1669953954.6514.jpg

----------

2. 복사한 아이프레임을 아래의 코드에 대입해 주세요.

[code]

<div class="goole-map">
*****"복사코드"*****
</div>
<style>

.goole-map { box-sizing:border-box; }
.goole-map iframe { display:block; width:100%; height:100%; }
</style>
<script>
addEventListener("resize", gmSize = function() {
    gmHeight = screen.width < screen.height ? 120 : 60;
    for (gm of document.getElementsByClassName("goole-map")) gm.style.height = gm.offsetWidth * gmHeight / 100 + "px";
} );
gmSize();
</script>

[/code]

----------

3. 위에서 120 과 60 은 아이프레임의 가로 사이즈를 100 이라 놓고 책정된 세로의 퍼센트입니다.

첫번째 120 은 모바일 세로 모드이고 두번째 60 은 모바일 가로 모드와 pc 모드입니다.

모바일의 경우 가로 세로 모드 전환시 이 퍼센트는 즉각적으로 반영됩니다.

----------

4. 게시글에서는 view.skin.php 에서 본문 하단에 css 와 자바스크립트를 적어주고

게시글 본문에서는 <div class="goole-map">아이프레임</div> 을 html 모드에서 적용해 줍니다.

아이프레임의 화이트 리스트는 그누의 기본옵션으로 www.google.com/ 가 입력되어 있지만

혹시나 아이프레임이 먹통이 된다면...

그누루트/plugin/htmlpurifier/safeiframe.txt 에서 www.google.com/ 을 추가해 줍니다.

|

댓글 10개

좋은 팁 감사 합니다.
@들레아빠
아이고 제가 병신같은 짓을 해서 가로 세로 전환변수를 리사이즈 이벤트 바깥에 넣었네요.
변수를 리사이즈 함수 안에 넣어야 하는데... 소스 새로 고쳤으니 다시 확인하세요.ㅜㅠ
@비타주리 업데이트 감사합니다.
@들레아빠 감사합니다
감사합니다.
잘 활용하겠습니다.
@청구 감사합니다
좋은 정보 감사합니다.
@푸른산타 감사합니다
소스에 대한 업데이트도 해주시고, 유용한 팁 감사합니다.
@브러운아이 감사합니다

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

그누보드5 팁자료실

번호 제목 글쓴이 날짜 조회
공지 3년 전 조회 4,596
2741 2일 전 조회 86
2740 3일 전 조회 89
2739 1주 전 조회 200
2738 1주 전 조회 206
2737 1주 전 조회 171
2736 1주 전 조회 274
2735 3주 전 조회 276
2734 3주 전 조회 256
2733 1개월 전 조회 261
2732 1개월 전 조회 297
2731 1개월 전 조회 263
2730 1개월 전 조회 220
2729 1개월 전 조회 349
2728 1개월 전 조회 241
2727 1개월 전 조회 417
2726 1개월 전 조회 250
2725 1개월 전 조회 325
2724 1개월 전 조회 355
2723 1개월 전 조회 263
2722 1개월 전 조회 296
2721 1개월 전 조회 208
2720 2개월 전 조회 301
2719 2개월 전 조회 304
2718 2개월 전 조회 197
2717 2개월 전 조회 333
2716 2개월 전 조회 200
2715 2개월 전 조회 308
2714 2개월 전 조회 269
2713 2개월 전 조회 370
2712 2개월 전 조회 285
🐛 버그신고