[React] Kakao Map API 사용하기

저번에 이어 오늘은 코드 구현까지 해보았다~! 나중에 셀렉트 박스를 통해 정보를 불러올 것이기 때문에, MUI 필드를 임포트 하여 적용해놓았다. 스타일링은 Styled-components로 하였다.

 

728x90

 

---

전체 코드

Map.js

import { useEffect } from "react";

const { kakao } = window;

const Map = () => {
    useEffect(() => {
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
            mapOption = { 
            center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
                level: 3 // 지도의 확대 레벨
            };

        var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

        // 마커가 표시될 위치입니다 
        var markerPosition  = new kakao.maps.LatLng(33.450701, 126.570667); 

        // 마커를 생성합니다
        var marker = new kakao.maps.Marker({
            position: markerPosition
        });
    
        // 마커가 지도 위에 표시되도록 설정합니다
        marker.setMap(map);
    }, []);
    
    return (
        <div id="map" />
    );
}

export default Map;

 

MapContainer.js

Map.js를 가져와 뿌려줄 화면이다. 참고로 임포트 한 Search에는 MUI 셀렉트 박스만 구현되어 있다.

import React from "react";
import Map from "./Map";
import Search from "./Search";
import styled from "styled-components";

const MapContainer = () => {
    return (
        <Wrapper>
            <Form>
                <Title>우리동네 사이트 찾기</Title>
                <SearchWrapper>
                    <Search />
                </SearchWrapper>
                <MapWrapper id="map">
                    <Map /> 
                </MapWrapper>
            </Form>
        </Wrapper>
    );
};

export default MapContainer;

const Wrapper = styled.div`
    width: 100%;
    height: 1000px;
    background-color: var(--gray);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: 100px;
`;

const Form = styled.div`
    max-width: 800px;
    width: 100%;
    height: 600px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 60px;
    border-radius: 20px;
    position: absolute;
    top: 290px;
`;

const Title = styled.h2`
    width: 100%;
    height: 70px;
    margin: 0;
    padding-top: 15px;
    background-color: var(--green);
    text-align: center;
    border-radius: 20px 20px 0 0;
`;

const MapWrapper = styled.div`
    width: 85%;
    height: 340px;
`;

const SearchWrapper = styled.div`
    width: 100%;
    display: flex;
    justify-content: space-evenly;
`;

 

결과 화면