[JavaScript] Kakao Map API

 

📌 카카오맵 api 시작하기

Kakao Developers

 

 

🌏 지도 띄우기

Kakao Map API를 발급 받았다면 이제 지도를 사용할 수 있다. `html` 파일에 다음과 같은 스크립트를 추가한다.

 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR_API_KEY&libraries=services"></script>

 

 

`html`에 `map`을 띄울 적당한 요소를 만든다.

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

 

 

다음과 같이 js 코드를 작성하면 지도를 띄울 수 있다.

  const mapContainer = document.querySelector(".map"); // 지도를 표시할 div

  const mapOption = {
    center: new kakao.maps.LatLng(latitude, longitude), // 지도의 중심좌표 (위도, 경도)
    level: 6, // 지도의 확대 레벨. 클수록 멀리 보임
  };

  // 지도 생성
  const map = new kakao.maps.Map(mapContainer, mapOption);

 

쨘

 

[지도 생성하기]

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

 

 

 

🌏  지도에 마커 추가하기

const mapContainer = document.querySelector(".map"); // 지도를 표시할 div

const mapOption = {
center: new kakao.maps.LatLng(latitude, longitude), // 지도의 중심좌표 (위도, 경도)
level: 6, // 지도의 확대 레벨. 클수록 멀리 보임
};

// 지도 객체 생성
const map = new kakao.maps.Map(mapContainer, mapOption);
  
  
const marker = new kakao.maps.Marker({
  map: map,
  position: new kakao.maps.LatLng(latitude, longitude),
});

 

 

[마커 띄우기]

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

 

 

 

🌏  커스텀 마커 만들기

  const mapContainer = document.querySelector(".map"); // 지도를 표시할 div

  const mapOption = {
    center: new kakao.maps.LatLng(latitude, longitude), // 지도의 중심좌표 (위도, 경도)
    level: 6, // 지도의 확대 레벨. 클수록 멀리 보임
  };

  // 지도 생성
  const map = new kakao.maps.Map(mapContainer, mapOption);


// 커스텀 마커 만들기
const customMarkerImage = new kakao.maps.MarkerImage(
  "images/marker-red.png", // 마커 이미지 URL
  new kakao.maps.Size(35, 35), // 마커 이미지 크기
  {
    offset: new kakao.maps.Point(17, 35), // 마커의 중심점 위치
  }
);


// 내 위치 마커 추가
new kakao.maps.Marker({
  position: new kakao.maps.LatLng(
    latitude,
    longitude
  ),
  map: map,
  clickable: true,
  image: customMarkerImage,
});

 

 

 

 

 

[커스텀 마커 만들기]

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

 

 

 

 

🌏  마커에 이벤트 추가하기

  kakao.maps.event.addListener(marker, "mouseover", function () {
      infowindow.open(map, marker);
      spot.style.outline = "solid 2px #96b9ff";
    });

 

    kakao.maps.event.addListener(marker, "click", () => {
      spot.style.backgroundColor = "#96b9ff";
      spot.style.outline = "";
      spot.style.color = "white";

      const spotDiv = document.querySelector(`[data-id="${place.id}"]`);
      if (spotDiv) {
        spotDiv.scrollIntoView({
          behavior: "smooth", // 스크롤 애니메이션 (부드럽게)
          block: "start", // 요소의 상단으로 스크롤 정렬
          inline: "nearest", // 수평 위치도 맞춤
        });
      }
    });

 

 

 

[마커 마우스 이벤트 추가하기]

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

 

[마커 클릭 이벤트 추가하기]

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

 

 

 

🌏  지도 중심 변경하기

// 이동할 위도 경도 위치를 생성
var moveLatLon = new kakao.maps.LatLng(latitude, longitude);
// 지도 중심 이동
map.panTo(moveLatLon); // 부드럽게 이동. 단, 지도 내에 해당 위치가 없다면 일반 이동

 

 

 

 

🌏  키워드로 검색하기

  // 장소 검색 객체 생성
  const ps = new kakao.maps.services.Places();

  // 키워드 검색
  ps.keywordSearch(
    // keywordSearch(keyword, callback(data, status, pagination), locationInfo)
    "키워드",
    (data, status, pagination) => {
     // 여기에 검색 후 로직
    }, // callback 함수
    {
      location: new kakao.maps.LatLng(
        myLocation.latitude,
        myLocation.longitude
      ), // 중심 위치
      radius: 1000, // 반경 1km
      sort: "distance", // 거리순 정렬
    } // 중심이 될 위치 정보
  );

 

 

`radius` 찾고자 하는 중심 위치와 반경을 설정할 수 있다. 

`sort` 거리순, 이름순, 관련도순으로 정렬할 수 있다.

 

 

`keywordSearch` 는 `data` `status` `pagination`을 반환한다. `data`에는 검색 결과 15개가 담겨있고, 결과가 15개 이상일 경우 `pagination` 을 통해 접근해야한다. 

 

다음과 같은 조건문으로 상태가 올바를 때만 로직을 수행할 수 있다.

if (status === kakao.maps.services.Status.OK)

 

 

`data` 에는 검색 결과(1페이지)가 담겨있다. 

 

 

`pagination` 은 검색 결과의 페이지 객체다.

`hasNextPage`는 다음 페이지의 존재 여부를 반환한다.

`nextPage()` 를 호출하면 다음 페이지를 볼 수 있으며 해당 메서드는 `keywordSearch`의 콜백함수를 자동으로 다시 호출한다.

 

 

[키워드로 장소 검색하기]

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