MapForLoaction.js

import { Map, MapMarker } from "react-kakao-maps-sdk";
import React, { useRef, useState, useEffect, useContext } from 'react';

const { kakao } = window;

function MapLocator({ loc, keyword }) {
  // 아주대학교를 기본 위치로 설정
  const [info, setInfo] = useState()
  const [markers, setMarkers] = useState([])
  const [pagination, setPagination] = useState()
  const [map, setMap] = useState()


  const defaultCenter = { lat: loc.lat, lng: loc.lng }

  return (
    <div className="UserInput">
      <div style={{display: 'flex'}}>
        <Map // 지도를 표시할 Container
          center={defaultCenter}
          style={{
            // 지도의 크기
            width: "300px",
            height: "450px"
          }}
          onCreate={setMap}
          isPanto={true}
          level={3}>
            <MapMarker position={defaultCenter}>
                <div style={{color:"#000"}}>{keyword}</div>
            </MapMarker>
        </Map>
      </div>
    </div>
  )
}

export default MapLocator;