홈페이지에 카카오맵 넣기 -api x

1. 카카오맵

카카오맵

2. 왼쪽 상단 검색창에 장소 및 주소 입력

3. 해당 장소 클릭 - 아래 사진에서 A (2) 부분 클릭하면 3번 창이 나온다.  이후 4 클릭

4. html태그 복사

5. 소스 생성하기

6. 소스 복사  - 일반지도

7. 소스 붙여넣기 (ctrl + v)

<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1697159972933" 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" : "1697159972933",
		"key" : "2gfm3",
		"mapWidth" : "640",
		"mapHeight" : "360"
	}).render();
</script>

8. 결과

100m

로드뷰길찾기지도 크게 보기

9. 이미지 지도넣기

<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=527948.0&amp;urlY=1089063.0&amp;itemId=11560806&amp;q=%EC%84%B1%EB%82%A8%EC%8B%9C%EC%B2%AD&amp;srcid=11560806&amp;map_type=TYPE_MAP&amp;from=roughmap" target="_blank"><img class="map" src="http://t1.daumcdn.net/roughmap/imgmap/f2c4bd3c5b57f4b00540127d64db7e12660b39c0422a852484668f411123e85f" 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&amp;srcid=11560806&amp;confirmid=11560806&amp;q=%EC%84%B1%EB%82%A8%EC%8B%9C%EC%B2%AD&amp;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&amp;eName=%EC%84%B1%EB%82%A8%EC%8B%9C%EC%B2%AD&amp;eX=527948.0&amp;eY=1089063.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&amp;from=roughmap&amp;srcid=11560806&amp;itemId=11560806&amp;q=%EC%84%B1%EB%82%A8%EC%8B%9C%EC%B2%AD&amp;urlX=527948.0&amp;urlY=1089063.0" style="float:left;height:15px;padding-top:1px;line-height:15px;color:#000;text-decoration: none;">지도 크게 보기</a></div></div></div>

10. 이미지 지도 결과

로드뷰길찾기지도 크게 보기