카카오 지도 API - 여러개 마커 표시

let [imgShow, setImgShow] = useState("./cow_img.png");  // 마커 이미지
let [mapLevel, setMapLevel] = useState(3);  // 지도 확대/축소
let [mapLatlng, setMapLatlng] = useState({ La: 126.911915228347, Ma: 35.1726725437801 }); // 지도 중심좌표 값

 

useEffect 안에 작성

// 마커를 표시할 위치와 title 객체 배열입니다
    let positions = [
      {
        title: '전대 메가박스',
        latlng: new kakao.maps.LatLng(35.1726364128528, 126.91255590973)
      },
      {
        title: '현대자동차 중흥대리점',
        latlng: new kakao.maps.LatLng(35.1726725437801, 126.911915228347)
      },
      {
        title: '광주북구청어린이집 ',
        latlng: new kakao.maps.LatLng(35.1731004834826, 126.91175734965)
      },
      {
        title: '화신주방산업',
        latlng: new kakao.maps.LatLng(35.1723456039068, 126.911767276505)
      },
      {
        title: '서울시청',
        latlng: new kakao.maps.LatLng(37.5626231544518, 126.976425200039)
      }
    ];

    for (let i = 0; i < positions.length; i++) {

      // 마커 이미지의 이미지 크기 입니다
      let imageSize = new kakao.maps.Size(35, 35);

      // 마커 이미지를 생성합니다    
      let markerImage = new kakao.maps.MarkerImage(imgShow, imageSize);

      // 마커를 생성합니다
      let marker = new kakao.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: positions[i].latlng, // 마커를 표시할 위치
        title: positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
        image: markerImage // 마커 이미지 
      });

 

실행 화면

 

[ 참고 ]

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