'특정 지역 이마트 지도' 삽입하고 전국 분포도 안내하기
블로그에 '특정 지역 이마트 지도' 삽입하고 전국 분포도 안내하기 (네이버 지도 활용)
네이버 지도의 검색 결과 전체를 iFrame으로 삽입할 수는 없지만, 특정 지역의 지도를 삽입하고 사용자에게 전국 분포도를 확인하는 방법을 안내하는 방식으로 정보를 제공할 수 있습니다.
이 포스팅은 네이버 블로그나 개인 웹사이트에 지도를 삽입하는 방법을 안내합니다.
Step 1. 지도에 삽입할 '특정 지역'의 좌표 확인하기
블로그에 삽입할 지도에 표시할 중심 지역(예: 서울시청)을 먼저 정해야 합니다.
네이버 지도 웹사이트에 접속합니다.
지도의 중심이 될 장소를 검색합니다. (예:
서울시청)검색된 장소를 클릭하여 상세 페이지를 엽니다.
좌측 상세 정보창에서 [공유] 버튼을 클릭합니다.
팝업창에서 [지도 퍼가기] 탭을 선택합니다.
여기서 제공되는 HTML 코드가 바로 iFrame 코드입니다. (아래 4단계에서 사용합니다.)
📌 팁: 지도의 크기(
width와height)는 블로그 레이아웃에 맞게 미리 결정해두세요. (예: 가로 700px, 세로 500px)
Step 2. 전국 이마트 분포도를 볼 수 있는 링크 준비하기
사용자가 클릭하면 전국 이마트 분포를 한눈에 볼 수 있도록 네이버 지도 검색 결과 페이지의 URL을 복사해둡니다.
네이버 지도 검색창에
이마트를 검색합니다.지도에 전국 이마트 위치가 표시된 상태에서, 브라우저의 주소창에 있는 URL을 복사합니다.
이 URL이 바로 사용자가 클릭할 링크 주소가 됩니다.
Step 3. 블로그 포스팅에 코드와 안내 문구 작성하기
블로그 포스팅 작성 시, 지도 코드를 삽입할 때는 반드시 HTML 편집 모드로 전환해야 합니다.
📝 블로그 삽입 예시 코드 (HTML 모드)
<div style="text-align: center;">
<iframe width="700" height="500" frameborder="0" src="**[여기에 네이버 지도 iFrame src 주소를 넣으세요]**" style="border:1px solid #ddd; margin: 15px 0;"></iframe>
</div>
<br>
<div style="border: 2px solid #00c73c; padding: 20px; text-align: center; background-color: #f7fff7;">
<h3>✨ 전국 이마트 분포를 한눈에 확인하고 싶다면?</h3>
<p>아래 링크를 클릭하시면 전국에 위치한 모든 이마트 매장의 분포도를 바로 확인하실 수 있습니다.</p>
<a href="**[Step 2에서 복사한 '이마트' 검색 결과 URL을 여기에 넣으세요]**" target="_blank"
style="display: inline-block; padding: 10px 20px; background-color: #00c73c; color: white; text-decoration: none; font-weight: bold; border-radius: 5px; margin-top: 10px;">
📌 전국 이마트 매장 분포 지도 보러가기 (네이버 지도)
</a>
</div>
Step 4. 최종적으로 블로그 포스팅 발행하기
HTML 모드에서 코드를 붙여 넣은 후, 다시 일반(WYSIWYG) 편집 모드로 돌아갑니다.
삽입한 지도가 잘 나타나는지, 링크 안내 박스가 깔끔하게 표시되는지 확인합니다.
포스팅의 나머지 내용(텍스트, 이미지 등)을 채운 후 발행합니다.
이제 독자들은 블로그에서 특정 지역 지도를 확인하고, 클릭 한 번으로 전국 이마트 분포를 네이버 지도에서 볼 수 있게 됩니다.
다른 지역의 지도를 삽입하거나, 추가적인 질문이 있으신가요?
