그누보드 카카오맵 API 키 발급없이 넣기

 

[그누보드]
카카오맵 API 키 발급없이 넣기

---

안녕하세요.
코딩하는 기획자 Daniel입니다.

 

들어가기에 앞서

새롭게 진행한 사이드 프로젝트인 10페이지 내외의 웹사이트(홈페이지) 제작을 위해 그누보드(CMS : 콘텐츠 관리 시스템 Content Management System)를 사용해서 진행을 하였는데요 오늘은 그 중에서도 카카오맵 지도를 삽입하는 방법에 대한 포스팅입니다. 보통 지도 API를 삽입하기 위해서는 별도의 키를 발급받아 넣어야 하는데요 오늘은 불편한 지도 API키를 발급 받지 않고도 초보자들도 손쉽게 지도를 삽입하는 방법에 대해 소개하겠습니다.

언제나 그렇듯 홈페이지는 한 번에 완성을 해나가기보다는 구글/네이버 애널리틱스의 데이터를 중심으로의 수정사항을 반영하면서 완성해 나가는 것이 중요합니다.

 

 

카카오맵

아래 링크를 통해서 카카오맵에 접속해 준 뒤 지도로 삽입할 장소를 검색해 줍니다.

카카오맵

 

 

 

HTML 태그 복사 버튼을 클릭합니다.

 

 

소스 생성하기 버튼을 클릭합니다.

 

 

카카오맵 지도 삽입

좌표값과 키값을 복사합니다.

• "timestamp" : "1770259330122", 
• "key" : "26eccgovuduy",

<iframe src="kakaomap.php?map=1770259330122*26eccgovuduy"></iframe>

 

kakaomap.php는 의 경로는 그누보드를 업로드한 절대 경로에 넣어주시면 됩니다.

kakaomap.php

0.00MB

---

마지막으로 PC버전과 모바일 버전에서 세로폭을 정의할 옵션을 넣어준 뒤 HTML코드를 작성해서 내용관리에 넣어줍니다.

<div class="majorMap">
	<iframe src="https://majornusu.com/gnuboard/skin/kakaomap/kakaomap.php?map=1770253221153*26eccgovuduy*60*60" class="mapframe"></iframe>
</div>

CSS도 작성해서 넣어주면 더욱 좋겠죠? +_+

.majorMap{margin:0 auto; width:100%;}
.mapframe{border:0;}

만약 지도 API가 호출되지 않으신다면 좌표값(1770260767400)과 키값(h8jt5mn8whx)만 수정해서 넣어보시길 바랍니다.

<iframe src="http://wittazzurri.phps.kr/plugin/wittazzurri/map/kakaomap.php?map=1770260767400*h8jt5mn8whx*60*60"></iframe>

---

Ref

• 카카오맵 도우미(출처 : 비타주리님)

[ 카카오맵 도우미 ]

 

 

마치며...

오늘은 그누보드(CMS : 콘텐츠 관리 시스템 Content Management System)에 카카오맵 지도를 빠르게 넣는 방법에 대한 포스팅이었는데요 도움이 되셨나요? +_+ 다음 포스팅에서도 그누보드로 사이드 프로젝트를 진행하면서 알게된 알찬 정보로 이웃님들을 찾아오겠습니다.

---

함께 읽으면 좋은 글

[반응형 UI] PC Mobile 한번에 사용가능 한 제이쿼리(jQuery) 햄버거 GNB 메뉴

 

위의 포스팅을 보시고 해결 안되시는 분들을 댓글을 남겨주세요 :)