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: "450px",
            height: "450px"
          }}
          onCreate={setMap}
          isPanto={true}
          level={3}>
          <MapMarker position={defaultCenter}>
            <div style={{ color: "#000" }}>{keyword}</div>
          </MapMarker>
        </Map>
      </div>
    </div>
  )
}

export default MapLocator;