카카오맵 api 마커 엑박 문의

카카오맵 API (지도/로컬)
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

import React, { useEffect, useRef, useState } from 'react';
import GreyMarker from './nomalMarker.png';
import BlueMarker from './checkMarker.png';

const ContentsMap = () => {
  const [address, setAddress] = useState('');
  const container = useRef();
  const [kakaoMap, setKakaoMap] = useState(null);

  const [markerInfo, setMarkerInfo] = useState('');

  const onChangeMap = (e) => {
    setAddress(e.target.value);
  };

  useEffect(() => {
    const script = document.createElement('script');
    script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_KEY}&libraries=services&autoload=false`;
    document.head.appendChild(script);

    script.onload = () => {
      window.kakao.maps.load(function () {
        const container = document.getElementById('map');

        const options = {
          center: new window.kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
          level: 3, //지도의 레벨(확대, 축소 정도)
        };

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

        const icon = new window.kakao.maps.MarkerImage(
          'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png',
          new window.kakao.maps.Size(31, 35),
          {
            offset: new window.kakao.maps.Point(16, 34),
            alt: '마커 이미지 예제',
            shape: 'poly',
            coords: '1,20,1,9,5,2,10,0,21,0,27,3,30,9,30,20,17,33,14,33',
          }
        );

        const marker = new window.kakao.maps.Marker({
          map: map,
          position: new window.kakao.maps.LatLng(33.450701, 126.570667),
          image: icon,
        });

    
      });
    };
  }, [container]);



  return (
    <div>
      <div>헬스장 위치</div>
      <div>
        <input placeholder="헬스장 위치검색" onChange={onChangeMap} />
        <div id="map" style={{ width: '100%', height: 312 }} />;
      </div>
    </div>
  );
};

export default ContentsMap;

nextjs 환경에서
카카오맵 마커 이미지를 변경할려고하는데 엑박이 떠서 문의드립니다
png 파일을 import 받아서 적용해주면 엑박이뜨고 예제있는 url을 입력하면 이미지가 바뀐걸로 보이는데
png 파일은 적용이 안되는걸까요?

image

2

png파일도 마커 이미지로 설정 가능합니다.
스샷을 보면 이미지 경로가 잘못 설정돼서 404 에러가 나고 있는 걸로 보입니다.

localhost:3000/[object%20Object]로 호출하고 있는데
경로를 올바르게 설정해서 다시 이미지를 불러와주세요.

3 
import React, { useEffect, useRef, useState } from 'react';
import CheckMarker from '../../../../../../public/checkMarker.svg';

declare global {
  interface Window {
    kakao: any;
  }
}

const KakaoMap = () => {
  const container = useRef();
  const [kakaoMap, setKakaoMap] = useState(null);
  const [markerInfo, setMarkerInfo] = useState('');

  useEffect(() => {
    const script = document.createElement('script');
    script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_KEY}&libraries=services&autoload=false`;
    document.head.appendChild(script);

    script.onload = () => {
      window.kakao.maps.load(function () {
        const container = document.getElementById('map');

        const options = {
          center: new window.kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
          level: 3, //지도의 레벨(확대, 축소 정도)
        };

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

        const markerImage = new window.kakao.maps.MarkerImage(
          CheckMarker,
          new window.kakao.maps.Size(36, 36),
          new window.kakao.maps.Point(13, 34)
        );

        const marker = new window.kakao.maps.Marker({
          map: map,
          position: new window.kakao.maps.LatLng(33.450701, 126.570667),
          image: markerImage,
        });

        setKakaoMap(map);
      });
    };
  }, [container]);

  return <div id="map" style={{ width: '100%', height: 312, borderRadius: '8px' }} />;
};

export default KakaoMap;

경로가 잘못된거같다고 하셔서 next환경에서 이미지를 인식을 못하는거같아서 일단 인식은되게 고쳐놨습니다.
그랬더니 이번에는 해당 코드로 실행하면 아얘 마커 이미지가 바뀌지않고 기본 마커로 뜨고 요청자체가 안가네요.
무엇이 문제일까요…?

4

Create React App 4이상인 경우
import 모듈을 사용할 경우 src 폴더 하위에 위치해야합니다.
https://create-react-app.dev/docs/adding-images-fonts-and-files
버전 확인해서 해당 버전이라면 src 하위로 이동시켜주세요.

그리고 public 폴더의 사용법은 아래 링크 참고해주세요.
https://create-react-app.dev/docs/using-the-public-folder