워드프레스 블로그 본문에 구글 지도를 삽입하는 방법에 대해 알아보겠습니다.
워드프레스가 5.0 버전으로 올라가면서 기본 에디터가 구텐버그 (구텐베르크)로 변경이 되었습니다.
혹시 예전 에디터 (클래식 에디터)를 이용하는 분까지 고려해 모두 설명을 해보겠습니다.
구글 지도 HTML 소스 얻어 내기
구글 지도에서 삽입하고자 하는 장소를 검색해 봅니다.
서울역을 예로 한번 들어보겠습니다.
서울역을 검색하면 위와 같이 표기가 되며 왼쪽에서 공유 라는 아이콘을 찾을 수 있습니다.
이 공유 아이콘을 클릭합니다.
그럼 위와 같은 공유창이 뜨며 링크가 나타나게 됩니다.
이 링크는 페이스북이나 트위터 등에서 사용할 수 있습니다.
필요한 Html 코드를 얻기 위해서는 상단에 보이는 지도 퍼가기 탭을 선택합니다.
지도 퍼가기를 선택하면 위와 같은 화면을 볼 수 있습니다.
여기서 체크해야 할 부분은 표시하고자 하는 장소가 지도 가운데에 표시되고 있는지 확인하는 것입니다.
지도 가운데에 표시된 것을 확인한 이후(만약 가운데가 아니면 지도를 마우스로 끌어서 이동하면 됩니다) 상단 부의 html 복사를 클릭하면 Html 코드가 복사됩니다.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3162.962374872133!2d126.97012831564781!3d37.55595023249134!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca266e3947003%3A0xe7be97c172b7af6a!2z7ISc7Jq47Jet!5e0!3m2!1sko!2skr!4v1639234840968!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>이렇게 얻는 구글 지도 html 소스는 위와 같습니다.
워드프레스 구텐버그 (구텐베르크) 에디터에서 구글 지도 삽입 하기
워드프레스의 기본 에디터는 이젠 구텐버그 (구텐베르크) 에디터입니다.
구텐버그 또는 구텐베르크라고 불러서 둘 다 표기를 해보았습니다.
에디터에서 위와 같이 블록을 불러옵니다.
처음 보이는 블록들은 자주 사용하는 블록이기에 여기서 사용자 정의 HTML 블록을 찾지 못할 수 있습니다.
그런 경우 밑의 모두 찾아보기를 클릭합니다.
그럼 위와 같이 모든 블록들이 표기가 됩니다.
이 곳에서 사용자 정의 HTML 블록을 찾습니다.
사용자 정의 HTML 블록을 클릭하면 빈 공간이 나오며 위와 같이 복사한 HTML 코드를 붙여넣을 수 있습니다.
구글 지도에서 얻은 HTML 코드를 보면 width=”600″ 이라고 표기된 부분이 있습니다.
이 부분을 width=”100%”로 변경을 해주면 아래와 같이 꽉찬 구글 지도를 워드프레스에 삽입 할 수 있습니다.
워드프레스 고전 (클래식) 에디터에서 구글 지도 삽입 하기
고전 에디터에서는 메뉴 중 삽입을 클릭합니다.
그럼 위와 같이 미디어 서브 메뉴를 확인할 수 있습니다.
미디어 메뉴를 클릭합니다.
그럼 위와 같은 창이 뜹니다.
이 곳에서 임베드 탭을 클릭합니다.
임베드 창에 구글 지도에서 복사된 HTML 코드를 붙여넣기 해줍니다.
역시 width=”100%”로 변경해 주면 좋습니다.
그럼 위와 같이 구글 지도가 본문에 삽입된 것을 확인할 수 있습니다.
워드프레스에 구글 지도 삽입하기
워드프레스에 구글 지도를 삽입하는 방법은 구텐버그 (구텐베르크) 에디터이면 사용자 정의 HTML 블록을 이용하고 고전 (클래식) 에디터면 임베드를 이용해서 삽입을 하면 됩니다.
