Javascript
[Javascript] 카카오지도 퍼기기로 삽입한 경우 마커 이미지 변경하는 꼼수
- 2026.07.11 19:47:17
 찾아오시는 길 지도 삽입시 카카오지도 퍼가기 기능을 사용하는 경우가 잦은데, 마커 이미지 변경 옵션을 제공하지 않는게 내심 아쉽다. 아래 꼼수로 마커 디자인을 변경할 수 있다. [!]javascript 코드[/!] 아래와 같이 div.marker 엘리먼트를 추가하고 css로 스타일을 입히면 된다. <script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<script charset="UTF-8"> // 기존 카카오지도 삽입 코드 new daum.roughmap.Lander({ "timestamp" : "1783766147601", "key" : "2f8d3uodnfkx", "mapWidth" : "100%", "mapHeight" : "480" }).render(); // marker 교체 document.addEventListener('DOMContentLoaded', () => { setTimeout(() => { const marker = document.querySelector( '.contact_box .map_wrap img[src="//t1.kakaocdn.net/localimg/localimages/07/2018/pc/map/marker_map01.png"]' ); if (marker) { marker.insertAdjacentHTML('afterend', '<div class="marker"></div>'); marker.style.display = 'none'; } }, 300); }); </script> |