구글지도(구글맵) 쉽게 사용하는 반응형 자바스크립트 함수 정보
구글지도(구글맵) 쉽게 사용하는 반응형 자바스크립트 함수본문
1. 먼저 https://www.google.com/maps/ 로 입방해서 아래의 과정을 거쳐 아이프레임 코드를 복사합니다.
----------
2. 복사한 아이프레임을 아래의 코드에 대입해 주세요.
<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>
----------
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/ 을 추가해 줍니다.
!-->
추천
6
6
댓글 10개
좋은 팁 감사 합니다.
@들레아빠
아이고 제가 병신같은 짓을 해서 가로 세로 전환변수를 리사이즈 이벤트 바깥에 넣었네요.
변수를 리사이즈 함수 안에 넣어야 하는데... 소스 새로 고쳤으니 다시 확인하세요.ㅜㅠ
아이고 제가 병신같은 짓을 해서 가로 세로 전환변수를 리사이즈 이벤트 바깥에 넣었네요.
변수를 리사이즈 함수 안에 넣어야 하는데... 소스 새로 고쳤으니 다시 확인하세요.ㅜㅠ
@비타주리 업데이트 감사합니다.
@들레아빠 감사합니다
감사합니다.
잘 활용하겠습니다.
잘 활용하겠습니다.
@청구 감사합니다
좋은 정보 감사합니다.
@푸른산타 감사합니다
소스에 대한 업데이트도 해주시고, 유용한 팁 감사합니다.
@브러운아이 감사합니다