구글지도(구글맵) 쉽게 사용하는 반응형 자바스크립트 함수 > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

본문

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

 

3553550769_1669953954.6514.jpg

 

----------

 

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
  • 복사

댓글 10개


아이고 제가 병신같은 짓을 해서 가로 세로 전환변수를 리사이즈 이벤트 바깥에 넣었네요.
변수를 리사이즈 함수 안에 넣어야 하는데... 소스 새로 고쳤으니 다시 확인하세요.ㅜㅠ
© SIRSOFT
현재 페이지 제일 처음으로