본문 바로가기

카테고리 없음

지도 퍼오기 (다음 카카오, 네이버, 구글)

# 지도 퍼오기 (다음 카카오, 네이버, 구글) 지도를 삽입하면서 글을 쓸 일이 생겼는데, 이 참에 3가지 지도 서비스 중 어떤것이 제일 나은지 알아보려고 함. ## TOC ## 구글 구글은 iframe 으로 퍼오도록 되어있고.
코드는 ``` <div class="rC"><div class="rSC"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.77220950822!2d126.95528431573746!3d37.37156647983489!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b6755947b14d3%3A0x4fa3b3ab2668672d!2z66CI64W467KE7JWI7JaR7IS87YSw!5e0!3m2!1sko!2skr!4v1565828000992!5m2!1sko!2skr" frameborder="0" style="border:0" allowfullscreen></iframe> </div></div> ```/ ## 네이버 맵 네이버는 table tag 써서 이미지로만 쏴주는듯? 구지다. 우리나라 IT 왜이리 구려졌지?
지도 크게 보기
2019.8.15 | 지도 크게 보기 ©  NAVER Corp.
코드는 ``` <table cellpadding="0" cellspacing="0" width="462"> <tr> <td style="border:1px solid #cecece;"><a href="https://map.naver.com/?searchCoord=a020c53e84f6007b36ba2e416ae0a4db9217c51efdfb71291de253b4029c6d4c&query=66CI64W467KEIGFz&tab=1&lng=66d76bb2026048f70719d9ef8d213ff4&mapMode=0&mpx=713f18755b07aec9cdb3ba33669b1722bab350a95ef73cf5971f73a372dbf12b4b9152f4508dae0542c6195a2827327ec602981dd58cffae733f9635d7744c54&lat=8e76664a0b96b0e6a0abb1e47f235752&dlevel=12&enc=b64&menu=location" target="_blank"><img src="http://prt.map.naver.com/mashupmap/print?key=p1565846979822_549094554" width="460" height="340" alt="지도 크게 보기" title="지도 크게 보기" border="0" style="vertical-align:top;"/></a></td> </tr> <tr> <td> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td height="30" bgcolor="#f9f9f9" align="left" style="padding-left:9px; border-left:1px solid #cecece; border-bottom:1px solid #cecece;"> <span style="font-family: tahoma; font-size: 11px; color:#666;">2019.8.15</span> <span style="font-size: 11px; color:#e5e5e5;">|</span> <a style="font-family: dotum,sans-serif; font-size: 11px; color:#666; text-decoration: none; letter-spacing: -1px;" href="https://map.naver.com/?searchCoord=a020c53e84f6007b36ba2e416ae0a4db9217c51efdfb71291de253b4029c6d4c&query=66CI64W467KEIGFz&tab=1&lng=66d76bb2026048f70719d9ef8d213ff4&mapMode=0&mpx=713f18755b07aec9cdb3ba33669b1722bab350a95ef73cf5971f73a372dbf12b4b9152f4508dae0542c6195a2827327ec602981dd58cffae733f9635d7744c54&lat=8e76664a0b96b0e6a0abb1e47f235752&dlevel=12&enc=b64&menu=location" target="_blank">지도 크게 보기</a> </td> <td width="98" bgcolor="#f9f9f9" align="right" style="text-align:right; padding-right:9px; border-right:1px solid #cecece; border-bottom:1px solid #cecece;"> <span style="float:right;"><span style="font-size:9px; font-family:Verdana, sans-serif; color:#444;">© </span> <a style="font-family:tahoma; font-size:9px; font-weight:bold; color:#2db400; text-decoration:none;" href="https://www.navercorp.com" target="_blank">NAVER Corp.</a></span> </td> </tr> </table> </td> </tr> </table> ```/ ## 다음 (daum or kakao) 다음 카카오는 퍼오는거 쓰레기 같네. 아래와 같이 복붙하라는데 안됨. 아마도 보안문제 때문에 이렇게 처리한듯도 한데, 실력들이 영 꽝이다. 방법도 구지고. 다음맵 좋아했는데, 이젠 버려야겠네 ㅡㅡ. ``` <!-- * 카카오맵 - 지도퍼가기 --> <!-- 1. 지도 노드 --> <div id="daumRoughmapContainer1565846781783" class="root_daum_roughmap root_daum_roughmap_landing"></div> <!-- 2. 설치 스크립트 * 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다. --> <script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script> <!-- 3. 실행 스크립트 --> <script charset="UTF-8"> new daum.roughmap.Lander({ "timestamp" : "1565846781783", "key" : "uqec", "mapWidth" : "640", "mapHeight" : "360" }).render(); </script> ```/ 이미지로 퍼오는 방법도 있던데 아래에... 코드는 ``` <div style="font:normal normal 400 12px/normal dotum, sans-serif; width:640px; height:392px; color:#333; position:relative"><div style="height: 360px;"><a href="https://map.kakao.com/?urlX=490570.0&urlY=1075616.0&itemId=26846818&q=%EB%A0%88%EB%85%B8%EB%B2%84%EC%84%9C%EB%B9%84%EC%8A%A4%EC%84%BC%ED%84%B0%20%EC%95%88%EC%96%91%EC%A0%90&srcid=26846818&map_type=TYPE_MAP&from=roughmap" target="_blank"><img class="map" src="//t1.daumcdn.net/roughmap/imgmap/7daa003062d3336ca2ed047407c0d0ab4f32bec7b2678a0b8ea654b9ab0ec03d" width="638px" height="358px" style="border:1px solid #ccc;"></a></div><div style="overflow: hidden; padding: 7px 11px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0px 0px 2px 2px; background-color: rgb(249, 249, 249);"><a href="https://map.kakao.com" target="_blank" style="float: left;"><img src="//t1.daumcdn.net/localimg/localimages/07/2018/pc/common/logo_kakaomap.png" width="72" height="16" alt="카카오맵" style="display:block;width:72px;height:16px"></a><div style="float: right; position: relative; top: 1px; font-size: 11px;"><a target="_blank" href="https://map.kakao.com/?from=roughmap&srcid=26846818&confirmid=26846818&q=%EB%A0%88%EB%85%B8%EB%B2%84%EC%84%9C%EB%B9%84%EC%8A%A4%EC%84%BC%ED%84%B0%20%EC%95%88%EC%96%91%EC%A0%90&rv=on" style="float:left;height:15px;padding-top:1px;line-height:15px;color:#000;text-decoration: none;">로드뷰</a><span style="width: 1px;padding: 0;margin: 0 8px 0 9px;height: 11px;vertical-align: top;position: relative;top: 2px;border-left: 1px solid #d0d0d0;float: left;"></span><a target="_blank" href="https://map.kakao.com/?from=roughmap&eName=%EB%A0%88%EB%85%B8%EB%B2%84%EC%84%9C%EB%B9%84%EC%8A%A4%EC%84%BC%ED%84%B0%20%EC%95%88%EC%96%91%EC%A0%90&eX=490570.0&eY=1075616.0" style="float:left;height:15px;padding-top:1px;line-height:15px;color:#000;text-decoration: none;">길찾기</a><span style="width: 1px;padding: 0;margin: 0 8px 0 9px;height: 11px;vertical-align: top;position: relative;top: 2px;border-left: 1px solid #d0d0d0;float: left;"></span><a target="_blank" href="https://map.kakao.com?map_type=TYPE_MAP&from=roughmap&srcid=26846818&itemId=26846818&q=%EB%A0%88%EB%85%B8%EB%B2%84%EC%84%9C%EB%B9%84%EC%8A%A4%EC%84%BC%ED%84%B0%20%EC%95%88%EC%96%91%EC%A0%90&urlX=490570.0&urlY=1075616.0" style="float:left;height:15px;padding-top:1px;line-height:15px;color:#000;text-decoration: none;">지도 크게 보기</a></div></div></div> ```/ ## RRA
  1. https://www.google.co.kr/maps/@37.053745,125.6553969,5z?hl=ko
  2. https://map.kakao.com/
  3. https://map.naver.com/