카카오맵 쉽게 사용하는 자바스크립트 함수

1. 문서 상단에 아래의 자바스크립트 함수를 하나 정의해 줍니다.

[code]

<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>

[/code]

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 에서 한번 실행해 보세요. 냑과 나베르 물산의 지도입니다.

[code]

<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>

[/code]