주소를 이용하여 카카오지도의 마커 활성화하기

DAUM MAP API서비스가 중단되면서 카카오 API로 변경해주는 작업을 위주로 하고 있습니다.

http://apis.map.daum.net/web/sample/markerWithInfoWindow/ 의 샘플 사이트를 확인하시면 특정 좌표를 이용하여 마커를 활성화 할 수 있었지만, 이번에 다루는것은 좌표 없이 주소만으로도 마커를 활성화할 수 있습니다.

 

아래는 샘플코드입니다.

 

여기서 주의할 점은 자바스크립트가 html 태그보다 아래에 있어야 합니다.

<!-- 지도를 보여주는 html -->
<div id="map" style="width: 100%; height: 600px; position: relative; overflow: hidden; background:url('./pages/image/loading_n.png'); margin-top:2%;"></div>

<!-- 자바스크립트 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트키&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };  
// 지도를 생성합니다    
var map = new daum.maps.Map(mapContainer, mapOption); 
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch('인천 미추홀구 경인로 198-8', 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
        });
        // 인포윈도우로 장소에 대한 설명을 표시합니다
        var infowindow = new daum.maps.InfoWindow({
            content: '<div style="width:150px;text-align:center;padding:6px 0;">마커의 내용을 입력해주세요</div>'
        });
        infowindow.open(map, marker);
        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
    } 
});    
</script>

 

자바스크립트 키는 카카오에서 발급받으시면 됩니다.

https://developers.kakao.com

 

 

 

 

참 웃기죠... 

APP KEY는 카카오에서... 

지도 API Sample은 다음에서....

 

카카오를 통해 새 애플리케이션을 만드시고 플랫폼 - 플랫폼 추가 - 웹 - 사용하시는 도메인을 입력해주셔야 합니다.

참, 위 코드가 제대로 실행되지 않을 경우 주소입력에 오류가 있기 때문입니다.

 

카카오맵을 통해 주소를 검색해보시고 반환되는 주소를 넣어주시면 아주 자알 되실 겁니다.

https://map.kakao.com/