웹페이지에 지도 삽입하기: 카카오맵 활용

웹페이지를 둘러보면 지도가 삽입된 곳들이 있다.

필자가 제작 중인 사이트. (기독교인 아님)

 
API를 사용해야 하는 네이버 지도와 달리 구글맵, 카카오맵은 HTML만 붙여 넣으면 간단히 삽입할 수 있다.

(네이버 지도 삽입하는 법은 아래 링크 글 참고하세요!)

[API] 웹 페이지에 네이버 지도 띄우고 마커 찍기 [네이버 Maps API 사용하기]

오늘은 카카오맵을 삽입하는 법을 알아보겠다.
 

카카오맵

 
일단 삽입할 장소를 카카오맵에서 검색한다.

우측 풍선 모양 장소 아이콘이나 '+' 기호를 클릭하면 아래 사진과 같은 화면이 나오고,
 

 화살표 클릭 -> HTML 태그 복사를 누른다.

이제 지도 크기, 아이콘 등을 설정하고 소스 생성하기를 누르면 HTML 코드가 생성된다.
 

일반지도와 이미지 지도 중에 원하는 것을 고르면 되는데, 이미지 지도는 소스 생성 전에 설정한 화면만 사진으로 보여주고 주변을 더 확대·축소해서 볼 수 없다. 반면에 일반지도는 확대·축소해서 주변을 더 볼 수 있다.
 
특정한 목적이 있는 게 아니라면 일반지도를 사용하면 될 것 같다.
 
저 코드는 지도를 삽입할 HTML 파일 내부 원하는 위치에 붙여넣으면 된다.
완성이다!