지도 구현하기

2차 프로젝트를 진행하는 중에 상세페이지의 숙소정보에 지도를 구현하게 될 일이 있었다.
팀원분께서 지도를 먼저 구현하시고 코드를 공유해주셨다. 근데 너무 친절하게 알아 볼수 있도록 상세하게 적어주셔서 이건 박제하고 지도 API사용할때 참고하면 좋을 것 같아서 기록으로 남겨둔다.

구현 사진

import { useState, useEffect } from 'react';
import styled from 'styled-components';

const Main = styled.div`
  // 원하는 css 스타일링
    width: 800px;
    height: 600px;
  .mapDetail {
  // 원하는 css 스타일링
    width: 100%;
    height: 100%;
  }	
`

const Map = ({list}) => {
  useEffect(()=>{
    const container = document.getElementById('map');
    const options = {
      center: new kakao.maps.LatLng(숙소 위도, 경도),
      level: 줌인하는 숫자에요, 원하는 숫자로 주세요,
      // center: new kakao.maps.LatLng(37.504897, 127.04961),
      // level: 6,
    };
    const kakaoMap = new kakao.maps.Map(container, options);
    const marker = new kakao.maps.Marker({
      position: new kakao.maps.LatLng(숙소 위도, 숙소 경도),
    });
    marker.setMap(kakaoMap);
}, [list])

return (
    <Main>
        <div id='map' className='mapDetail' />
    </Main>
  );
};

export default Map;

참고로 위도 lat/경도 lng

주소 위도 경도 변환 사이트

https://address.dawul.co.kr/