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

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/ 을 추가해 줍니다.