[다음] 홈페이지에 간단하게 지도 삽입하는 방법(상호추가하여) > 기술자료

• 목록

1. https://map.kakao.com 접속

2. 검색창에 상호 또는 주소 입력

3-1. 상호검색 결과가 있을때
-. 검색결과의  상세보기 클릭
-. 상세화면 우측 상단에  약도만들기  클릭
-. 소스 생성하기

3-2. 주소로만 검색가능할때
-. 검색결과 화면에서  지도공유  >  지도 퍼가기   클릭
-. 지도퍼가기 화면에서  주소를 마우스 클릭해서  적절한 단어로 변경
-. 지도 크기 등 정보 변경

4.. 소스 생성하기

5. 홈페이지에 삽입 

사용방법 : http://blog.daum.net/daummaps/482 



https://  홈페이지에서 오류날때
생성된 소스내용중
<script charset="UTF-8" class="daum_roughmap_loader_script" src="http://dmaps.daum.net/map_js_init/roughmapLoader.js"></script>
로 인해서 https:// 홈페이지에 적용하면 보안오류 경고창이 뜨는 경우가 있습니다.

이때는 
<script charset="UTF-8" class="daum_roughmap_loader_script" src="http://dmaps.daum.net/map_js_init/roughmapLoader.js"></script>
를
<script>
(function(){var c=(location.protocol=="https:")?"https:":"http:";var a="9aa685d2";if(window.daum&&window.daum.roughmap&&window.daum.roughmap.cdn){return}window.daum=window.daum||{};window.daum.roughmap={cdn:a,URL_KEY_DATA_LOAD_PRE:c+"//t1.daumcdn.net/roughmap/",url_protocal:c};var b=c+"//t1.daumcdn.net/kakaomapweb/place/jscss/roughmap/"+a+"/roughmapLander.js";document.write('<script charset="UTF-8" src="'+b+'"><\/script>')})();
</script>
로 교체하면 보안문제 알림창 없이 잘 지도가 보입니다.



반응형 홈페이지에 지도 삽입할때
1. 약도노드에 style="width:100%" 추가
<div id="daumRoughmapContainer*********" class="root_daum_roughmap root_daum_roughmap_landing" style="width:100%"></div>
 
2. 실행스크립트의 mapWidth 를 주석처리
//"mapWidth" : "640",
"mapWidth" : "640",


참고자료
https://sir.kr/qa/297381