안녕하세요, 지도 api를 사용하고 있는데
축척만 보이고 화면이 보이지 않아 문의드립니다.
화면 내에서 스크롤?을 통해 축척의 값이 변화하기도 하고, 또 화면을 이동할 수 있도록 커서의 모양이 손바닥으로 바뀌기도 합니다만 화면이 보이지 않습니다.
혹시 무엇이 문제일까요…?
// Map.jsx
import React, { useEffect } from "react";
import styled from "styled-components";
export default function Map({ latitude, longitude }) {
useEffect(() => {
const mapScript = document.createElement("script");
mapScript.async = true;
mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP}&autoload=false`;
document.head.appendChild(mapScript);
const onLoadKakaoMap = () => {
window.kakao.maps.load(() => {
const container = document.getElementById("map");
const options = {
center: new window.kakao.maps.LatLng(latitude, longitude),
level: 3,
};
const map = new window.kakao.maps.Map(container, options);
const markerPosition = new window.kakao.maps.LatLng(
latitude,
longitude
);
const marker = new window.kakao.maps.Marker({
position: markerPosition,
});
marker.setMap(map);
});
};
mapScript.addEventListener("load", onLoadKakaoMap);
return () => mapScript.removeEventListener("load", onLoadKakaoMap);
}, [latitude, longitude]);
return <MapContainer id="map"></MapContainer>;
}
const MapContainer = styled.div`
width: 500px;
height: 500px;
border: 1px solid red;
`;
import React from "react";
import Header from "../components/Header";
import Map from "../components/Map";
import Layout from "./Layout";
export default function food() {
return (
<Layout description={"음식"}>
<Header />
<Map latitude={7.402056} longitude={127.108212} />
<div>안녕안녕</div>
</Layout>
);
}
혹시라도 또 다른 코드가 필요할까요?
- 콘솔창에 에러는 나지 않습니다.