Capacitor Google Maps プラグインの代替 (2026)

If you need a Capacitor Google Maps alternative, you have three realistic paths: keep the official @capacitor/google-maps plugin and work around its limits, render the map inside the WebView with a JavaScript library such as MapLibre GL JS or Leaflet, or use a native map plugin built on another SDK. Capgo does not ship its own map rendering plugin, so this guide compares the options neutrally, and shows the Capgo plugins that work well next to any map: navigation handoff, geocoding and background location.

capacitor

バージョン 8 の Capacitor 8 に対して公式のプラグイン (バージョン 8) は、iOS と Android でネイティブの Google Maps SDK を埋め込み、Web で Google Maps JavaScript API を使用します。機能しますが、これらの点は再び再び出てきます。

各プラットフォームで有料の Google Cloud アカウント

プラグインには API キーが必要です。これは、Android、iOS、Web で Google Cloud アカウントに有料のアカウントが必要です。ネイティブモバイルマップのロードの価格は優秀ですが、有料化、プラットフォームごとのキー制限、クォータの監視が必要です。Web マップロードやサービスとしての Places と Directions は、無料枠を超えた使用に基づいて請求されます。Google Maps Platform の現在の価格ページを確認してください。2025 年にモデルが変更されたため、コミットする前に確認してください。

Android ではマップは WebView の後ろに描画されます

iOS ではマップビューは WebView のスクロールビューに配置されます。Android では WebView の上に描画され、プラグインはマップを追跡します。すべての上位レイヤーは透過する必要があります: <capacitor-google-map> 要素。 すべての上位レイヤーは透明でなければなりません。

/* Required on Android with @capacitor/google-maps */
html,
body,
ion-content,
ion-content::part(background) {
  background: transparent !important;
  --background: transparent;
}

マーカーは追加および削除が可能ですが、更新はできません

__CAPGO_KEEP_0__ は

The API has addMarker, addMarkers, removeMarker and removeMarkersしかし、ありません。 updateMarkerリアルタイムの車両位置は、毎回のアップデートで追加と削除を繰り返す必要があり、これはフラッターを引き起こし、ブリッジコールのコストを増やす。

nativeの制限されたスタイリングと機能

例えば、ウェブのみのオプションがあります mapId クラウドベースのスタイリングのために region そして languageマーカー、クラスタリング、ポリライン、ポリゴン、円、タイルオーバーレイ、カメラコントロール、クリックリスナーのみが得られます。データドライブのスタイリング、ヒートマップ、3Dビルディングをすべてのプラットフォームで同じように実現する必要がある場合は、制限に当たるでしょう。

オプションの概要

勝者はありません。正しい選択はデータの量、スタイリングの必要性、1つのベンダーに依存したい度合いに依存します。

Option 1: WebView内のMapLibre GL JS

MapLibre GL JSはMapbox GL JS v1のオープンソースフォークです。 WebGLでベクタータイルをレンダリングし、WKWebViewとAndroid System WebViewで動作し、Googleのデータが必要ない場合は最も柔軟なオプションです。

bun add maplibre-gl

import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://your-tile-provider.example.com/styles/streets/style.json',
  center: [2.3522, 48.8566], // [lng, lat]
  zoom: 12,
});

map.addControl(new maplibregl.NavigationControl(), 'top-right');

// A marker you can move without remove/add
const courier = new maplibregl.Marker({ color: '#1d4ed8' })
  .setLngLat([2.35, 48.85])
  .addTo(map);

export function moveCourier(lng: number, lat: number) {
  courier.setLngLat([lng, lat]);
}

GeoJSONレイヤー、データドライブスタイリング、ルートラインは1等級です。

map.on('load', () => {
  map.addSource('route', {
    type: 'geojson',
    data: {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: [
          [2.3522, 48.8566],
          [2.3376, 48.8606],
          [2.2945, 48.8584],
        ],
      },
    },
  });
  map.addLayer({
    id: 'route-line',
    type: 'line',
    source: 'route',
    paint: { 'line-color': '#2563eb', 'line-width': 5 },
  });
});

知っておくべきこと:

• タイルソースが必要です。商用ベクタータイルホストやオープンストリートマップデータから生成したタイルを自宅でホストするオプションがあります。オープンストリートマップのパブリックタイルサーバーには、重いアプリトラフィックを許可しない使用ポリシーがあります。
• 常に、タイルプロバイダが必要とするアトリビューションを表示してください。
• ウェブの基本的な code であるため、ブラウザのプレビューでは同じマップが機能し、開発を速める。

オプション 2：Leaflet

Leafletは小さく成熟しています。数百のマーカー、ラスタータイル、シンプルなインタラクションを持つマップに適しています。

bun add leaflet

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const map = L.map('map').setView([48.8566, 2.3522], 13);

L.tileLayer('https://tiles.example.com/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© OpenStreetMap contributors',
}).addTo(map);

L.marker([48.8584, 2.2945]).addTo(map).bindPopup('Eiffel Tower');

バンドルアプリ内では、Leafletのデフォルトマーカーアイコンのパスがよく破れます。アイコン画像をインポートし、オプションを設定するか、独自のアイコンを使用するかどうかを判断してください。 L.Icon.Default Option 3: WebView内でGoogle Maps JavaScript __CAPGO_KEEP_0__ L.divIcon.

Google Maps JavaScript API in WebView

