Naver Map컴포넌트
NaverMapInfoWindow
마커 또는 좌표 위에 정보 창을 표시하는 컴포넌트
NaverMapInfoWindow
지도 위에 텍스트 기반 정보 창(InfoWindow)을 표시합니다. 마커에 연결하거나 독립적인 좌표에 배치할 수 있으며, 배경색, 테두리, 패딩, 폰트 등 스타일을 자유롭게 커스터마이징할 수 있습니다.
임포트
import { NaverMapInfoWindow } from '@boostbrothers/react-native-naver-map';
기본 사용법
마커에 연결
identifier를 마커의 identifier와 동일하게 설정하면 InfoWindow가 해당 마커 위에 표시됩니다.
import { NaverMapView, NaverMapMarkerOverlay, NaverMapInfoWindow } from '@boostbrothers/react-native-naver-map';<NaverMapView style={{ flex: 1 }} initialCamera={{ latitude: 37.5666102, longitude: 126.9783881, zoom: 14 }}><NaverMapMarkerOverlayidentifier="seoul-city-hall"latitude={37.5666102}longitude={126.9783881}image={{ symbol: 'blue' }}/><NaverMapInfoWindowidentifier="seoul-city-hall"latitude={37.5666102}longitude={126.9783881}text="서울 시청"textSize={14}textColor="black"fontWeight="bold"backgroundColor="white"borderRadius={8}paddingHorizontal={10}paddingVertical={8}/></NaverMapView>
독립 좌표에 배치
identifier를 생략하면 지정한 좌표에 독립적으로 표시됩니다.
<NaverMapInfoWindowlatitude={37.5666102}longitude={126.9783881}text="독립 InfoWindow"textSize={14}textColor="#2d3436"backgroundColor="#dfe6e9"alpha={0.9}/>
Props
위치 (필수)
| Prop | 타입 | 설명 |
|---|---|---|
latitude | number | 위도 (필수) |
longitude | number | 경도 (필수) |
마커 연결
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
identifier | string | - | 연결할 마커의 identifier. 설정 시 해당 마커 위에 InfoWindow 표시 |
identifier를 설정하면 InfoWindow가 해당 마커의 위치를 따라갑니다. 마커와 InfoWindow의 identifier 값이 정확히 일치해야 합니다.
표시 제어
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
isOpen | boolean | true | InfoWindow 표시 여부 |
align | Align | 'Top' | 마커 대비 InfoWindow 위치 |
anchor | { x: number; y: number } | { x: 0.5, y: 1 } | 앵커 포인트 |
offsetX | number | 0 | X축 오프셋 (픽셀) |
offsetY | number | 0 | Y축 오프셋 (픽셀) |
alpha | number | 1 | 불투명도 (0~1) |
텍스트
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
text | string | - | 표시할 텍스트 |
textSize | number | 14 | 텍스트 크기 |
textColor | ColorValue | 'black' | 텍스트 색상 |
fontWeight | string | 'normal' | 폰트 두께 ('normal', 'bold', 또는 '100'~'900') |
fontFamily | string | - | 커스텀 폰트 패밀리 (예: 'Pretendard-Bold') |
스타일
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
backgroundColor | ColorValue | 'white' | 배경색 |
borderRadius | number | 5 | 모서리 둥글기 |
borderWidth | number | 1 | 테두리 두께 |
borderColor | ColorValue | '#ccc' | 테두리 색상 |
paddingHorizontal | number | 10 | 좌우 패딩 |
paddingVertical | number | 10 | 상하 패딩 |
기본 오버레이 Props (BaseOverlayProps)
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
zIndex | number | 0 | 보조 Z 인덱스 |
globalZIndex | number | 400000 | 전역 Z 인덱스 |
isHidden | boolean | - | 숨김 여부 |
minZoom | number | 0 | 표시 최소 줌 레벨 |
maxZoom | number | 21 | 표시 최대 줌 레벨 |
isMinZoomInclusive | boolean | - | 최소 줌 포함 여부 |
isMaxZoomInclusive | boolean | - | 최대 줌 포함 여부 |
onTap | () => void | - | 탭 이벤트 |
borderRadius 플랫폼 차이
iOS와 Android에서 borderRadius의 렌더링 결과가 다를 수 있습니다. 완전한 원형(pill shape)을 만들려면 iOS에서는 높이의 절반 값을, Android에서는 큰 값(예: 99)을 사용하세요.
import { Platform } from 'react-native';<NaverMapInfoWindow// ...borderRadius={Platform.OS === 'ios' ? 16 : 99}/>
사용 예제
다양한 스타일의 InfoWindow
import { Platform } from 'react-native';import {NaverMapView,NaverMapMarkerOverlay,NaverMapInfoWindow,} from '@boostbrothers/react-native-naver-map';<NaverMapViewstyle={{ flex: 1 }}initialCamera={{ latitude: 33.39, longitude: 126.54, zoom: 8 }}>{/* 마커 정의 */}<NaverMapMarkerOverlayidentifier="jeju-center"latitude={33.5}longitude={126.5}width={40}height={40}image={{ symbol: 'blue' }}/><NaverMapMarkerOverlayidentifier="seongsan"latitude={33.4}longitude={126.6}width={40}height={40}image={{ symbol: 'red' }}/>{/* 기본 스타일 */}<NaverMapInfoWindowidentifier="jeju-center"latitude={33.5}longitude={126.5}text="제주도 중심"textSize={12}textColor="black"fontWeight="bold"backgroundColor="white"borderRadius={Platform.OS === 'ios' ? 16 : 99}paddingHorizontal={10}paddingVertical={8}alpha={0.95}/>{/* 강조 스타일 */}<NaverMapInfoWindowidentifier="seongsan"latitude={33.4}longitude={126.6}text="성산일출봉"textSize={16}textColor="white"fontWeight="700"backgroundColor="#ff6b6b"borderRadius={14}paddingHorizontal={12}paddingVertical={10}/>{/* 커스텀 폰트 */}<NaverMapInfoWindowlatitude={33.3}longitude={126.4}text="관광지"textSize={12}fontFamily="Pretendard-Bold"textColor="#333"backgroundColor="#ffd93d"borderRadius={8}borderWidth={1}borderColor="#f39c12"paddingHorizontal={8}paddingVertical={6}/></NaverMapView>
토글 InfoWindow
isOpen prop으로 InfoWindow의 표시/숨김을 제어할 수 있습니다.
import React, { useState } from 'react';import { Button, View, StyleSheet } from 'react-native';import {NaverMapView,NaverMapMarkerOverlay,NaverMapInfoWindow,} from '@boostbrothers/react-native-naver-map';export default function ToggleInfoWindowExample() {const [isOpen, setIsOpen] = useState(true);return (<View style={styles.container}><NaverMapViewstyle={styles.map}initialCamera={{ latitude: 37.5666102, longitude: 126.9783881, zoom: 14 }}><NaverMapMarkerOverlayidentifier="marker-1"latitude={37.5666102}longitude={126.9783881}image={{ symbol: 'blue' }}onTap={() => setIsOpen(!isOpen)}/><NaverMapInfoWindowidentifier="marker-1"latitude={37.5666102}longitude={126.9783881}text="마커를 탭하여 토글"isOpen={isOpen}backgroundColor="white"borderRadius={8}paddingHorizontal={10}paddingVertical={6}/></NaverMapView><Buttontitle={isOpen ? 'InfoWindow 닫기' : 'InfoWindow 열기'}onPress={() => setIsOpen(!isOpen)}/></View>);}const styles = StyleSheet.create({container: { flex: 1 },map: { flex: 1 },});