나만의 약도 만들기 – 지도 매쉬업

Update. 카카오맵 (다음지도)을 이용한 나만의 약도를 만들어 자신의 홈페이지에 맞게 삽입하는 방법을 안내합니다.

1. 특정 위치에 대한 약도 생성

우선 자신이 원하는 장소를 카카오지도에서 검색을 합니다. 약도를 만들려는 위치에서 오른쪽 버튼을 누르시면, “여기 주소보기”를 선택하시면, 원하시는 도로 주소가 나타납니다.

HTML 태그 복사

검색 후, 오른쪽 상단의 “내보내기”를 선택하고, “HTML 태그 복사”를 클릭합니다.

HTML 소스를 복사해서 원하는 홈페이지나 블로그 등에 삽입하시면 됩니다.

2. 검색되는 특정 장소에 대한 약도 생성

카카오맵에서 검색이 되는 장소는 정보 페이지에서 손쉽게 약도를 생성할 수 있습니다. 검색 후, 상세 보기를 누르면, 상세 장소 페이지가 뜨게 됩니다. 이때, 오른쪽 상단의 약도 만들기 버튼을 누릅니다.

약도 페이지에서 소스 생성하기를 눌러, 원하는 약도 양식을 선택하여 HTML 소스를 복사합니다.

HTML 소스를 복사해서 원하는 홈페이지나 블로그 등에 삽입하시면 됩니다.

[중지] 나만의 매쉬업 약도 만들기 (2006)

지난 달 네이버 지도 API가 나오기 전에 A Mashup with Google and Korean Map이라는 이름으로 기존 이미지 기반 네이버 지도 서비스를 해킹하여 구글맵과 매쉬업을 시도한 적이 있습니다. (이 프로토 타입은 Google GeoDeveloper Day에서 발표한 바 있습니다.)

동적인 움직임을 보여 주기 위해서는 표준 위/경도 좌표계와 기업 고유의 카텔 좌표계를 변환해야 됩니다. 변환식이야 선도소프트가 가지고 있겠지만, 외삽을 한다는 건 꽤 귀찮은 일이지요. 한 두개 좌표를 맞추어 보더라도 두 지도가 약간 어긋납니다.

그래서 한동안 잊고 있었는데 KAIST의 김유승님이란 분이 놀랍게도 변환식을 만들어 구글맵-네이버지도 매쉬업을 만들었습니다. 일단 박수를!

그래서 이전에 제가 하던 작업과 이 변환식 라이브러리를 짬뽕해서 나만의 약도를 만들 수 있는 서비스를 만들어 봤습니다. 몇 시간 만에 만든거라 꽤 허접합니다만, 한번 써 볼만은 합니다. (유승님께 감사의 인사를!)

사용 방법
1. http://map.creation.net으로 갑니다.
2. 붉은 박스의 ‘위치 얻기 시작’ 이라는 버튼을 누릅니다.
3. 지도를 이동하여 자신이 원하는 장소에 클릭합니다.
4. 오른쪽에 나오는 HTML 코드를 블로그나 홈페이지에 넣습니다.

그러면 아래와 같은 모양이 됩니다. 다음 제주 GMC 약도 입니다. 구글 위성 사진으로 보면 아직 한참 짓고 있는 중입니다. ㅎㅎ

‘지도’를 누르면 네이버 지도가, ‘위성 사진’을 누르면 구글 위성 사진이 나타납니다. ‘지도+사진’은 마지막 해킹이 되는 대로 해보도록 하겠습니다. title에 자신이 원하는 내용을 넣으면 되고, z값이 zoomin/out 값을 입력할 수 있습니다. 이 서비스는 시범으로 해보는 것이라 트래픽이 폭주하면 그만 둘 수도 있습니다.

- ;

