카카오 지도 API 이용하기

목차

1. Kakao Map 이용해보기

• 카카오 개발자 등록하기

• Vercel로 연결된 것도 추가로 넣기

• 카카오 map 사이트 들어가서 확인해 보기

Kakao 지도 API

Kakao 지도 API를 이용해보세요. 다양한 샘플과 상세한 매뉴얼로 개발자분들의 시간을 아껴드리겠습니다!

https://apis.map.kakao.com/

2. public → index.html에 집어넣기

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

import Layout from '../../common/layout/Layout';
import './Contact.scss';
import { useRef, useEffect } from 'react';

export default function Contact() {
	const { kakao } = window;
	const mapFrame = useRef(null);
	const mapOption = {
		center: new kakao.maps.LatLng(33.450701, 126.570667),
		level: 3,
	};

	useEffect(() => {
		const map = new kakao.maps.Map(mapFrame.current, mapOption);
	});

	return (
		<Layout title={'Contact Us'}>
			<article id='map' ref={mapFrame}></article>
		</Layout>
	);
}

3. 마커 찍기

export default function Contact() {
	const { kakao } = window;
	const mapFrame = useRef(null);
	const mapOption = {
		center: new kakao.maps.LatLng(33.450701, 126.570667),
		level: 3,
	};
	var marker = new kakao.maps.Marker({
		position: mapOption.center,
	});

	useEffect(() => {
		const map = new kakao.maps.Map(mapFrame.current, mapOption);
		marker.setMap(map);
	}, []);

4. 보다 정밀하게 마커 위치 지정하기

5. 마커 이미지 바꾸기

import Layout from '../../common/layout/Layout';
import './Contact.scss';
import { useRef, useEffect } from 'react';

export default function Contact() {
	const { kakao } = window;
	const mapFrame = useRef(null);
	const mapOption = {
		//위치값 정밀하게 복사하는 법
		//기존 구글지도 위치값 복사 뒤, 카카오예제의 클릭한 위치 마커표시 직접해보기
		//해당 코드 붙여넣기 하고, 원하는 지점을 찍으면 아래와 같이 정밀한 수치값을 확인가능
		center: new kakao.maps.LatLng(37.592422981858604, 127.04710339920344),
		level: 3,
	};

	//마커 이미지 인스턴스를 생성하기 위한 정보값들
	const imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png'; // 마커이미지의 주소입니다
	const imageSize = new kakao.maps.Size(64, 69); // 마커이미지의 크기입니다
	const imageOption = { offset: new kakao.maps.Point(27, 69) }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
	var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
	var marker = new kakao.maps.Marker({
		position: mapOption.center,
		image: markerImage,
	});

	useEffect(() => {
		const map = new kakao.maps.Map(mapFrame.current, mapOption);
		marker.setMap(map);
	}, []);

	return (
		<Layout title={'Contact Us'}>
			<article id='map' ref={mapFrame}></article>
		</Layout>
	);
}

6. 이미지 바꾸기

import Layout from '../../common/layout/Layout';
import './Contact.scss';
import { useRef, useEffect } from 'react';

export default function Contact() {
	const { kakao } = window;
	const mapFrame = useRef(null);
	const mapOption = {
		center: new kakao.maps.LatLng(37.592422981858604, 127.04710339920344),
		//level: 3, 빼도 기본값이 3임
	};

	const imageSrc = `${process.env.PUBLIC_URL}/img/marker1.png`; //img 폴더에 사진 들어감
	const imageSize = new kakao.maps.Size(232, 99);
	const imgPos = { offset: new kakao.maps.Point(116, 90) };
	var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgPos);
	var marker = new kakao.maps.Marker({
		position: mapOption.center,
		image: markerImage,
	});

	useEffect(() => {
		const map = new kakao.maps.Map(mapFrame.current, mapOption);
		marker.setMap(map);
	}, []);

	return (
		<Layout title={'Contact Us'}>
			<article id='map' ref={mapFrame}></article>
		</Layout>
	);
}

7. 지도 교통 정보 추가하기

// 지도에 교통정보를 표시하도록 지도타입을 추가합니다
map.addOverlayMapTypeId(kakao.maps.MapTypeId.TRAFFIC);

8. 환경변수 등록

%, % 사이에 env 파일에 등록한 변수를 넣어주기
%REACT_APP_KAKAO%
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO%"></script>

.env파일을 열어보면, 
REACT_APP_=3b6ffc8bfde167758e28adc9cf37ca58

에러가 발생하는 이유는 뭘까?