카카오 지도를 연동한 지도 서비스

kakao map API 사용 방법

https://apis.map.kakao.com/web/guide/
위 카카오 사이트에서 사용 방법을 참고해 사용하시면 됩니다.

등록하기

1. 카카오 개발자 사이트에 접속해서 로그인을 한 뒤
   내 애플리케이션 메뉴에 접속한다.
   

2. 애플리케이션 추가하기 버튼을 클릭하여 애플리케이션 하나를 만들고
   해당 애플리케이션을 클릭하면 앱키 여러 개가 나오는데 이 중 JavaScript 키를 사용할 것이다.
   

3. 왼쪽의 플랫폼 메뉴로 이동하여 Web 사이트 도메인을 등록한다.
   (해당 프로젝트에서는 live server의 로컬 주소를 입력하였습니다.)
   

코드 작성

코드 작성 전에 필요한 등록들은 마무리 되었고 이제 Kakao Maps API 사이트의 시작하기 부분을 참고하여 지도 관련 코드들을 작성하면 된다.

1. 지도를 담을 영역 만들기

<div id="map" style="width: 500px; height: 500px"></div>

2. 실제 지도를 그리는 Javascript API를 불러오기

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

3. 지도를 띄우는 코드 작성

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

var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

center와 level 옵션은 지도를 처음 로드했을 때 보여줄 위치와 얼만큼 확대된 상태를 보여줄 건지를 결정한다.

작성이 완료되면 다음과 같이 지도가 생성됩니다.

마커 표시하기

Kakao Maps API 사이트의 '여러 개 마커 표시하기' 글을 참고해 사용하시면 됩니다.

1. 마커 생성하기

const createMarker = () => {
  const imageSrc = './images/markerStar.png';
  const imageSize = new kakao.maps.Size(24, 35);
  return new kakao.maps.MarkerImage(imageSrc, imageSize);
};

2. 마커 표시하기

const displayMarker = (latlng) => {
  new kakao.maps.Marker({
    map: map, // 마커를 표시할 지도
    position: latlng, // 마커를 표시할 위치
    image: createMarker(), // 마커 이미지
  });
};

const createShopElement = () => {
  shops.forEach((shop) => {
    const { latlng } = shop;

    displayMarker(latlng);
  });
};

다음과 같이 마커가 지도에 표시됩니다.

infowindow

Kakao Maps API 사이트의 '마커에 인포윈도우 표시하기' 글을 참고해 사용하시면 됩니다.

마커 위에 해당 마커에 대한 상호명을 표시하고 클릭하면 해당 마커 정보를 갖는 지도 상세 페이지로 이동하는 infowindow를 생성해보면

const createShopElement = () => {
	shops.forEach((position) => {
    const { id, name, latlng } = position;

    const marker = displayMarker(latlng);

    // 1. 인포윈도우 생성하기 
    const infowindow = new kakao.maps.InfoWindow({
    	content: `<div style="width:150px;text-align:center;padding:6px 2px;">
        	<a href="https://place.map.kakao.com/${id}" target="_blank">${name}</a>
           	</div>`,
      });
      // 2. 마커 위에 인포윈도우 표시하기
      infowindow.open(map, marker);
    });
  };

다음과 같이 infowindow가 나온다.