지난 시간에 숏코드를 구글 지도를 만드는 법을 공부하였습니다. 그렇지만 간혹 숏코드 플러그인을 사용하지 않고 워드프레스 페이지에 구글 지도를 삽입해야 하는 경우가 있습니다. 이번에는 숏코드를 사용하지 않고 구글맵스에 들어가서 iframe 태그를 얻어와서 워드프레스 본문 페이지내에 구글 지도를 추가하는 방법을 알아보도록 하겠습니다.

구글 지도 소스코드 얻기


먼저 구글맵 사이트(http://maps.google.co.kr)에 접속합니다. 

구글맵의 검색창에서 구글 지도를 첨부하기 원하는 지역명을 검색합니다. 여기에서는 강남구 서초동을 검색하였습니다.



왼쪽 화면에 공유 아이콘을 클릭합니다.



iframe 태그를 사용해야 하기 때문에 지도 퍼가기 탭을 클릭합니다. 




아래 iframe 부분을 모두 복사합니다. 복사된 소스코드를 워드프레스 본문에 붙여넣기를 할 것입니다.




워드프레스 페이지에 구글 지도 삽입


워드프레스 왼쪽 사이드바 메뉴에서 페이지 > 새 페이지 추가 를 클릭합니다.



제목은 구글 지도 예제라고 입력하고 텍스트 탭을 클릭합니다. 텍스트 탭 화면에서 조금 전에 복사한 구글 지도 소스코드를 붙여넣기를 합니다. 소스 코드를 붙여넣은 뒤에 미리보기 버튼을 클릭해서 구글 지도가 제대로 본문에 삽입되었는지 확인합니다.



숏코드 플러그인을 사용하지 않고도 구글맵에서 구글 지도 HTML 소스코드를 가지고 와서 정상적으로 화면에 디스플레이 된 것을 확인할 수 있습니다.




+ Recent posts