NaverMap

NaverMap 컴포넌트는 네이버 지도를 렌더링합니다. Container 컴포넌트 내부에서 사용해야 합니다.

사용법

import { Container as MapDiv, NaverMap } from 'react-naver-maps';

<MapDiv style={{ width: '100%', height: '400px' }}>
  <NaverMap
    defaultCenter={new navermaps.LatLng(37.3595704, 127.105399)}
    defaultZoom={15}
  />
</MapDiv>;

Controlled vs Uncontrolled

NaverMap은 center/defaultCenter, zoom/defaultZoom 등 controlled/uncontrolled 패턴을 지원합니다.

  • defaultCenter: 초기 중심 좌표 (uncontrolled)
  • center: 중심 좌표 (controlled — 외부에서 값을 관리)

Props

이름타입필수기본값설명
childrenReact.ReactNode---
centernaver.maps.Coord | naver.maps.CoordLiteral | undefined---
zoomnumber | undefined---
boundsnaver.maps.Bounds | naver.maps.BoundsLiteral | undefined---
mapTypeIdnaver.maps.MapTypeId | undefined---
sizenaver.maps.Size | naver.maps.SizeLiteral | undefined---
centerPointnaver.maps.Point | naver.maps.PointLiteral | undefined---
defaultCenternaver.maps.Coord | naver.maps.CoordLiteral | undefined---
defaultZoomnumber | undefined---
defaultBoundsnaver.maps.Bounds | naver.maps.BoundsLiteral | undefined---
defaultMapTypeIdnaver.maps.MapTypeId | undefined---
defaultSizenaver.maps.Size | naver.maps.SizeLiteral | undefined---
defaultCenterPointnaver.maps.Point | naver.maps.PointLiteral | undefined---
minZoomnumber | undefined---
maxZoomnumber | undefined---
logoControlboolean | undefined---
backgroundstring | undefined---
baseTileOpacitynumber | undefined---
draggableboolean | undefined---
scrollWheelboolean | undefined---
pinchZoomboolean | undefined---
keyboardShortcutsboolean | undefined---
disableDoubleClickZoomboolean | undefined---
disableDoubleTapZoomboolean | undefined---
disableTwoFingerTapZoomboolean | undefined---
disableKineticPanboolean | undefined---
tileTransitionboolean | undefined---
logoControlOptionsnaver.maps.ControlOptions | undefined---
mapDataControlboolean | undefined---
mapDataControlOptionsnaver.maps.ControlOptions | undefined---
mapTypeControlboolean | undefined---
mapTypeControlOptionsnaver.maps.MapTypeControlOptions | undefined---
scaleControlboolean | undefined---
scaleControlOptionsnaver.maps.ControlOptions | undefined---
zoomControlboolean | undefined---
zoomControlOptionsnaver.maps.ZoomControlOptions | undefined---
mapTypesnaver.maps.MapTypeRegistry | undefined---
maxBoundsnaver.maps.Bounds | naver.maps.BoundsLiteral | undefined---
paddingnaver.maps.Margin | undefined---
resizeOriginnaver.maps.Position | undefined---
overlayZoomEffectstring | null | undefined---
tileSparenumber | undefined---
zoomOriginnaver.maps.Coord | naver.maps.CoordLiteral | undefined---
blankTileImagestring | null | undefined---
onCenterChanged((center: naver.maps.Coord) => void) | undefined---
onZoomChanged((zoom: number) => void) | undefined---
onBoundsChanged((bounds: naver.maps.Bounds) => void) | undefined---
onMapTypeIdChanged((mapTypeId: naver.maps.MapTypeId) => void) | undefined---
onSizeChanged((value: naver.maps.Size) => void) | undefined---
onCenterPointChanged((value: naver.maps.Point) => void) | undefined---
onMapTypeChanged((value: naver.maps.MapType) => void) | undefined---
onInit(() => void) | undefined---
onIdle(() => void) | undefined---
onPanning(() => void) | undefined---
onZooming(() => void) | undefined---
onTilesloaded(() => void) | undefined---
onResize(() => void) | undefined---
onProjectionChanged(() => void) | undefined---
onAddLayer(() => void) | undefined---
onRemoveLayer(() => void) | undefined---
onClick((e: naver.maps.PointerEvent) => void) | undefined---
onDblclick((e: naver.maps.PointerEvent) => void) | undefined---
onRightclick((e: naver.maps.PointerEvent) => void) | undefined---
onMousedown((e: naver.maps.PointerEvent) => void) | undefined---
onMouseup((e: naver.maps.PointerEvent) => void) | undefined---
onMouseover((e: naver.maps.PointerEvent) => void) | undefined---
onMouseout((e: naver.maps.PointerEvent) => void) | undefined---
onMousemove((e: naver.maps.PointerEvent) => void) | undefined---
onDragstart((e: naver.maps.PointerEvent) => void) | undefined---
onDrag((e: naver.maps.PointerEvent) => void) | undefined---
onDragend((e: naver.maps.PointerEvent) => void) | undefined---
onTouchstart((e: naver.maps.PointerEvent) => void) | undefined---
onTouchmove((e: naver.maps.PointerEvent) => void) | undefined---
onTouchend((e: naver.maps.PointerEvent) => void) | undefined---
onPinchstart((e: naver.maps.PointerEvent) => void) | undefined---
onPinch((e: naver.maps.PointerEvent) => void) | undefined---
onPinchend((e: naver.maps.PointerEvent) => void) | undefined---
onTap((e: naver.maps.PointerEvent) => void) | undefined---
onLongtap((e: naver.maps.PointerEvent) => void) | undefined---
onTwofingertap((e: naver.maps.PointerEvent) => void) | undefined---
onDoubletap((e: naver.maps.PointerEvent) => void) | undefined---
onKeydown((e: naver.maps.PointerEvent) => void) | undefined---
onKeyup((e: naver.maps.PointerEvent) => void) | undefined---