작업

카카오맵 api 사용하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!-- html tag -->
<div id="map" style="width:500px;height:500px;"></div>
 
 
 
<!-- script -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은자바스크립트키&libraries=services,clusterer"></script>
 
<script type="text/javascript">
    var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
    var options = { //지도를 생성할 때 필요한 기본 옵션
    center: new daum.maps.LatLng(33.450701126.570667), //지도의 중심좌표.
    level: 3 //지도의 레벨(확대, 축소 정도)
    };
 
    var map = new daum.maps.Map(container, options); //지도 생성 및 객체 리턴
 
 
    // 주소-좌표 변환 객체를 생성합니다
    var geocoder = new daum.maps.services.Geocoder();
 
    // 주소로 좌표를 검색합니다
    geocoder.addressSearch('제주특별자치도 제주시 영평동'function(result, status) {
 
        // 정상적으로 검색이 완료됐으면 
         if (status === daum.maps.services.Status.OK) {
 
            var coords = new daum.maps.LatLng(result[0].y, result[0].x);
 
            // 결과값으로 받은 위치를 마커로 표시합니다
            var marker = new daum.maps.Marker({
                map: map,
                position: coords
            });
 
            // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
            map.setCenter(coords);
        } 
    });    
</script>
cs