카카오맵 반응형 지도 플러그인

사용법 숙지 후 더 쉬워진 코드생성 방법 바로가기

https://sir.kr/g5_plugin/11861

----------

1. 예전 카카오맵을 자바스크립트 입력으로 공유한 것이 있긴 한데... 반응형이 아니다 보니 새롭게 손을 보았습니다. 더구나 게시글에서 표현하려면 용을 좀 써야 하는 점도 있었구요.

첨부파일을 다운로드 받아 그누의 플러그인 디렉토리 등 아무 디렉토리에나 올려줍니다.

http://wittazzurri.phps.kr/plugin/wittazzurri/map/kakaomap.php

파일을 열어보면 일단은 "맹탕"이니 아래 설명대로 따라하세요.

----------

2. pc 기준으로 카카오지도 페이지로 들어가서... https://map.kakao.com/

아래의 순서대로 2개의 값만 추출합니다.

----------

3. 이렇게 추출한 데이터 2개를 겟변수 map 에 * 으로 분기하며 대입합니다.

가로 세로 빈틈없이 꽉찬 카카오지도 페이지가 완성되며 이 페이지 자체가 반응형으로 기능합니다.

여길클릭

http://wittazzurri.phps.kr/plugin/wittazzurri/map/kakaomap.php?map=1669736880249*2csg4

----------

4. 원하는 게시글 내지는 내용관리 및 모든 페이지에 HTML 글쓰기로 아래의 아이프레임으로 걸어주세요.

src 만 입력하면 "땡"입니다.

물론 kakadomap.php 는 본인이 업로드한 파일의 절대경로를 넣어주셔야 합니다.

<iframe src="kakaomap.php?map=1669736880249*2csg4"></iframe>

----------

5. 일단 아이프레임의 기본 디폴트값 가로길이는 상위 엘리먼트의 100% 이며

세로길이는 그렇게 책정된 가로사이즈의 60%입니다.

이 세로사이즈 디폴트 퍼센트는 문서 최상단에

$default_map_height = 60; 로 정의되어 있으니 원하는 값으로 바꿔줍니다.

예컨대 다음의 방식 등으로 가로길이는 원하는 값을 줄 수 있습니다.

<div style="width:720px;margin:0 auto"><iframe src="kakaomap.php?map=1669736880249*2csg4"></iframe></div>

----------

6. 다음은 세로 퍼센트의 값을 겟변수에서 70으로 바꾸는 방법입니다.

<iframe src="kakaomap.php?map=1669736880249*2csg4*70"></iframe>

----------

7. 아래는 pc 에서는 50퍼센트로 모바일에서는 70퍼센트로 세로사이즈를 바꾸는 방법입니다.

<iframe src="kakaomap.php?map=1669736880249*2csg4*50*70"></iframe>

----------

8. 카카오나 유튜브 등 key 를 발급받아 만드는 컨텐츠는 그냥 체질적으로 싫어해서

무조건 괄호치기하고 넘어가는 사람이라 더 이상의 옵션은 본인들이 알아서 붙이시기 바랍니다.^^

php 는 7.2 버전 이상의 그누순정 5.5 이상만 확인하였습니다.

또한 반응형 API 가 공개되어 있지 않은 대상을 가지고 어거지 반응형으로 세팅하려고 뇌세포가 부패해가는 상황에서 잔대갈빡을 양껏 굴린 수고료(?)는 받아야 하겠기에 포인트 점수는 높은 편이니 이해하시길요.