React 활용 - 9 : kakao Map Api로 지도(map) 페이지 만들기

이번에는 가장 많이 사용되는 Kakao Map Api 를 통해 지도페이지를 만들어 본다.

 

우선 kakap developers 페이지에 접속한다.

 

로그인 후 '내 애플리케이션' 버튼을 누른다.

다은 페이지에서 '애플리케이션 추가하기' 를 누른다.

애플리케이션의 기본 정보를 입력합니다.

그 후 리액트 프로젝트에 카카오맵을 보여줄 kakaoMap.js 페이지를 아래와 같이 생성합니다.

import React, { useEffect } from 'react';
import './KakaoMap.css';

let map; // Move map variable outside of component

const KakaoMap = () => {
  useEffect(() => {
    const loadKakaoMapScript = async () => {
      try {
        await loadScript('https://dapi.kakao.com/v2/maps/sdk.js?appkey=javascript키&autoload=false');
        window.kakao.maps.load(() => {
          const container = document.getElementById("map");
          const options = {
            center: new window.kakao.maps.LatLng(37.5665, 126.9780),
            level: 3,
            scrollwheel: true,
          };
          // Only create a new map if it doesn't already exist
          if (!map) {
            map = new window.kakao.maps.Map(container, options);
          }
        });
      } catch (error) {
        console.error(error);
      }
    };
    
    loadKakaoMapScript();
  }, []);

  function loadScript(url) {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = url;
      script.onload = () => resolve();
      script.onerror = () => reject('Failed to load script');
      document.head.append(script);
    });
  }

  return (
  <div
      id="map"
      style={{
        width: '100%',
        height: '100vh',
        position: 'relative', // Add relative position to allow absolute positioning within this div
      }}
    >
     
    </div>
  );
};

export default KakaoMap;

위 코드에서 appkey에는 kakao developer에서 발급 받은 javascript 키를 넣어준다.

 

 

네비게이션 생성 후 페이지 접속을 하면 아래와 같이 지도가 로드된다.

이제 이 지도 위에 반투명한 상자를 하나 만든다.

 

import React, { useEffect } from 'react';
import './KakaoMap.css';

let map; // Move map variable outside of component

const KakaoMap = () => {
  useEffect(() => {
    const loadKakaoMapScript = async () => {
      try {
        await loadScript('https://dapi.kakao.com/v2/maps/sdk.js?appkey=e3475c4e72a59bfdee44df72475d2b3b&autoload=false');
        window.kakao.maps.load(() => {
          const container = document.getElementById("map");
          const options = {
            center: new window.kakao.maps.LatLng(37.5665, 126.9780),
            level: 3,
            scrollwheel: true,
          };
          // Only create a new map if it doesn't already exist
          if (!map) {
            map = new window.kakao.maps.Map(container, options);
          }
        });
      } catch (error) {
        console.error(error);
      }
    };
    
    loadKakaoMapScript();
  }, []);

  function loadScript(url) {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = url;
      script.onload = () => resolve();
      script.onerror = () => reject('Failed to load script');
      document.head.append(script);
    });
  }

  return (
  <div
      id="map"
      style={{
        width: '100%',
        height: '100vh',
        position: 'relative', // Add relative position to allow absolute positioning within this div
      }}
    >
      <div
          style={{
          position: 'absolute', // Absolute position this div
          top: '5%', // Position from the top
          right: '2%', // Position from the left
          width: '30%', // Set width to half of parent div
          height: '90%', // Set height to half of parent div
          backgroundColor: 'rgba(255, 0, 0, 0.5)', // Set to semi-transparent red for visibility
          border: '1px solid red', // Add a border for better visibility
          zIndex: 1000, // Make sure the box is on top of the map
        }}
      >
       aaa
      </div>
    </div>
  );
};

export default KakaoMap;

이제 이 코드를 활용하여 다음 장부터 작업을 할 예정이다.