[러너톤] 카카오맵 api 사용하기

카카오맵을 사용하려면, 

kakaoDevelopers 에 가서 회원가입 후 → 앱 생성 → 앱 키 발급 받으면 된다

 

카카오에서 예제 코드들도 다 제공해주어서 사용하기 정말 편리하다

https://apis.map.kakao.com/web/sample/basicMap/

---

카카오맵 생성

        document.addEventListener('DOMContentLoaded', function() {
            var container = document.getElementById('map');
            var options = {
                center: new kakao.maps.LatLng(33.450701, 126.570667),
                level: 3
            };
            var map = new kakao.maps.Map(container, options);

 

☆주의할 점☆

Kakao Maps API 가 로드된 후에 실행되기 때문에 코드를 앞쪽에 위치시키면 안되고 뒤쪽에 위치시켜야됨.

+) Kakao Maps API와 같은 스크립트는 페이지의 DOM이 완전히 로드된 후 실행되어야 올바르게 동작함

---

마커 생성

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

 

여기서 markerPosition은 마커가 표시될 위치를 나타냄

var markerPosition  = new kakao.maps.LatLng(33.450701, 126.570667);

 

마커가 지도 위에 표시되도록 설정

marker.setMap(map);