2. 카카오 지도 api 원하는 위치 정보 활용+마커적용하기 (초보자용)

카카오 지도 api 원하는 위치 정보 활용+마커적용하기 (초보자용)

1.  구글 어스 등 좌표를 확인할 수 있는 지도 사이트를 통해 위도, 경도 값을 가져옵니다.

https://www.google.co.kr/intl/ko/earth/

 

2. 카카오 지도 스크립트의 중심좌표 위치(위도,경도) 값을 수정합니다.

var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
        var options = { //지도를 생성할 때 필요한 기본 옵션
            center: new kakao.maps.LatLng(위도, 경도), //지도의 중심좌표.
            level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

 

중심좌표 위치에 마커표시하기

3. 위에서 알아낸 위도/경도 값을 저장하는 변수를 생성합니다.

var markerPosition  = new kakao.maps.LatLng(위도, 경도);

 

4. 해당 변수를 이용하여 카카오 맵에 위치(마커) 설정을 해줍니다.

var marker = new kakao.maps.Marker({
	position: markerPosition
});

 

5. 마커가 지도 위에 표시되도록 위 2번에서 작성한 지도 생성 및 객체 리턴 변수를 연결해줍니다.

marker.setMap(map);

 

*최종코드*

var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
    center: new kakao.maps.LatLng(37.493143, 126.722690), //지도의 중심좌표.
    level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
var markerPosition  = new kakao.maps.LatLng(37.493143, 126.722690); 
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
    position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

 

 

 

아래와 같은 결과를 최종적으로 확인할 수 있습니다.