Googleのデータと表示が必要ですが、地図が他のHTML要素と同じように動作するようにしたい場合は、WebView内でMaps JavaScript APIをnative SDKの代わりに読み込んでください。nativeのSmoothnessを失い、毎回の地図読み込みはWebの料金請求となりますが、JS APIのクラウドスタイリングやマップID、進んだマーカー、データレイヤーをフルに活用できます。

WebキーをHTTPリファラーで制限します。iOSではCapacitorはデフォルトでアプリを提供し、AndroidではCapacitorから提供されるため、そのオリジンをキー制限に追加し、両方のテストを実行してください。 capacitor://localhost iOSから https://localhostAndroidから

Native プラグイン（他の SDK 上に構築されたもの）

Native wrappers around MapLibre Native or the Mapbox SDKs exist in the community. They give native gestures and performance with any tile source. Before choosing one, check that it supports Capacitor 8, has a recent release, supports Swift Package Manager on iOS (the default for new Capacitor 8 iOS projects), and covers the overlay types you need. Native map plugins share the same layering trade-off as the official plugin: the map is a native view, and your HTML has to be laid out around it.

capacitor/google-maps を保持する場合は

• マップはフルスクリーンビューであり、スクロール可能なコンテンツ内に小さなカードではありません。
• マーカーを移動するときに削除と追加を許容する、またはマーカーの位置をまれに更新することができます。
• マップ要素に透明度CSSを設定し、明示的なサイズを与え、call

__CAPGO_KEEP_0__を呼び出してください。 <capacitor-google-map> __CAPGO_KEEP_1__を呼び出してください。 destroy() ページを離れたときに設定 skipLibCheck: true そして tsconfig.json プラグインのREADMEには必要なようです。

どのマップでもよく相性の良いプラグイン

マップをレンダリングするものは何でも、これらのCapgoプラグインは、ウェブビューのマップが単独で行うことができないネイティブの部分をカバーします。

ターンバイターンナビゲーションを引き継ぎます

ナビゲーションを構築することは、別のプロジェクトです。大多数のアプリは、ユーザーの好みのナビゲーションアプリを開きます。 @capgo/capacitor-launch-navigator Apple Maps、Google Maps、Waze、他にも多くのものをサポートしています:

import { LaunchNavigator, TransportMode } from '@capgo/capacitor-launch-navigator';

await LaunchNavigator.navigate({
  destination: [48.8584, 2.2945], // [lat, lng]
  options: { transportMode: TransportMode.DRIVING },
});

ジオコード化を行うには、ウェブサービスが必要ありません

@capgo/capacitor-nativegeocoder iOSとAndroidでは、デバイス上でGoogleキーが必要なく、プラットフォームのジオコーダーを使用します:

import { NativeGeocoder } from '@capgo/capacitor-nativegeocoder';

const { addresses } = await NativeGeocoder.reverseGeocode({
  latitude: 48.8584,
  longitude: 2.2945,
  maxResults: 1,
});
console.log(addresses[0]?.thoroughfare, addresses[0]?.locality);

const result = await NativeGeocoder.forwardGeocode({
  addressString: '5 Avenue Anatole France, Paris',
  maxResults: 1,
});
console.log(result.addresses[0]?.latitude, result.addresses[0]?.longitude);

ウェブ上では、プラグインはGoogleのAPIを使用し、オプションが必要です。 apiKey option.

ユーザーの位置を表示するには、バックグラウンドでも表示する必要がある

フォアグラウンドの「青いドット」だけでも十分である。アプリがバックグラウンドで実行されている場合、またはユーザーが特定の場所に到着したときにイベントをトリガーしたい場合は、 @capacitor/geolocation を使用し、選択したマップにポイントを渡す @capgo/background-geolocationトラブルシューティングのための__CAPGO_KEEP_0__

Troubleshooting map issues in Capacitor

親要素の透明度が欠如している。Chrome DevToolsを使用して をインスペクトし、背景色が chrome://inspect とマップ要素の間にあるかどうかを確認する <html> マップ要素の高さがゼロである

マップコンテナには固有のサイズがない。明示的な高さを設定するか、固定高さの親要素を使用してフレックスレイアウトを使用する Android上のWebGLマップがぼやけているか、遅い

ウェブGL マップは Android でぼやけているか、動作が遅い。 デバイス上のSystem WebViewが最新か確認し、レイヤーの数を減らし、ルートの変更ごとにマップを再作成しないようにします。マップを作成し、1度だけ使用します。

リリースビルドではタイルが読み込まれません。 コンテンツセキュリティポリシーとネットワークセキュリティ設定を確認し、タイルホストがHTTPSであることを確認してください。

タイルスタイルURLを変更するとマップが破損します。 スタイルとタイルのURLはJavaScriptの設定のみです。既存のユーザーにプロバイダーを切り替えることができます。 Capgoライブアップデートcodeの変更なしで、アプリストアのリリースなしで、既存のユーザーにプロバイダーを切り替えることができます。

どのように決めるか

• Googleデータとネイティブパフォーマンスが必要なフルスクリーンマップ: @capacitor/google-maps.
• カスタムスタイリング、Googleの請求、HTMLのように動作するマップが必要: MapLibre GL JS。
• マーカーが数個しかないシンプルなマップが必要: Leaflet。
• スクロールレイアウトでGoogleの見た目を必要: Google Maps JS API in the WebView。

どれを選んでも、低性能のAndroidデバイスで早期にテストしてください。よりネイティブなビルディングブロックを探すには、 Capgo プラグインディレクトリ.