카카오지도 API

사실 카카오지도 API 에 샘플용 소스코드가 너무 잘나와 있어서 검색해서 찾아보면 쉽게 구현 가능하다.

Kakao 지도 Web API Sample

밑에 예제는 a 태그 클릭 시 해당 좌표값으로 이동(지도 중앙으로)하는 간단한 예제이다.

<script>
	var mapContainer = document.getElementById('surr_map'), // 지도를 표시할 div  
	    mapOption = { 
	        center: new kakao.maps.LatLng(35.5504632,127.7590655), // 지도의 중심좌표
	        level: 3 // 지도의 확대 레벨
	    };
	
	var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
	var imageSize = new kakao.maps.Size(24, 35); 
	
	function setCenter(num1,num2) {
		
	    // 이동할 위도 경도 위치를 생성합니다 
	    var moveLatLon = new kakao.maps.LatLng(num1, num2);
	    // 지도 중심을 부드럽게 이동시킵니다
	    // 만약 이동할 거리가 지도 화면보다 크면 부드러운 효과 없이 이동합니다
	    map.setCenter(moveLatLon);            
	}
	</script>
<div class="title"><i class="i-marker">1</i><a href="javascript:void(0)" onclick="setCenter('35.5504632','127.7590655');">경상남도 제 2종합관광안내소</a></div>
<div class="title"><i class="i-marker">2</i><a href="javascript:void(0)" onclick="setCenter(35.2383301,128.6564595);">경상남도 종합관광정보센터</a></div>