Home » » 블로그 포스팅에 지도를 삽입하는 4가지 방법-완벽 정리(+카카오맵, 네이버지도,구글지도,그리고 문제발생시 대안)

블로그 포스팅에 지도를 삽입하는 4가지 방법-완벽 정리(+카카오맵, 네이버지도,구글지도,그리고 문제발생시 대안)

By 

📌 블로그 포스팅에 지도를 삽입하는 4가지 방법 – 완벽 정리

블로그 글을 쓸 때 지도를 함께 넣어주는 것은 독자에게 위치 정보를 시각적으로 제공하고,
포스팅의 전문성과 신뢰도를 높이는 효과가 있습니다.
특히 여행 후기, 맛집 리뷰, 장소 소개 글이라면 지도 삽입은 거의 필수라고 할 수 있어요.

오늘은 블로그에 지도를 삽입하는 대표적인 4가지 방법을 정리해드립니다.
모두 직접 따라 해볼 수 있고, HTML <iframe>을 사용하는 방식도 예시로 포함되어 있습니다.

✅ 1. 카카오맵을 블로그에 삽입하는 방법 (iframe 사용)

📍 사용 절차:

  1. 카카오맵 접속 → 위치 검색

  2. 원하는 장소 클릭 → 우측 상단 공유 버튼 클릭

  3. ‘HTML 태그’ 탭 선택 → <iframe> 코드 복사

  4. 블로그 글쓰기 화면 → HTML 모드로 전환 후 코드 붙여넣기

💡 코드 예시:

<iframe src="https://map.kakao.com/link/map/광릉수목원,37.7425105316596,127.170383882245" 
        width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen>
</iframe>

  • 네이버 블로그에서는 스마트에디터에서 보이지 않지만, HTML 모드에서는 표시됩니다.

  • 티스토리/워드프레스에서는 완벽하게 동작합니다.

✅ 2. 네이버 지도를 블로그에 삽입하는 방법 (iframe 제한 있음)

📍 사용 절차:

  1. 네이버 지도에서 장소 검색

  2. 장소 정보 화면 우측의 공유 → 퍼가기 선택

  3. HTML <iframe> 코드 복사

  4. 블로그 글쓰기의 HTML 모드에 붙여넣기

⚠️ 주의:

  • 네이버는 보안정책(CSP/X-Frame-Options)으로 인해 외부 블로그에서 iframe이 차단될 수 있음

  • 네이버 블로그 내부 삽입에는 문제 없음

💡 코드 예시 (내부용):

<iframe src="https://map.naver.com/v5/entry/place/11742323?c=14134247.2,4518295.7,15,0,0,0,dh"
        width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen>
</iframe>

✅ 3. 구글 지도를 블로그에 삽입하는 방법 (가장 호환성 높음)

📍 사용 절차:

  1. 구글 지도에서 장소 검색

  2. 좌측 정보 창 하단의 공유 클릭 → 지도 퍼가기 탭 선택

  3. HTML 코드 복사 (<iframe>)

  4. 블로그 글쓰기 화면에서 HTML 모드에 붙여넣기

💡 코드 예시:

<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!..." 
  width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>

  • 티스토리, 워드프레스, 네이버 등 모든 플랫폼에서 호환성 최고

  • 사용자 위치 기반 안내도 가능

✅ 4. 지도 이미지 + 링크 버튼 형태로 삽입하는 방법 (iframe 미지원 시 대안)

블로그가 iframe을 지원하지 않거나, 지도를 작게 표시하고 싶을 경우
지도 이미지와 함께 지도 링크 버튼을 제공하는 방식도 좋습니다.

💡 예시 코드:

<a href="https://map.kakao.com/link/map/광릉수목원,37.7425105316596,127.170383882245" 
   target="_blank" rel="noopener noreferrer">
  <img src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/200k.png" 
       alt="광릉수목원 지도" style="width:100%; max-width:500px;">
  <p style="text-align:center; font-weight:bold;">📍 지도에서 광릉수목원 위치 보기</p>
</a>

  • 장점: 모든 블로그 플랫폼에서 작동, 모바일 친화적

  • 단점: 직접 지도 조작은 불가능

✅ 마무리 TIP

지도 서비스iframe 지원특징
카카오맵⭕ 대부분 가능국내 사용자 친화적, 간결한 링크
네이버지도❌ 외부 차단 많음네이버 블로그에 적합
구글지도⭕ 글로벌, 모바일 최적화고급 기능 많음
이미지+링크⭕ 완전 호환최소한의 지도 정보 제공 시 추천

글의 신뢰도와 정보 전달력을 높이고 싶다면,
포스팅에 지도를 꼭 넣으세요. 특히 iframe 삽입이 가능하다면 시각적으로 훨씬 좋고,
그 외에도 링크와 버튼 조합 등 다양한 방법을 상황에 맞게 활용할 수 있습니다.

#가나 투데이 #ganatoday

그린아프로
Share:  Facebook Twitter Google+