[javascript] 카카오지도 api 지도에 마커 표시하기

 

카카오 지도를 script로 화면상에 간편하게 표시하는 api 이다.

내가 사용한 함수의 경우, 특정 위치에 마커가 표시되는 함수이다. 

 

 

 

카카오 스크립트 호출

소스 상단에 카카오 지도를 호출할 수 있는 script를 호출해준다.

appKey의 경우 카카오 개발자센터에서 부여받은 키를 입력해주면 된다. 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={appKey}"></script>

 

html 태그 작성

지도를 노출해줄 html 영역을 그려준다. 

<div id="map"  class="map"></div>

 

script 작성

$(document).ready(function(){

  var container = document.getElementById('map');
  var options = {
      center: new kakao.maps.LatLng(37.526747, 126.898989), // 경도, 위도
      level: 3 //지도의 확대 레벨
  };

  var map = new kakao.maps.Map(container, options);

  // 지도를 클릭한 위치에 표출할 마커입니다
  var marker = new kakao.maps.Marker({ 
      // 지도 중심좌표에 마커를 생성합니다 
      position: map.getCenter() 
  }); 
  // 지도에 마커를 표시합니다
  marker.setMap(map);
});

 

 

경도위도 가져오기

구글맵에서 가져오고자하는 주소의 경도위도를 검색 후

핀의 오른쪽 단추를 클릭하면 경도 위도를 알 수 있다.