다음지도api(카카오맵) - 작업기(2)

주소로 장소를 표시하고 좌표값 불러오기 DB에 저장할 필요가 있어 작업을 해본다.

이번엔 주소로 좌표 값 구하기......

주소 입력후 검색시 좌표값을 구하는 방법이다

<div id="map" style="width:700px; height:500px"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키값&libraries=services"></script>

기본 구성은 같지만 다음 api 라이브러리를 사용해야 함으로 키값 뒤에 "libraries=services" 를 추가 해줘야 한다.

다음지도 api 라이브러리에서 내용은 저렇다.

<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('서울시 어쩌구 저쩌구 111', 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;">우리회사</div>'

        });

        infowindow.open(map, marker);

        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다

        map.setCenter(coords);

    } 

});

</script>

여기서 검색부분과 좌표를 얻어오는 것을 만들기 위해 다음과 같이 추가 해주었다.

<div>

<input type="text" id="search_name" />

<input type="button" value="search" onclick="add_search()" />

</div>

<div>

<input type="text" id="search_lat" /> <-- lat 좌표값을 불러올 부분

<input type="text" id="search_lng" /> <-- lng 좌표값을 불러올 부분

</div>

<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();

// 주소로 좌표를 검색합니다

function add_search(){

var add_search = document.getElementById('search_name').value;

geocoder.addressSearch(add_search, 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

        });

document.getElementById('search_lat').value = result[0].y;

document.getElementById('search_lng').value = result[0].x;

        // 인포윈도우로 장소에 대한 설명을 표시합니다

        var infowindow = new kakao.maps.InfoWindow({

            content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'

        });

        infowindow.open(map, marker);

        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다

        map.setCenter(coords);

    } 

});

}

</script>

위와 같이 해주니 정상적으로 잘 불러 오고 있다.

구글map api와 비슷한 부분이 많아 조금은 수월 하게 작업을 하고는 있다. 조금은 다음map api가 쉬운 느낌을 받는다.