구글지도(구글맵) 쉽게 사용하는 반응형 자바스크립트 함수
1. 먼저 https://www.google.com/maps/ 로 입방해서 아래의 과정을 거쳐 아이프레임 코드를 복사합니다.

----------
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년 전 | 4434 | ||
| 2694 | 2개월 전 | 200 | ||
| 2693 | 2개월 전 | 157 | ||
| 2692 | 2개월 전 | 164 | ||
| 2691 | 2개월 전 | 179 | ||
| 2690 | 2개월 전 | 332 | ||
| 2689 | 2개월 전 | 243 | ||
| 2688 |
|
2개월 전 | 446 | |
| 2687 | 2개월 전 | 299 | ||
| 2686 |
선택과집중
|
2개월 전 | 336 | |
| 2685 | 3개월 전 | 298 | ||
| 2684 | 3개월 전 | 357 | ||
| 2683 | 3개월 전 | 488 | ||
| 2682 | 3개월 전 | 282 | ||
| 2681 | 3개월 전 | 308 | ||
| 2680 |
선택과집중
|
3개월 전 | 281 | |
| 2679 | 3개월 전 | 336 | ||
| 2678 |
|
3개월 전 | 434 | |
| 2677 |
|
3개월 전 | 506 | |
| 2676 | 3개월 전 | 332 | ||
| 2675 | 3개월 전 | 310 | ||
| 2674 |
선택과집중
|
3개월 전 | 486 | |
| 2673 |
|
3개월 전 | 326 | |
| 2672 | 3개월 전 | 343 | ||
| 2671 | 3개월 전 | 291 | ||
| 2670 | 3개월 전 | 265 | ||
| 2669 | 3개월 전 | 379 | ||
| 2668 | 3개월 전 | 295 | ||
| 2667 |
선택과집중
|
3개월 전 | 492 | |
| 2666 |
선택과집중
|
3개월 전 | 476 | |
| 2665 |
선택과집중
|
4개월 전 | 414 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기