요즘 식당등 오프라인 연동된 홈페이지는 무조건
들어가는것이 바로 지도다.
남들 다 하는걸 안해볼 순 없지...
바로들어간다.
일단여기 가입
그다음에 
저기 Web 에 도메인을 추가한다.
일단 나는 테스트 할꺼만 등록해본다. 나중에 웹사이트 연결하면 그 도메인 쓰시고.
나는 로칼호스트3000으로 간다.
그리고 메뉴에 요약정보에 API 키 있으니까 거기서 JS꺼 잘 복사해두자.
이제 프로젝트로 ㄱㄱ
react프로젝트의 public 폴더에 index.html 있는데 이거 좀 손봐줘야함.
body 안에 잘 붙여넣어주자.
<body>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=아까복사한API키 붙여넣기"></script>
...
</body>지도를 띄울 js 파일로 ㄱ
import 블라블라
const { kakao } = window; //이거 중요함. 꼭 하자. 이유는 생략한다.
const 맵띄울꺼 =()=>{
useEffect(()=>{
let container = document.getElementById("지정할id값");
let options = {
center: new window.kakao.maps.LatLng(위도, 경도),
level: 4,
};
let map = new window.kakao.maps.Map(container, options);
//마커필요없으면 이 아래는 안해도 상관없음
let markerPosition = new kakao.maps.LatLng(
위도, 경도
);
// 마커를 생성
let marker = new kakao.maps.Marker({
position: markerPosition,
});
// 마커를 지도 위에 표시
marker.setMap(map);
},[])
}이렇게 하면 됨.
level 값이 줌 얼마나 땡길지 조정할 수 있다. 숫자 낮을수록 줌 많이 땡기는거
적용은 div 안에 id 값을 '지정할id값' 으로 넣어주면 됨
이러면 예쁘게 지도가 표시됨.
제주도 프론트앤드 개발자의 개발 일기