워드프레스 구텐베르크 와 클래식 에디터에서 구글 지도 맵 삽입하기

워드프레스에서 포스트를 작성하는 경우 글의 내용에 따라 특정 위치를 공유하기 위해 지도를 삽입하고 싶은 경우가 있습니다.

워드프레스에서 지도를 삽입 하기 위한 가장 쉬운 방법은 지도를 캡쳐 후 이미지 형태로 추가하는 것이 가장 간단합니다. 하지만 이 경우 지도를 확대 또는 축소하는 것이 불가능 합니다.

그렇기 때문에 단순한 이미지가 아닌 실제 지도 데이터를 삽입 하고 싶은 경우 구글 지도의 공유 메뉴를 이용해 HTML 코드를 추출 한 뒤 워드프레스에 임베드(embed)하는 것이 조금 더 효과적입니다.

그래서 오늘은 워드프레스의 구텐베르크 에디터 와 클래식 에디터에서 구글 지도 맵을 본문에 삽입하는 방법에 대해서 알아 봅니다.

튜토리얼 환경 : 엣지 브라우저

해당 포스트는 충분한 테스트 및 검증 후 작성 되었지만 이것이 내용의 정확성이나 신뢰성에 대해 보증을 하는 것은 아니니 단순 하게 참고용으로 봐주시길 바랍니다.

구글 지도 HTML 코드 추출

구글 지도 사이트 이동 후 공유 메뉴를 이용해 원하는 장소의 HTML 임베드 코드를 얻을 수 있습니다.

구글 지도 사이트 이동

선호 하는 검색엔진 에서 "구글 지도" 등으로 검색을 합니다. 구글에서 고급 검색을 사용 하면 보다 정확한 결과를 얻을 수 있습니다.
검색결과 중 상단에 위치한 Google 지도 링크를 클릭 해 접속 해 줍니다. 아래 바로가기를 통해 빠르게 이동 할 수 있습니다.

바로가기: Google 지도

지도 정보 HTML 코드 추출

삽입할_장소_검색_후_공유_버튼_클릭 — 삽입할 장소 검색 후 공유 버튼 클릭

구글 지도 접속 한 뒤 삽입 하고자 하는 장소를 검색 (1) 후 검색 된 결과에서 공유 (2) 버튼을 마우스로 클릭합니다.

공유_창에서_지도_퍼가기_탭으로_전환 — 공유 창에서 지도 퍼가기 탭으로 전환

'공유' 창이 실행 되는데 다시 상단 탭을 '지도 퍼가기' 로 전환 합니다.

'지도 퍼가기' 페이지 오른쪽 상단 HTML 복사 링크를 마우스로 클릭하면 아래 와 같은 형식의 HTML 코드를 추출 할 수 있습니다. 중간 A 이라고 된 부분을 마우스로 클릭하면 삽입 될 지도의 사이즈를 선택할 수 있습니다. 하지만 HTML 코드에서 바로 수정이 가능하기 때문에 그대로 사용해도 무방합니다.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d850956.2612762775!2d126.0125573253438!3d33.57810567492497!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x350cff51e4901447%3A0x9e789970e40c6824!2z7ZWc65287IKw!5e0!3m2!1sko!2skr!4v1648877875143!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>