[React] kakao 지도 띄우기

 

Kakao Developers

 

 

 

 

import React, { useEffect } from 'react';
    return (
            <div id='myMap' style={{
                width: '1200px', 
                height: '550px'
            }}></div>
        );

 

 

 

  <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?
appkey=발급받으신 키 입력란입니다."></script>

 

 

      const { kakao } = window; // API 를 심어서 가져오면 window 전역 객체에 들어가게됨. 

      const MapContainer = () => {

          useEffect(() => {
              const container = document.getElementById('myMap');//지도를 담을 영역의 dom 래퍼런스
          const options = { //지도 생성 필요한 기본 옵션
            center: new kakao.maps.LatLng(36.321655, 127.378953, 0.431948, 0.372948), //중심좌표
            level: 7 //지도의 레벨(확대, 축소 정도)
          };
              const map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
          }, []);