목차
블로그 글을 쓸 때 필요한 “지도 위치 공유 소스” 퍼가는 방법은?
블로그 운영하고 글을 작성하다 보면 특정 지역의 “위치 정보” 를 포스트 안에 삽입을 하고 싶을 때가 있습니다. 특히 “맛집” 이나 “여행 컨텐츠”를 주제로 운영하는 블로거들은 해당 맛집이나 여행지의 위치를 글에 표시하려고 할 때가 빈번합니다.
이럴 때에는 보통 “지도” 서비스를 사용하여 내 블로그에 공유하려는 위치를 선택하여 “퍼가기” 기능을 사용하려 HTML 소스 코드를 얻어오는 방법이 있습니다. 따라서 내 블로그에는 해당 위치의 HTML 소스 코드를 복사하여 블로그 에디터에 붙여 넣어 주면 됩니다.
일반적으로 이럴 때에 사용하는 지도 서비스는 “구글 지도” 와 “카카오맵” 이 있습니다. 국내에서 이 외에 가장 많이 사용하는 지도 서비스인 “네이버 지도” 가 있지만 네이버 지도의 경우에는 블로그나 웹 사이트에 삽입할 수 있는 “HTML” 코드 제공을 하지 않아서 제외 하였습니다.(네이버 지도는 개발자용 API를 사용해야만 합니다)
네이버 지도를 꼭 사용해야만 하는 이유가 아니라면 위치 정보 공유를 위해서 “네이버 지도 API”를 사용할 필요까진 없어 보입니다. 따라서 누구나 사용할 수 있는 구글 지도나 카카오맵의 HTML 소스 공유 기능을 통해 내가 원하는 위치의 HTML 소스 코드를 퍼오는 방법에 대해 알아봅니다.
구글 지도에서 내가 원하는 위치의 HTML코드 퍼오는 방법
먼저 “구글 지도” 로 접속하여 내가 원하는 위치로 이동합니다.
저는 구글 지도에서 “판교테크노벨리” 를 선택하였습니다. 그러면 구글 지도의 왼쪽에 “공유” 버튼이 보일겁니다. 요걸 클릭해 줍니다.
그러면 위와 같이 공유 관련 화면이 나타납니다. 기본적으로는 “링크 보내기” 로 되어 있는데, 상단 오른쪽 탭에서 “지도 퍼가기” 버튼을 누르면 위의 그림과 같이 내가 선택한 위치를 “HTML소스” 로 퍼갈 수 있게 됩니다. 이 상태에서 “HTML 복사” 를 클릭하면 HTML 소스가 복사가 됩니다.
구글 지도에서 HTML 소스를 퍼오는 방법은 간단하죠?
카카오맵에서 내가 원하는 위치의 HTML 코드 퍼오는 방법
그럼 이번에는 “카카오맵” 에서 내가 원하는 위치를 HTML 소스코드로 퍼오는 방법에 대해 알아보도록 하지요. 먼저 “카카오맵”에 접속합니다.
카카오맵에서 원하는 위치로 이동한 후에 해당 위치에서 마우스로 클릭합니다.
그러면 위와 같이 해당 위치의 메시지 창이 나타나는데 여기서 빨간 네모의 “위치공유하기” 를 클릭해 줍니다.
그럼 위와 같이 URL 복사 or HTML 태그 복사 메뉴가 나타납니다. 여기서 “HTML 태그 복사” 를 선택합니다.
그럼 위와 같이 “HTML 태그 복사” 라는 창이 생성되면서 “소스 생성하기” 버튼이 나타납니다. 이걸 클릭해 줍니다.
그럼 위와 같이 해당 위치의 HTHL 코드를 복사하는게 가능합니다. 이 코드를 복사해서 붙여넣으면 됩니다.
워드프레스에서 지도 HTML 코드 삽입하는 법
지금까지 구글 지도나 카카오맵에서 간단하게 HTML 코드를 퍼오는 법에 대해 알아봤습니다. 추가 팁으로 “워드프레스”에서 지도 HTML 코드를 삽입하는 법에 대해 알아보겠습니다.
일단 제가 사용하고 있는 “블록 에디터” 기준으로 설명 드려봅니다.
블록에디터 상에서 “+” 버튼을 누른 다음에 HTML 코드를 삽입하기 위해 “HTML”을 입력하고 검색합니다. 그러면 위와 같이 “사용자 정의 HTML” 이라는 블록이 나타납니다. 요걸 선택합니다.
그런 다음에 퍼온 지도의 HTML 코드를 블록에 붙여 넣어 줍니다. 이때 지도를 보기 좋게 하기 위해서 코드 앞뒤로 “<center>….. </center>” 로 감싸 줍니다.
정상적으로 잘 삽입이 되었는지 확인하려면 HTML 블록의 “미리보기” 를 선택해 봅니다. 위의 미리보기를 봤을 때는 잘 삽입이 된거 같군요.
제가 삽입한 “카카오맵” 지도의 모습입니다. 이렇게 워드프레스에서는 지도 HTML 코드를 손쉽게 삽입할 수 있습니다.
