카카오맵 쉽게 사용하는 자바스크립트 함수 정보
카카오맵 쉽게 사용하는 자바스크립트 함수
본문
1. 문서 상단에 아래의 자바스크립트 함수를 하나 정의해 줍니다.
<script src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<script>
function kakaoMap(...map) {
document.write("<div id='" + "daumRoughmapContainer" + map[0] + "' class='root_daum_roughmap root_daum_roughmap_landing' style='width:100%;box-sizing:border-box'></div>");
new daum.roughmap.Lander({
"timestamp" : map[0], "key" : map[1], "mapWidth" : "100%",
"mapHeight" : document.querySelector("#daumRoughmapContainer" + map[0]).offsetWidth * map[2] / 100 - 32
}).render();
}
</script>
2. 아래쪽에는 이 함수에 매개변수를 3개 넣어서 호출해 줍니다.
<script>kakaoMap("1669736880249", "2csg4", 60);</script>
<script>kakaoMap("1669739269026", "2csge", 50);</script>
3. 세번째 매개변수 숫자는 카카오맵의 가로사이즈에 대한 세로 퍼센트입니다. 즉 가로길이가 1000픽셀이고 60을 주었다면 세로길이는 600픽셀이 되겠지요.
첫번째와 두번째의 매개변수는 아래 그림을 참고하여 추출합니다.
카카오지도 페이지로 들어가서... https://map.kakao.com/
4. 가로사이즈를 잡기 위해서는 div 등을 하나 감아주는 것이 좋습니다.
<div style="width:500px;margin:0 auto"><script>kakaoMap("1669736880249", "2csg4", 60);</script></div>
<div style="width:100%"><script>kakaoMap("1669739269026", "2csge", 50);</script></div>
5. 백문이 불여일견. 아래 코드를 http://www.mediaplayer.kr/main/bbs/html_editor.php 에서 한번 실행해 보세요. 냑과 나베르 물산의 지도입니다.
<script src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<script>
function kakaoMap(...map) {
document.write("<div id='" + "daumRoughmapContainer" + map[0] + "' class='root_daum_roughmap root_daum_roughmap_landing' style='width:100%;box-sizing:border-box'></div>");
new daum.roughmap.Lander({
"timestamp" : map[0], "key" : map[1], "mapWidth" : "100%",
"mapHeight" : document.querySelector("#daumRoughmapContainer" + map[0]).offsetWidth * map[2] / 100 - 32
}).render();
}
</script>
<div style="width:500px;margin:0 auto"><script>kakaoMap("1669736880249", "2csg4", 60);</script></div>
<div style="width:100%"><script>kakaoMap("1669739269026", "2csge", 50);</script></div>
추천
14
14
댓글 27개
좋은 팁 대단히 감사 합니다.
@들레아빠
감사합니다. 들레아빠님
감사합니다. 들레아빠님
좋은자료감사합니다.
@푸른산타 푸른산타님 고마워요
👍
@소시 👍
감사합니다.
@브러운아이 감사합니다.
정말 매번 감사합니다. ^^:
@아이스웨덴™
사실 게시판에서 적용이 어려운데다 코드 짜기가 귀찮아서 모바일 가로 세로 변환시 세로 사이즈를 다시 리사이징해 주는 코드를 안 넣었어요.
게시글에 쉽게 적용하는 방법을 구상하고 있습니다. 그런데 코드짜기는 더 성가시겠네요.ㅜㅠ
사실 게시판에서 적용이 어려운데다 코드 짜기가 귀찮아서 모바일 가로 세로 변환시 세로 사이즈를 다시 리사이징해 주는 코드를 안 넣었어요.
게시글에 쉽게 적용하는 방법을 구상하고 있습니다. 그런데 코드짜기는 더 성가시겠네요.ㅜㅠ
감사합니다.^^
@HackerFactory 감사합니다
감사합니다^^ 근데 이거 세로 길이를 px로 고정해서 보이게 할수도 있나요? 모바일 접속시에는 세로 폭이 많이 줄어들어서 좀 커졌으면 해서요!
@스펀지둘
음.. 그럴 때는 모바일모드와 pc모드를 분기해야죠.
모바일모드와 pc모드를 분기하는 자바스크립트는 본인이 만들기에 따라서 다른데
저는 보통 편하게 스크린 크기를 따져서 스크린의 세로가 가로보다 클 때는 모바일모드, 아니라면 pc모드로 판단하는 로직을 사용합니다. 이에 따라서...
<script>kakaoMap("1669736880249", "2csg4", 60);</script>
를 아래처럼요. 모바일일 때는 120퍼센트로, pc에서는 60퍼센트로 사이즈가 나타나겠죠.
<script>kakaoMap("1669736880249", "2csg4", screen.width < screen.height ? 120 : 60);</script>
픽셀 고정값으로 주는 것은 코드는 무지 쉽지만 요즘 같은 반응형 시대에 제가 쌍수를 들고 반대하는 입장이라 따로 소스를 드리진 않겠습니다. 이해하시길요.
음.. 그럴 때는 모바일모드와 pc모드를 분기해야죠.
모바일모드와 pc모드를 분기하는 자바스크립트는 본인이 만들기에 따라서 다른데
저는 보통 편하게 스크린 크기를 따져서 스크린의 세로가 가로보다 클 때는 모바일모드, 아니라면 pc모드로 판단하는 로직을 사용합니다. 이에 따라서...
<script>kakaoMap("1669736880249", "2csg4", 60);</script>
를 아래처럼요. 모바일일 때는 120퍼센트로, pc에서는 60퍼센트로 사이즈가 나타나겠죠.
<script>kakaoMap("1669736880249", "2csg4", screen.width < screen.height ? 120 : 60);</script>
픽셀 고정값으로 주는 것은 코드는 무지 쉽지만 요즘 같은 반응형 시대에 제가 쌍수를 들고 반대하는 입장이라 따로 소스를 드리진 않겠습니다. 이해하시길요.
@비타주리 네 감사합니다!
감사 드려요.
@써맨
감사합니다.
감사합니다.
좋은 정보 감사합니다.
@하늘뚱 감사합니다.
좋은 정보 감사합니다.
@성철스 감사합니다
네이버 맵도 이런방법으로 가능하나요 ??
@빠왕 네이버 클라우드 플랫폼에 가입해야 되는데 저는 체질적으로 가입, 승인, 인증해야 key 를 받거나 사용이 가능한 것들은 처음부터 투자받고 하는게 아니라면 쳐다보지도 않아서요.
위 조건이 만족된다면 어차피 자바스크립트로 만드는 거라면 난이도는 유사하지 않을까 싶네요.
본인의 전공이 js 라면 별로 어렵지 않을 것 같습니다.
위 조건이 만족된다면 어차피 자바스크립트로 만드는 거라면 난이도는 유사하지 않을까 싶네요.
본인의 전공이 js 라면 별로 어렵지 않을 것 같습니다.
감사합니다.
@써맨 감사합니다
감사합니다.
@Ryanhong1233 감사합니다
