다음 daum 지도 약도 만들기를 통해 워드프레스에 추가하는 방법

다음 daum 지도 약도 만들기를 통해 워드프레스에 추가하는 방법

 

환경: Internet Explorer 11

 

간혹 블로그나 사이트에 자신이 여행했던 지역 또는 관광지의 지도를 올려서 정확히 어디인지 설명하고 싶을 때가 있습니다. 주로 이용하는 지도는 네이버나 다음(daum) 입니다. 다음은 네이버와 달리 약도를 쉽게 만들 수 있도록 주변 버스, 찾아 오시는 길 등의 서비스를 첨부해서 넣을 수 있도록 인터페이스를 제공하고 있습니다. 그럼 어떻게 만들어서 추가하는지 알아 볼까요.

 

지도를 만드는 방법은 크게 두 가지로 나눌 수 있습니다. 지도에 주소로 등록되어 있는 위치와 사용자가 위치를 지정해서 지도를 만드는 경우 입니다. 그러니까 주소로 등록된 위치를 지도로 만드는 방식과 아무것도 표시가 되어 있지 않은 곳의 지도 만드는 방식이 틀린다는 것입니다.

 

◎ 지도에 표시가 되어 있는 경우

 

▼ 먼저 지도에 위치가 표시되어 있는 경우 입니다. 위치를 클릭하면 조그마한 팝업창이 하나 뜨는데 그 속에는 주소와 출발, 경유, 도착, 상세보기 버튼이 있습니다. 그 중에서 [상세보기] 버튼을 클릭합니다. 

 

▼ 상세보기 화면 오른쪽 상단에 [약도 만들기]가 있습니다. 클릭해서 팝업창을 띄웁니다. 

 

▼ Daum 약도 만들기 팝업창에는 왼쪽에 지도 편집을 위한 각종 옵션들이 있습니다. 지도 크기뿐만 아니라 지도 내부에 사용자가 직접 아이콘을 넣어서 표시할 수도 있습니다. 

 

▼ 아래로 내려오시면 약도를 만들 때 필요한 버스 정보와 [찾아오시는 길]에 첨부하고 싶은 입력할 수 있습니다. 홈페이지에 찾아오시는 길 페이지 만들 때 다음 지도 하나만 있으면 충분 하겠네요. 약도 만들기에 옵션 설정이 모드 끝나면 제일 아래로 내려가 [소스 생성하기] 버튼을 클릭합니다. 

 

▼ 소스는 스크립트과와 HTML 이 혼합된 텍스트를 말합니다. 일반 지도를 선택하고 아래로 내려가 Ctrl + C 를 눌러 클립보드에 복사합니다. 

 

▼ 지도와 관련된 소스를 얻었으니 블로그나 사이트에 가서 붙여 넣기만 하면 되겠죠. 워드프레스의 새 글 입력 페이지로 가서 오른쪽 상단에 [텍스트] 탭을 클릭합니다. 복사한 소스를 그대로 붙여 넣기 위해서 입니다. 

 

▼ 지도 소스를 넣고 글을 저장합니다. 그럼 지도와 주소, 주변 버스 정보 등이 들어간 페이지가 완성이 됩니다. 

 

◎ 지도에 등록되어 있지 않은 위치의 지도를 삽입하고 싶을 때

 

▼ 다음은 지도에 표시된 정보가 없는 경우 입니다. 주로 자전거 길이나 등산했던 길을 소개할 때 주변 지도에 표시된 건물이 없을 수 있겠죠. 해당 지역을 마우스로 찍고 [여기 주소 보기] 메뉴를 선택합니다. 

 

▼ 그럼 주소 팝업창이 뜨는데 첫 번째 경우와 달리 [상세보기] 버튼이 없죠. 대신 [지도공유]를 클릭합니다. 그럼 [지도 퍼가기] 메뉴가 나타납니다. 

 

▼ [지도 퍼가기] 팝업창에서 지도 크기와 아이콘을 설정하고 [소스 생성하기] 버튼을 클릭합니다. 

 

▼ 소스 생성하기 에서 일반 지도를 선택한 후 아래 소스를 복사합니다. Ctrl + C 를 누르면 되겠죠.

 

▼ 복사한 소스를 위에서 했던 것처럼 글쓰기 란에 붙여 넣습니다. 그림과 같은 지도가 간단하게 완성이 되었네요. 약도 그리기 보다는 심플하죠.