react-full-kakao-maps

Base Source : https://github.com/fed-gren/react-kakao-maps

Supported features

• Map
• Marker
• Custom Overlay

Installation

npm install --save react-full-kakao-maps #or
yarn add react-full-kakao-maps

Custom

Kakao Map(Props)

draggable (default : false) scrollwheel (default : false) doubleClick (default : false) doubleClickZoom (default : false)

Example

import { KakaoMap, Marker } from "react-full-kakao-maps";

...

<KakaoMap
    apiUrl={`//dapi.kakao.com/v2/maps/sdk.js?appkey=your App key&autoload=false`}
    width={`100%`}
    height={`100%`}
    draggable
    scrollwheel
    doubleClick
    doubleClickZoom
    level={6}
    lat={lat}
    lng={lng}
>
    <Marker lat={lat} lng={lng}></Marker>
</KakaoMap>

Update

setLevel

change Kakao Map Scale

ex)

const [scale, setScale] = useState(0);

<KakaoMap
    apiUrl={`//dapi.kakao.com/v2/maps/sdk.js?appkey=your App key&autoload=false`}
    width={`100%`}
    height={`100%`}
    draggable
    scrollwheel
    doubleClick
    doubleClickZoom
    level={6}
    lat={lat}
    lng={lng}
    //
    setLevel={scale}
    //
>
    <Marker lat={lat} lng={lng}></Marker>
</KakaoMap>

isEvent

change Kakao Map Scale Motion (default : false) ex)

const [scale, setScale] = useState(0);

<KakaoMap
    apiUrl={`//dapi.kakao.com/v2/maps/sdk.js?appkey=your App key&autoload=false`}
    width={`100%`}
    height={`100%`}
    draggable
    scrollwheel
    doubleClick
    doubleClickZoom
    level={6}
    lat={lat}
    lng={lng}
    setLevel={scale}
    //
    isEvent = {true}
    //
>
    <Marker lat={lat} lng={lng}></Marker>
</KakaoMap>