다음지도 api - 주소로 표시하기 > 소스코드

본문 바로가기

회원로그인

회원가입

소스코드

자바스크립트 다음지도 api - 주소로 표시하기

페이지 정보

profile_image
작성자 최고관리자
댓글 0건 조회 80회 작성일 22-05-13 21:36

본문


<div id="map" style="width:100%;height:350px;">aaa</div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=api키입력&libraries=services"></script>
<script>
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
            center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
            level: 3 // 지도의 확대 레벨
        };

    // 지도를 생성합니다
    var map = new kakao.maps.Map(mapContainer, mapOption);

    // 주소-좌표 변환 객체를 생성합니다
    var geocoder = new kakao.maps.services.Geocoder();

    // 주소로 좌표를 검색합니다
    geocoder.addressSearch("제주특별자치도 제주시 첨단로 242", function(result, status) {

        // 정상적으로 검색이 완료됐으면
        if (status === kakao.maps.services.Status.OK) {

            var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

            // 결과값으로 받은 위치를 마커로 표시합니다
            var marker = new kakao.maps.Marker({
                map: map,
                position: coords
            });

            // 인포윈도우로 장소에 대한 설명을 표시합니다
            var infowindow = new kakao.maps.InfoWindow({
                content: '<div style="width:150px;text-align:center;padding:6px 0;line-height:20px;">테스트 1<br />테스트 2</div>'
            });
            infowindow.open(map, marker);

            // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
            map.setCenter(coords);
        }
    });
</script>

댓글목록

등록된 댓글이 없습니다.