2025년 8월 10일 일요일

Home » » 카카오 지도, 티스토리, 블로그스팟 , 워드프레스에 삽입하는 방법

카카오 지도, 티스토리, 블로그스팟 , 워드프레스에 삽입하는 방법

By 

카카오 지도,  티스토리, 블로그스팟, 워드프레스에 삽입하는  방법

카카오 지도를 블로그에 쉽게 넣을 수 있는 방법은 주로 HTML 태그(iframe)를 사용하는 것입니다. API 키 발급 없이 간단히 퍼가기 기능을 이용할 수 있어요. 아래에 단계별로 설명하겠습니다. 이 방법은 티스토리, 워드프레스 등 HTML 편집이 가능한 블로그에서 잘 작동합니다.

카카오 지도, 티스토리, 블로그스팟 , 워드프레스에 삽입하는 방법

1. 기본 방법: HTML 태그 복사로 삽입하기

카카오맵 사이트에서 직접 소스를 복사해 블로그에 붙여넣는 방식입니다. API 없이 가장 간단해요.

  • 단계 1: 카카오맵 사이트 접속
    브라우저에서 map.kakao.com에 들어가세요. 원하는 장소를 검색합니다(예: "서울역").

  • 단계 2: 공유 기능 사용
    검색 결과에서 해당 장소를 클릭한 후, 지도 위의 '공유하기' 버튼(또는 + 버튼)을 누르세요.
    'HTML 태그 복사' 옵션을 선택합니다.

  •        단계 3: 소스 생성 및 복사
    지도 크기(예: 너비 600px, 높이 450px)를 설정하고, '일반지도' 또는 '이미지지도'를 선택하세요.


    '소스 생성하기' 버튼을 누르면 HTML 코드가 생성됩니다. 이 코드를 복사하세요.
    예시 코드(서울역 기준, 실제로는 사이트에서 생성):xml

    <div id="kakao-map" style="width:600px;height:450px;"></div> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급키없음"></script> <script> // 생성된 스크립트 코드가 여기에 들어갑니다. </script>
  • <!-- * 카카오맵 - 지도퍼가기 -->
    <!-- 1. 지도 노드 -->
    <div id="daumRoughmapContainer1754808640348" class="root_daum_roughmap root_daum_roughmap_landing"></div>

    <!--
    2. 설치 스크립트
    * 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
    -->
    <script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>

    <!-- 3. 실행 스크립트 -->
    <script charset="UTF-8">
    new daum.roughmap.Lander({
    "timestamp" : "1754808640348",
    "key" : "6r2xkhkxaqk",
    "mapWidth" : "640",
    "mapHeight" : "360"
    }).render();
    </script>

  • 단계 4: 블로그에 삽입
    • 블로그 포스트 편집기에서 HTML 모드로 전환(티스토리라면 'HTML' 버튼 클릭)한 후, 원하는 위치에 복사한 코드를 붙여넣으세요.

PC/모바일 중 하나를 선택할 수 있으며, 모바일 최적화가 필요하다면 '일반지도'를 추천합니다.
팁:: 저장 후 미리보기로 지도가 제대로 보이는지 확인하세요.

이 방법으로 클릭 가능한 동적 지도가 블로그에 embedding됩니다. 만약 지도가 너무 크면 코드의 width/height 값을 조정하세요.

2. 고급 방법: Kakao 지도 API 사용 (선택사항)

API를 사용하면 여러 마커나 커스텀 지도를 만들 수 있지만, 앱 키 발급이 필요합니다. 간단한 경우엔 위 방법으로 충분해요.

  • API 키 발급: Kakao Developers 사이트(developers.kakao.com)에서 앱 등록 후 JavaScript 키를 받으세요.

  • 코드 예시: HTML에 지도 컨테이너를 추가하고 스크립트로 초기화합니다.

    xml
    <div id="kakao-map" style="width:600px;height:450px;"></div> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급키없음"></script> <script> // 생성된 스크립트 코드가 여기에 들어갑니다. </script>

    이 코드를 블로그 HTML에 넣으면 기본 지도가 표시됩니다. 마커 추가 등은 API 가이드 참조.

주의사항

  • 반응형 지도: 모바일에서 잘 보이게 하려면 CSS로 width를 100%로 설정하세요(예: style="width:100%;height:300px;").

  • 문제 발생 시: 지도가 안 보이면 블로그 플랫폼의 HTML 제한을 확인하거나, JavaScript가 활성화되어 있는지 체크하세요. 구글맵과 병행 사용도 가능합니다.

  • 여러 장소를 표시하려면 API를 활용해 마커를 추가하세요.


이 방법으로 쉽게 지도를 넣을 수 있을 거예요. 추가 질문 있으시면 말씀해주세요!

처음 처럼 여러 장소에 마커 추가하기 

Share:  Facebook Twitter Google+