얀덱스 지도(Yandex.Maps) 블로그에 삽입하는 법

본 문서는 Yandex의 도움말 문서를 참고하였습니다.

yandex.com/support/maps/concept/get-map-reference.html

 

얼마전 러시아 여행기를 작성하다가 지도를 삽입할 일이 있어 Yandex Maps를 접속해서 공유Share 기능을 눌러봤는데, PC웹 버전에선 링크 공유만 표시되고 통째로 삽입할 수 있는 iframe embed 코드가 표시되지 않아 난항을 겪었습니다.

 

이에 얀덱스 지도를 블로그에 삽입하는 법을 알려드리려고 합니다.

 

1. 위치 코드값 알기

우선 기존 Share 기능이 생성하는 링크는 yandex.com/maps/-/[장소코드] 와 같은 꼴인데요. 예를 들어 노보시비르스크 최중심 레닌광장 지하철역의 공유코드는 yandex.com/maps/-/CCUI6IxjCC 입니다.

 

2. API 코드로 iframe 만들기

따로 API에 관해 설정하거나 만져줄 필요는 전혀 없고, 그냥 다음과 같은 형식으로 iframe 코드를 삽입하면 됩니다. 중간에 'CVh7YBYg' 부분만 아까 알아낸 코드값으로 변경해줍시다.

<iframe src="https://api-maps.yandex.ru/frame/v1/-/CVh7YBYg?lang=en_RU" width="560" height="400" frameborder="0"></iframe>

 

2-1. lang값

참고로 lang 코드는 en_US, en_RU, 그리고 uk_UA, tr_TR등이 있는데, 아예 없애면 자동으로 사용자의 접속지역에 기반해 설정되는 것 같습니다. en_US로 설정하면 거리 단위가 마일 단위로 설정되니 조심하세요! 저는 en_RU로 설정하고 있습니다.

---

티스토리의 경우, 이렇게 생성한 iframe 코드를 그대로 HTML 모드에서 넣어주면 됩니다. 많은 참고 되었길 바라며, 유익했다면 아래의 하트 눌러주시면 감사하겠습니다 :)