import './Map.css'
import { GoogleMap, useLoadScript, Marker } from '@react-google-maps/api'
export default function Location() {
const { isLoaded } = useLoadScript({
googleMapsApiKey: "API KEY.."
});
if (!isLoaded) return <div></div>
return <Map />
}
function Map() {
const center = { 'lat': 36.017533, 'lng': 128.695858 };
return (
<GoogleMap
zoom={15}
center={ center }
mapContainerClassName="map-container"
>
<Marker position={ center }></Marker>
</GoogleMap>
)
}
안녕하세요 선생님 강의 보다가 처음으로 글 써보네요
지금까지 웬만한 오류들 전부 혼자 해결해왔었는데 이건 도저히 해결할 수가 없어요ㅠ
콘솔창에
Uncaught (in promise)
..
..
message: "initMap is not a function"
name: "InvalidValueError"
stack: "Error\n at _.be.captureStackTrace (https://maps.googleapis.com/maps/api/js?key=APIKEY..&callback=initMap:284:1666)\n at new _.be (https://maps.googleapis.com/maps/api/js?key=AIzaSyDecievxLqJVKYojN7m0T15DAfJJH4qkwU&callback=initMap:94:331)\n at _.ce (https://maps.googleapis.com/maps/api/js?key=AIzaSyDecievxLqJVKYojN7m0T15DAfJJH4qkwU&callback=initMap:94:449)\n at Cea (https://maps.googleapis.com/maps/api/js?key=AIzaSyDecievxLqJVKYojN7m0T15DAfJJH4qkwU&callback=initMap:237:99)\n at https://maps.googleapis.com/maps/api/js?key=AIzaSyDecievxLqJVKYojN7m0T15DAfJJH4qkwU&callback=initMap:236:231"
[[Prototype]]: Error
라는 에러가 나오는데요
initMap은 얘네가 자바스크립트로 뱉어주는 함수 같은데.. 어느 부분을 수정해야 오류 없이 빌드할 수 있을까요
npm start에선 에러가 있어도 문제 없이 잘 보여지다가 빌드해서 깃허브에서 호스팅하면 안 보여지네요