네이티브 맵 Capacitor 플러그인

capgo/capacitor-native-map를 사용하는 방법

Android에서 Google Maps, iOS에서 Apple MapKit, 웹에서 Google Maps JS와 마커, 카메라, 도형, 클러스터링, 이벤트를 위한 하나의 타입스크립트 API

설치

bun add @capgo/capacitor-native-map
bunx cap sync

이 플러그인이 노출하는 것

• create: DOM 요소 내부에 임베디드 맵, 또는 toBack: true : 투명한 HTML 뒤에 맵
• updateLayout: native map 크기 조절 및 위치 재배치 (CSS 픽셀).
• setCamera / fitBounds: 카메라 및 뷰포트 제어.
• addMarker / addMarkers / removeMarker: 마커에 탭 및 드래그 리스너.
• enableClustering: 밀집한 마커 집합 그룹화.
• enableCurrentLocation: 사용자 위치 점이 권한이 허용될 때.
• Overlay: 다각형, 다중 선, 원, 및 타일 레이어 (플랫폼에 따라 다름).

예제 사용

임베디드 맵

import { NativeMap } from '@capgo/capacitor-native-map';

const map = await NativeMap.create({
  id: 'main-map',
  element: document.getElementById('map')!,
  apiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
  config: {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 12,
  },
});

map.setOnMapClickListener((e) => console.log(e.latitude, e.longitude));

// In a framework component, call `await map.destroy()` from your teardown/cleanup hook.

HTML UI와 함께 배경 맵

const map = await NativeMap.create({
  id: 'stores-map',
  toBack: true,
  apiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
  config: {
    center: { lat: 40.7128, lng: -74.006 },
    zoom: 11,
    x: 0,
    y: 0,
    width: window.innerWidth,
    height: window.innerHeight,
  },
});

await map.updateLayout({
  x: 0,
  y: 0,
  width: window.innerWidth,
  height: window.innerHeight,
});

HUD 섹션을.wrap data-map-overlay (시작하는 방법 참조) Overlay CSS가 탭을 활성화하도록 하며 투명한 영역은 맵에 대한 터치 이벤트를 전달합니다.

전체 참조

• GitHub: https://github.com/Cap-go/capacitor-native-map/
• 문서: /docs/plugins/native-map/