카카오맵 반응형 지도 플러그인
사용법 숙지 후 더 쉬워진 코드생성 방법 바로가기
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 에 * 으로 분기하며 대입합니다.
가로 세로 빈틈없이 꽉찬 카카오지도 페이지가 완성되며 이 페이지 자체가 반응형으로 기능합니다.
[code]
http://wittazzurri.phps.kr/plugin/wittazzurri/map/kakaomap.php?map=1669736880249*2csg4
[/code]
----------
4. 원하는 게시글 내지는 내용관리 및 모든 페이지에 HTML 글쓰기로 아래의 아이프레임으로 걸어주세요.
src 만 입력하면 "땡"입니다.
물론 kakadomap.php 는 본인이 업로드한 파일의 절대경로를 넣어주셔야 합니다.
[code]
<iframe src="kakaomap.php?map=1669736880249*2csg4"></iframe>
[/code]
----------
5. 일단 아이프레임의 기본 디폴트값 가로길이는 상위 엘리먼트의 100% 이며
세로길이는 그렇게 책정된 가로사이즈의 60%입니다.
이 세로사이즈 디폴트 퍼센트는 문서 최상단에
$default_map_height = 60; 로 정의되어 있으니 원하는 값으로 바꿔줍니다.
예컨대 다음의 방식 등으로 가로길이는 원하는 값을 줄 수 있습니다.
[code]
<div style="width:720px;margin:0 auto"><iframe src="kakaomap.php?map=1669736880249*2csg4"></iframe></div>
[/code]
----------
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 가 공개되어 있지 않은 대상을 가지고 어거지 반응형으로 세팅하려고 뇌세포가 부패해가는 상황에서 잔대갈빡을 양껏 굴린 수고료(?)는 받아야 하겠기에 포인트 점수는 높은 편이니 이해하시길요.
댓글 55개
감사합니다.
공개해주신 지도관련 팁들은 흥미롭게 잘 보았던 기억도 다시 새롭습니다.
감사합니다.
onresize 를 튕길때마다 지도가 하나씩 더 만들어지는 좀 괴이한 현상(어찌보면 당연한 현상) 때문에
반응형 만드는게 좀 골치가 아프긴 했습니다.
그래도 자식창에서 부모창의 엘리먼트 사이즈를 핸들링하는 코드를 만드는 과정 자쳬가 재미있기도 했구요.
300포인트 냑에 바치고 다운로드,
그담에 추천한번 박고,
공수 인사,
m( _ _ )m 감사합니다. 잘쓰겠습니다~
하면 안되는군요 .. 그럼 세번!!
좋아요는 결과적으로 위와 같은 로직을 따릅니다.ㅋ
추천 감사합니다.
잘 쓰겠습니다.. 공유 감사합니다.
배포하시는 최신글 스킨은 항상 신선하고 쓰임새가 많아서 동기부여가 되곤 합니다.
감사합니다.
[http://sir.kr/data/editor/2310/45f5956c03ad43c083fdc8bc7d32bf78_1696941498_6131.gif]
항상 좋은 자료 공유해 주셔서 감사드립니다. 추천꾹! 좋은 하루되세요 ^^
감사합니다. 유용하게 사용하세요.
정말 원하던 기능입니다.
너무너무 감사합니다.
아직 사용은 안해봤습니다.
선리플, 후다운!
어이쿠 감사합니다.
좀더 쉬운 도우미 페이지를 만들어 볼까 생각중입니다.
아주 좋아요! 감사합니다.
잘 사용해볼께요! 추천 한방꾹!!
격려와 추천 감사합니다
질문하나 드립니다.
큰건 아니지만 지도의 오른쪽 하단에
로드뷰, 길찾기, 지도크게보기 가 있는데
저는 똑같이 했는데, 길찾기 하나만 나오는데
별도의 설정이 필요한가요?
변수 2개를 어찌 빼셨는지 줘 보시겠어요?
브라우저는 크롬으로 하신 건가요?
브라우저는 크롬입니다.
변수는 알려주신대로
다음지도에서
mapstamp 1697023482329
key 2gf2w
이렇게 두개로 입력했습니다.
http://wittazzurri.phps.kr/wittazzurri/kakaomap.php?map=1697023482329*2gf2w
저는 잘 나오는데 무엇이 문제일까요?
헐...
이상하네..
몇번을 시도해보아도
길찾기..하나만 나와요..ㅠㅠ
근데 전 이거로도 만족합니다 +_+
잘 쓰겠습니다
지금까지 주신것만도 너무 감사한데,
혹시 이것을 치환하면 좀더 간편하게 게시판에 적용가능할 것 같아서요.
https://sir.kr/qa/512548?stx=%EC%B9%98%ED%99%98&sst=wr_num&sop=and&unanswered=0&unadopted=0&adopted=0&s_tag=
현재 { 광고 } 라고 입력하면 저렇게 나타나게 표시중인데, 지도도 마찬가지로
{ 다음지도,1669736880249,2csg4,50,70, }
이렇게 입력하면
마치 iframe 에 위 값이 하나씩 들어가게 하려면 너무 어려운 부탁인가요?^^
그렇다면 죄송합니다 ㅎㅎ
있다 집구석에 가서
https://sir.kr/qa/513948
이거 코드 짜고 해 드릴게요.
컴퓨터 안끄고 기다리겠습니다 +_+
정말 감사합니다 +_+
{ 광고 } 이거를 적용하고 있어서
추가적으로 좀 필요할 것 같아서요 +_+염치..ㅜㅜ
감사합니다.!!!!
mapUrl 은 본인 문서의 url 을 넣고
괄호안의 쉼표와 문자사이에는 띄워쓰기없이 붙여쓰기로 구성하세요.
script 부분을
view.skin.php 의 view-content 아래에 넣어주었고,
게시글 작성 누르고
{다음지도,1697028647015,2gf3f,100,100}
이렇게 작성하였는데,
게시판 내용이 아무것도 안나타나요.ㅠㅠ
또한 script 아래의 내용 footer 포함 내용이 하나도 안나타나요 ㅠㅠ
혹 그누순정 아니고 딴 거 쓰셈?
view-content 가 id 인가요 class 인가요?
아차차...그걸 말씀을 안드렸군요...
일단 view-content 는 class 입니다.
아미나 빌더를 이용중에 있습니다...
"body" 2개를 ".view-content" 로 모두 바꿔보셈
그래도 안 되면 수가 없습니다.
제가 분명 그누순정 5.5 이상에 php 는 7.2 이상이라 했는데 본문을 독해하지 않으시네요...
이리 되면 지니아이님이나 저나 모두 수렁으로 빠집니다.
정독하지않은 저의 불찰이 매우 큽니다.
밤공기 마시며 참회의 큰 눈물 흘리고 오겠습니다.
무튼 너무 좋은 플러그인 감사드립니다.
좋은 밤 되십시요.
나이스 합니다~~
공개 감사합니다!
요즘 저도 그렇고 나인님도 그렇고 썰물열정 시기네요.ㅜㅠ
업무가 늘어나서 요새 계속 틈틈히 눈팅만 하고있네요..ㅎㅎ
새해 복 많이 받으세요 !!
게시판 목록
그누보드5 플러그인
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 633 | 4개월 전 | 802 | ||
| 632 | 4개월 전 | 518 | ||
| 631 | 4개월 전 | 745 | ||
| 630 | 4개월 전 | 758 | ||
| 629 | 4개월 전 | 599 | ||
| 628 | 5개월 전 | 641 | ||
| 627 | 5개월 전 | 666 | ||
| 626 | 5개월 전 | 625 | ||
| 625 | 5개월 전 | 1566 | ||
| 624 | 5개월 전 | 730 | ||
| 623 | 5개월 전 | 472 | ||
| 622 |
 thisgun |
5개월 전 | 629 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기