Native Map (iOS) Capacitor プラグイン

@capgo/capacitor-native-map の使い方

1つの TypeScript API で、Android の Google Maps、iOS の Apple MapKit、Web の Google Maps JS を操作でき、マーカー、カメラ、図形、クラスタリング、イベントに対応。

インストール

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

このプラグインで利用可能な機能

• create: DOM要素内に埋め込まれたマップ、または toBack: true 透明なHTMLの背後に配置するマップ。
• updateLayout: ネイティブマップのリサイズと再配置 (CSSピクセル)。
• setCamera / fitBounds: カメラとビューポートの制御。
• addMarker / addMarkers / removeMarker: タップおよびドラッグリスナー付きのマーカー。
• enableClustering: 密集したマーカーセットのグループ化。
• enableCurrentLocation: 権限が許可された場合のユーザー位置ドット。
• オーバーレイ: ポリゴン、ポリライン、サークル、タイルレイヤー (プラットフォームにより異なります)。

使用例

埋め込みマップ

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セクションをラップするには data-map-overlay (Getting Startedを参照) オーバーレイのCSSでタップが有効になり、透明な領域のジェスチャーはマップに渡されます。

リファレンス全文

• GitHub: https://github.com/Cap-go/capacitor-native-map/
• ドキュメント: /docs/plugins/native-map/