6/18 TIL (카카오 지도 연동)

📖 진행한 공부 📖

• 카카오 지도 API 연동

카카오 지도 API 연동

1. 카카오 개발자사이트 (https://developers.kakao.com) 접속
2. 개발자 등록 및 앱 생성
3. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록
4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록 (예: http://localhost:8080)
5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용
6. 앱을 실행

index.html

BasicMap.jsx

export default function BasicMap() {
  useKakaoLoader();

  const [info, setInfo] = useState(null); 
  const [markers, setMarkers] = useState([]);
  const [map, setMap] = useState(null);
  const [keyword, setKeyword] = useState("서울 미술관");
  const [places, setPlaces] = useState([]);

  useEffect(() => {
    if(!map) return; 

    const ps = new kakao.maps.services.Places();

    ps.keywordSearch("서울 미술관", (data, status, _pagination) => {
      if(status === kakao.maps.services.Status.OK) {
        const bounds = new kakao.maps.LatLngBounds();
        let markers = [];
        let places = [];

        for (let i = 0; i < data.length; i++) {
          markers.push({
            position: {
              lat: data[i].y,
              lng: data[i].x,
            },
            content: data[i].place_name,
          });
          places.push({
            name: data[i].place_name,
            address: data[i].address_name,
          })
          bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x))
        }
        setMarkers(markers);
        map.setBounds(bounds);
        setPlaces(places);
      }
    })
  }, [map, keyword]);

  const handleSearch = (e) => {
    e.preventDefault();
    const keywordInput = e.target.keyword.value;
    setKeyword(keywordInput);
  }

  return (
    <>
      <div className="w-[1440px] h-[920px] flex m-auto">
        <div className="w-[320px] h-[920px] bg-amber-200">
          <img src={logoImage} alt="logo" className="mb-4"/>
          <form onSubmit={handleSearch}>
            <input
              type="text"
              name="keyword"
              placeholder="키워드 입력"
              className="w-full p-2 mb-2 border"
            />
            <button type="submit" className="w-full p-3 text-white bg-blue-500">
              검색
            </button>
          </form>
          <div className="max-h-[250px] overflow-y-auto bg-white">
            {places.map((place, index) => (
              <div key = {index} className="p-2 mt-2 border-b ">
                <div className="p-2 mb-2 border border-black rounded-md">{place.name}</div>
                <div className="text-yellow-600">{place.address}</div>
              </div>
            ))}
          </div>
        </div>
        <div>
          <Map
            id="map"
            className="w-[1120px] h-[920px]"
            level={3}
            onCreate={setMap}
            center={{
              lat: 37.564214,
              lng: 127.001699
            }}
          >
             {markers.map((marker) => (
        <MapMarker
          key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}
          position={marker.position}
          onClick={() => setInfo(marker)}
        >
          {info &&info.content === marker.content && (
            <div style={{color:"#000"}}>{marker.content}</div>
          )}
        </MapMarker>
      ))}
    </Map>
        </div>
      </div>
    </>
  );
}

react kakao maps sdk 해당 공식 문서를 참고해서 마커 기능까지 구현을 해놨다
App.jsx

지도 API 연동을 하고 팀원 분이 만드신 ui에 병합한 모습

지도 API를 연동시키면서 분명 코드상 문제는 없는 거 같은데 화면에 타이틀도 안 보이고 아무것도 안 보여서 당황했던 적이 있었는데..

body쪽 script를 지워버려서 안됐던 거기에 다시 추가를 해줬더니 바로 해결됐다.

sdk 가이드에선 목록으로 표출하기가 없길래 Kakao maps api 사이트에서 목록으로 표출하기 를 참고해 목록으로 표출하고 스크롤까지 성공

이 부분을 구현하면서 오픈 API를 잘 이용하는 것도 생각보다 어렵단 생각이 많이 들었다 ㅠㅠ

생각보다 진척도가 빨라서 아마 목요일 전엔 끝나지 않을까 싶다! 아마도