이번 포스팅은 제목에 있는 것처럼 'ckeditor5 + iframely' 조합에서 게시물에 구글 맵을 표시하는 방법에 대한 것입니다. 게시물에 구글 맵을 임베디드 형태로 삽입하는 것은 ckeditor5와 iframely 모두 기본적으로 지원하나 정상적으로 표시하기 위해서는 약간의 작업이 필요합니다.

참고로 ckeditor5에서는 구글 맵을 포함해 미디어를 oembed 태그로 삽입하기 때문에 게시물에 포함된 미디어를 웹사이트에서 표시하기 위해서는 이 태그를 파싱하는 작업이 필요합니다. iframely는 그런 작업을 해주는 서비스 중 하나입니다.

1. 삽입할 구글 맵 주소의 도메인은 google.co.kr이 아니라 google.com을 사용해야 ckeditor5에서 인식 합니다.

2. PC 버전 구글 맵에서 웹브라우저 주소창에 있는 전체 URL만 ckeditor5에서 인식 합니다. 구글 맵의 공유 기능에서 제공하는 단축 URL은 인식 못합니다.

3. ckeditor5를 통해 게시물에 삽입된 구글 맵 주소를 iframely에서 처리하기 하기 위해서는 구글 맵 API 키가 필요합니다. 여기에 설명되어 있는 절차에 따라 키를 발급받습니다.

4. 발급 받은 키는 iframely의 settings -> fine-tune providers 메뉴에 있는 'Add support of Google Maps' 항목에 입력합니다.

5. iframely에서 표시하는 구글 맵에 약간의 문제가 있는데 표시하는 장소의 맵 마커가 오른쪽으로 치우쳐 있다라는 것입니다. 이는 PC 버전 구글 맵에서 장소를 표시할때 구글 맵 화면 왼쪽에 있는 바를 고려해 약간 왼쪽으로 센터를 잡기 때문입니다. 이를 해결하기 위해서는 ckeditor5에 구글 맵 주소를 입력할때 '@'로 시작하는 좌표 부분을 삭제하고 입력하면 맵 마커가 정중앙에 표시됩니다.