Disclaimer- 본 글은 개인적인 의견일 뿐 제가 재직했거나 하고 있는 기업의 공식 입장을 대변하거나 그 의견을 반영하는 것이 아닙니다. 사실 확인 및 개인 투자의 판단에 대해서는 독자 개인의 책임에 있으며, 상업적 활용 및 뉴스 매체의 인용 역시 금지함을 양해해 주시기 바랍니다. 본 채널은 광고를 비롯 어떠한 수익도 창출하지 않습니다. (The opinions expressed here are my own and do not necessarily represent those of current or past employers. Please note that you are solely responsible for your judgment on checking facts for your investments and prohibit your citations as commercial content or news sources. This channel does not monetize via any advertising.)

여러분의 생각 (36개)

  1. 소금이 댓글:

    여행이나 맛집관련 포스팅을 하는 분에겐 정말 유용한 툴같네요.
    구글과 네이버가 모두 지원된다니.. 저도 한 번 써봐야겠는걸요.
    좋은 정보 감사드립니다. ^^

  2. 와니 댓글:

    와우 좋은 기능인데요. 공연같은거 할때 공연장소 약도로 쓸수도 있고 좋을것 같네요 ^^

  3. pidg 댓글:

    지도만들기 참 편리할 것 같습니다. 안타깝게도 ‘위치얻기 시작’ 이 작동되지 않습니다. 고쳐주시면 잘 사용하겠습니다. 감사합니다. (구글 두번 클릭했습니다.)

  4. seokzzang 댓글:

    홈페이지 주소로도 사용해도 좋을 것 같군요..ㅎㅎ
    고맙습니다.

  5. Channy 댓글:

    pidg/ 위치얻기 시작을 클릭 한후 지도에서 한번 더 클릭해 주셔야 합니다. 그러면 화살표와 HTML이 만들어집니다. 직관적으로 하기 위해 지도 만들기 시작으로 바꾸었습니다.

  6. taemy 댓글:

    혹시 다음쪽에서는 지도 api 같은(openapi) 작업을 하고 있나요?
    다음이 가만히 있을 것 같지는 않은데 ^^ , 뭔가를 준비하고 있겠죠?

  7. Channy 댓글:

    taemy / 뭔가 준비하고 있겠죠? ㅎㅎ

  8. mango 댓글:

    차니님, 아름답습니다! ㅜㅜ

  9. Carrot 댓글:

    이런 종류의 맵 서비스가 요즘 대세인가요?;;
    저번에 어떤 영국 지하철노선 인터넷서비스도
    이것과 비슷했던것 같은데, 볼때마다 신기하네요;

  10. daybreaker 댓글:

    앗, map.creation.net에 있는 “김윤승님”.. 오타입니다. ^^;

  11. outsider 댓글:

    저도….^^. 차니님, 정말 아름답습니다.

    이런것 직접 만드시는분들 보면 그냥 저절로 respect하게되더군요.^^.

  12. JK 댓글:

    놀랍고 부러울 뿐…ㅠ.ㅠ

  13. dongsama 댓글:

    차니님 대단하시네요~~
    제가 원하던 기능이네요 ㅎㅎ
    지금 제가 졸업프로젝트로 여행싸이트를 구축할려고 하는데요.. 구출할려고 하는 기능이 뭐냐면요~~
    출발지역과 목적지를 선택하면 출발지역에서 부터 목적지까지 경로를 따라 우리가 추천해주는 여행지를 지나가며 목적지까지 도달하는 경로를 나타내 주어야 하거든요..
    http://map.creation.net 여기 홈에 가면 여러곳 경로 지도 만들기는 아직안되나요??
    그리고 여행싸이트에서 임으로 경로값을 넣을수는 없는지?? 메일로 답장 부탁드려요

  14. sm 댓글:

    우연히 지나가다가 잘못된 내용이 있어서 코멘트 남깁니다.
    지도를 모델링하여 좌표로 표현하는 방법으로
    크게 구 좌표계와 평면 좌표계가 있습니다.
    구 좌표계가 흔히 알고 있는 경/위도 이고,
    평면좌표계로는 TM/UTM/TM128등등이 있습니다.
    네이버에서 사용하고 있는 카텍(Katech) 좌표계가 TM128의
    다른 이름입니다.이것 또한 표준좌표계 입니다.
    구 좌표계도 타원 모델링에 따라서 bessel/WGS84등으로
    나뉩니다.
    지도 좌표 변환에 대한 자세한 내용을 찾아보시려면
    google에서 geotrans로 검색해 보시면 많은 자료를
    찾아보실수 있을겁니다.
    변환에 사용되는 상수들은 한국국토지리연구소등에
    가시며 알 수 있습니다.

  15. UltraSsaZzang 댓글:

    우선 윤석찬님의 시도에 경의를 표하는 바입니다.

    제 생각에는 지도상에 어떤 위치를 단순히 표시해주기 위한 서비스는 맵 서비스 회사가 알아서 해야할 일 같습니다.
    다만 그 지도를 통한 특수한 서비스를 만들어낸다던가 하는… 컨버전스 형태의 서비스는 다른 의미가 있다고 보여지지만요.
    지도 회사와 서비스 구축 회사의 영역의 구분이 분명히 있다는 거죠 ^^;;
    저도 콩나물 지도를 이용해서 구글맵과 연동을 해보았습니다. 구경이나 한번 와주세요.용

  16. Channy 댓글:

    UltraSsaZzang/ 저는 구글 네이버 양쪽 open api 매쉬업을 하는 가장 간단한 서비스를 구현해 본 것 뿐입니다. 이런 시도와 노력이 계속 되어야겠죠. 딴 사람에겐 어떨진 몰라도 저에게는 매쉬업 해본 것 자체에 의미가 있는 것입니다.

  17. UltraSsaZzang 댓글:

    핫… 혹… 오해가 있지는 않으셨는지 모르겠습니다. 제가 쓴글은 딴지를 걸려고 했거나 가치를 폄하하려고 쓴 글은 아니었구요… 에공 어찌 변명을 드려야 할지… 윤석찬님께서 작업하신 내용에 대한 부분은 저도 존중하고 있습니다. 단지 말씀드린 것은 업체들에 역할에 대한 이야기였을 뿐입니다. 오해가 없으셨으면 합니다.

  18. xwire 댓글:

    네 저도 매쉬업 시도가 중요하다고 생각합니다. 다양한 시도를 통해서 발전해 나가는 것이겠죠 저 같은 경우에는 지도+블로그+뉴스+웹사이트를 한번 매쉬업해 보았습니다. http://www.xwire.co.kr 에서요.

    dongsama님의 여러곳 경로 만들기 기능도 추가하면 좋겠네요. 아뭏든 매쉬업을 통해서 사용자들이 만들어 나가는 인터넷 서비스가 많이 정착되었으면 하는 바람입니다

  19. 이종훈 댓글:

    정말 좋습니다. ^^
    부라보~~~
    저는 거제도에서 ‘거제랜드’라는 사이트를 운영하는데 각 상가의 약도 지도로 사용해도 될런지 궁금합니다.
    답변 부탁드립니다.

    hp : 011-1777-8685

  20. 자유 댓글:

    해당 서비스를 정말 잘 이용하고 있습니다. 이제서야 감사의 말씀을 드리네요.
    오늘 갑자기 화면이 표시되지 않아 이 곳에 와 보았더니 예제 화면도 보이질 않네요. 신속히 정상화 되기를 바라면서 다시 한 번 감사의 마음을 전합니다. :)

  21. 어린이 댓글:

    정말 좋은 서비스 잘 보고있습니다.
    이 서비스를 기업 웹사이트에 적용시켜 사용해도 되는건가요?
    궁금합니다. 답변 부탁드려요~

  22. Minsu 댓글:

    너무나 멋집니다 ^^

    구글어스를 처음 봤을때도 너무 놀라
    거의 밤새다시피하며 해외여행(?)을 다녔는데..

    구글맵에서만 보았던 맵과 위성사진과의
    놀라운 결합이 국내에서도 어느 정도 가능하게 되었네요
    ‘겹쳐보기’ 기능도 지원된다면 정말 바랄것이 없겠습니다

    약도에 위치화살표와 이름을 바꿔서 표시할 수 있는
    기능이 정말 좋아요^^

    온라인 약도로 쓰기 너무 좋은걸요~

  23. 조명래 댓글:

    정말 좋은 곳을 발견했네요..ㅎㅎ
    우리 홈페이지에 꼭 필요한 기능을 구현하고 계시는군요
    넘넘 반갑습니다.

    그리고…”나의집”을 “바로여기”로 바꾸는 건 어려울까하고 생각해 봅니다. 집이 아니라 다른 어떤 곳을 표현하려고 할 때는 조그 어색한 듯해서 “바로여기”라는 단어는 굳이 변경하지 않아도 써먹을 수 있지 않을까 생각해 봅니다.

    망고 제 생각이었습니다. ㅎㅎ 반영되면 좋긴 하겠지만;;;

  24. 조명래 댓글:

    그리고 인쇄버튼을 누르니까 모든프레임이 다 인쇄되는 데.. 아이프레임만 인쇄되도록 해 주실 수는 없는지….ㅡ.ㅡ?? 그러니까 지도만 인쇄되게 어떻게 안될까요?? ^^ 플리즈~

  25. 준이 댓글:

    최곱니다 +.+; 제 블로그에 넣어보았는데, 최고입니다. !! 너무 감사드려요.. 잘 쓰겠습니다.

  26. 진이 댓글:

    작은 교회입니다. 전도용 지도를 만들고 싶은데
    교회주변에 큰 건물이 없어 이 지도위에 건물을 추가해서 만들려면
    어떻게 방법이 없는건지 알고 싶습니다.
    그리고 화살표를 한번 넣으면 지역을 옮길 때 먼저 표시해놓은 화살표를 없애는 방법은 없나요?
    사용법을 잘 몰라 궁금점을 보냅니다.
    답변 기다리겠습니다.

  27. 허성철 댓글:

    멋집니다. 괜찮은 지도서비스 찾는답시고 인터넷 뒤지고 뒤져서 여기까지 왔는데, 바로 이거네요. 트래픽이 폭주하면 서비스 중단될지 모른다고 적으셨던데 언제까지나 중단되지 않기를 바랍니다. ^^

  28. 파파존스 댓글:

    눈물흘리고 갑니다. T.T (감동)~
    구글과 연동된 서비스를 한국에서 못쓴다는게 아쉬웠는데..
    많은 도움이 될 것 같습니다.
    박수~~

  29. 장성환 댓글:

    이제는 서비스가 안되는 것간요? 저의 블로그에서는 나타나질 안네요 ㅠㅠ

  30. 우왕 댓글:

    정말 대단하네요~ 이런 서비스가 있을줄이야!
    너무 신기해요 ㅋㅋㅋ

    근데 저희가 홈페이지 제작회사를 통해서 홈페이지를 받아서
    사이트를 운영하고있는데 타이틀에 한글을 넣으니 수정창에서는 보이나 글작성 완료시에는 한글타이틀이 나타나지않네요 영어로하면
    잘되는데; 이게 원래 안되는건가요 아님 사이트자체에 문제가있는걸까요?

  31. 이돈일 댓글:

    잘 사용하겠습니다. 감사합니다!

  32. 용갈 댓글:

    홈페이지에 쓸 지도를 찾다가 발견했습니다.
    정말 최고네요 ㅜ-ㅜ
    감사히 쓰겠씁니다 .! 떙큐욤!

  33. 박상길 댓글:

    여러곳 경로 지도 서비스는 하실 계획 없으신가요?

  34. image 댓글:

    회사 홈페이지에 쓸 지도를 찾다가 발견했는데요.
    정말 최고입니다. 정말 감사히 잘 쓰겠습니다.

  35. 강만수 댓글:

    그동안 잘 썼는데 갑자기 며칠전부터 백지화면이 나옵니다. 혹 무슨 문제가 있으신건지요? 아님 생성한 소스입니다 왜 안보이는지 좀 봐주시고 회신 주3

  36. 에구구 댓글:

    네이버와 구글에서 막은듯?