@capgo/capacitor-native-map

iOS (Apple MapKit)	Android (Google Maps)

同じTypeScript code が両方のプラットフォームで動作します。これらの録画は、 サンプルアプリのデモツアーによるもので、実際のiOSシミュレータとAndroidエミュレータ上で実行されています。各ステップの code は、 READMEのデモ.

概要

@capgo/capacitor-native-map なら、モバイルではネイティブマップのパフォーマンス、WebではGoogle Maps JSを、単一のTypeScript API で実現できます。DOMコンテナに埋め込みマップを作成するか、 バックグラウンドモード (toBack) を使用して、透明な WebView の背後に地図を描画し、HTML でブランド仕様の UI を構築します。

プラットフォーム対応

プラットフォーム	サポート	備考
iOSと	はい	MapKit
Androidでは	はい	Google Maps
Web	はい	Google Maps JS

コア機能

• ライフサイクル: create, destroy, show, hide, updateLayout、Ionic スクロールビューとのリサイズ同期。
• バックグラウンドモード: toBack 、透過 HTML でのマルチタッチパススルーによる合成。
• カメラ: setCamera, fitBounds, getMapBounds、最小/最大ズーム、ベアリング、チルト。
• マーカー：追加、更新、削除、ドラッグ、クラスタリング、イベントリスナー。
• オーバーレイ：ポリゴン、ポリライン、円、タイルオーバーレイ（プラットフォーム依存）。
• イベント：map、marker、shape、cluster、camera idle/move コールバック。

公開 API

メソッド	説明
create	マップを作成（CreateMapArgs: id, config、任意 element, apiKey, toBack, forceCreate).
destroy	マップインスタンスを破棄し、ネイティブリソースを解放します。
show / hide	ネイティブマップを破棄せずに表示または非表示にします。
updateLayout	CSSピクセルで位置とサイズを更新します（特に toBack モードの場合）。
enableTouch / disableTouch	マップがジェスチャーを受け取るかどうかを切り替えます。
setCamera	マップカメラを移動またはアニメーションさせます。
getMapType / setMapType	マップタイプを読み取ったり設定したりします（Normal, Hybrid, Satellite, Terrain, None).
fitBounds	任意のパディング付きで、緯度経度の範囲にビューポートをフィットさせます。
getMapBounds	現在の表示範囲を読み取ります。
setPadding	表示中のマップ領域にパディングを設定します。
addMarker / addMarkers	1つ以上のマーカーを追加し、マーカーIDを返します。
removeMarker / removeMarkers	IDを指定してマーカーを削除します。
addPolygons / removePolygons	ポリゴンオーバーレイを追加または削除します。
addPolylines / removePolylines	ポリラインの追加・削除。
addCircles / removeCircles	円の追加・削除。
addTileOverlay / removeTileOverlay	カスタムタイルレイヤー（AndroidとWeb対応。iOSはエラーで拒否） UNAVAILABLE).
enableClustering / disableClustering	マーカークラスタリング（最小クラスターサイズは任意設定）。
enableCurrentLocation	権限が許可されていればユーザー位置のドットを表示。
enableIndoorMaps / enableTrafficLayer	屋内地図と交通情報の切り替え（プラットフォーム依存）。
setOnMapClickListener	マップ表面のタップを検知。
setOnMarkerClickListener	マーカーのタップを検知。
setOnCameraIdleListener / setOnCameraMoveStartedListener	カメラ移動イベント。
setOnClusterClickListener	クラスターのタップイベント。
setOnPolygonClickListener / setOnCircleClickListener / setOnPolylineClickListener	シェイプのタップイベント。
setOnMarkerDragStartListener / setOnMarkerDragListener / setOnMarkerDragEndListener	マーカーのドラッグイベント。

Source of Truth

この API リファレンスは、プラグインから生成されています src/definitions.ts の capacitor-native-map リポジトリです。

@capgo/capacitor-native-map から続ける

使用している場合 @capgo/capacitor-native-map Capacitorアプリで、これを以下と連携してください： @capgo/capacitor-native-map の使い方 SEOチュートリアルと関連するCapgoプラグインのドキュメントはこちら。