본문 바로가기

카테고리 없음

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

반응형
# 지도 퍼오기 (다음 카카오, 네이버, 구글) 지도를 삽입하면서 글을 쓸 일이 생겼는데, 이 참에 3가지 지도 서비스 중 어떤것이 제일 나은지 알아보려고 함. ## TOC ## 구글 구글은 iframe 으로 퍼오도록 되어있고.
코드는 ``` <div class="rC"><div class="rSC"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6338.9502741434235!2d126.975694!3d37.402243!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b6755947b14d3%3A0x4fa3b3ab2668672d!2z66CI64W467KE7JWI7JaR7IS87YSw!5e0!3m2!1sko!2skr!4v1707387351227!5m2!1sko!2skr" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div></div> ```/ ## 네이버 맵 네이버는 API https://www.ncloud.com/product/applicationService/maps 이용해야 하는듯? 가입하고 사용등록을 해야만 퍼올 수 있는듯한... https://navermaps.github.io/maps.js.ncp/https://jisoo-log.tistory.com/12 도 참고. 한번 배워서 지도 퍼와볼려고 했는데, 문서도 너무 불친절하고 짜증난다 ㅡ,.ㅡ;;; 나중에 해야지.
## 다음 카카오 (daum 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/
반응형