Alternative al plugin Google Maps di Capacitor (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.

Perché gli sviluppatori guardano oltre @capacitor/google-maps

The official plugin (version 8 for Capacitor 8) embeds the native Google Maps SDK on iOS and Android and the Google Maps JavaScript API on the web. It works, but these points come up again and again.

Un account di Google Cloud abilitato per la fatturazione su ogni piattaforma

Il plugin richiede API chiavi legate a un account di Google Cloud con fatturazione abilitata, su Android, iOS e web. La tariffazione di Google per le cariche native di mappa su dispositivi mobili è generosa, ma devi comunque configurare la fatturazione, limitare le chiavi per piattaforma e monitorare le quote. Le cariche di mappa e servizi web come Places e Directions sono fatturati in base all'uso dopo i limiti gratuiti. Controlla la pagina di tariffazione attuale di Google Maps Platform prima di impegnarti, poiché il modello è cambiato nel 2025.

La mappa su Android viene disegnata dietro il WebView

Su iOS la vista della mappa viene inserita nella vista di scorrimento del WebView. Su Android viene visualizzata sotto l'intero WebView e il plugin la sposta per seguirne <capacitor-google-map> l'elemento. Ogni layer sopra di esso deve essere trasparente:

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

Questo è il problema numero uno "la mia mappa è bianca". Ciò rende anche le sovrapposizioni personalizzate, i modali e le transizioni di pagina più difficili, perché il tuo HTML si trova sopra una vista nativa.

I marker possono essere aggiunti e rimossi, non aggiornati

Il API ha addMarker, addMarkers, removeMarker e removeMarkersma non updateMarkerUn veicolo in tempo reale significa rimuovere e aggiungere a ogni aggiornamento, che può lampeggiare e costa chiamate di ponte.

Limitate stili e funzionalità native

Some options are web only, for example mapId per lo stiling basato sul cloud, e region e language. Ottenete marker, clustering, polilinee, poligoni, cerchi, sovrapposizioni di tile, controllo della camera e ascoltatori di click. Se avete bisogno di stili guidati da dati, heatmap o edifici in 3D nello stesso modo su tutte le piattaforme, incontrerete dei limiti.

Le opzioni in un colpo d'occhio

Non esiste un vincitore unico. La scelta giusta dipende dal volume dei dati, dalle esigenze di stile e da quanto si vuole dipendere da un unico fornitore.

Opzione 1: MapLibre GL JS nel WebView

MapLibre GL JS è la fork open source di Mapbox GL JS v1. Esegue i vettori di tile con WebGL e funziona bene in WKWebView e nel System WebView Android. È l'opzione più flessibile se non si ha bisogno dei dati di 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]);
}

Livelli di GeoJSON, stili guidati dai dati e linee di percorso sono di prima classe:

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 },
  });
});

Cose da sapere:

• È necessario una fonte di tile. Le opzioni includono i provider di tile commerciali o l'hosting dei tile generati da dati OpenStreetMap. I server di tile OpenStreetMap pubblici hanno una politica di utilizzo che non consente traffico di app pesante.
• Mostra sempre l'attribuzione richiesta dal tuo provider di tile.
• Poiché è web puro code, lo stesso mappa funziona in una anteprima del browser, il che accelera lo sviluppo.

Opzione 2: Leaflet

Leaflet è piccolo e maturo. È una buona scelta per le mappe con alcuni centinaia di marker, tile raster e interazioni semplici.

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');

In applicazioni bundle, i percorsi delle icone di default di Leaflet spesso si rompono. Importa le immagini delle icone e impostale L.Icon.Default opzioni, o utilizza le tue L.divIcon.

Opzione 3: Google Maps JavaScript API nel WebView

Se hai bisogno dei dati di Google e vuoi guardare, ma vuoi che la mappa si comporti come qualsiasi altro elemento HTML, carica il JavaScript delle Map API nel WebView al posto del nativo SDK. Perdi alcune fluidità native e ogni caricamento della mappa è un caricamento web fatturabile, ma ottieni la piena JS API: stile cloud con ID della mappa, marker avanzati, layer di dati.

Restringi la chiave web per il riferimento HTTP. Su iOS, Capacitor serve l'app da capacitor://localhost di default, e su Android da https://localhostaggiungi quindi quegli origini alle restrizioni della chiave e testa entrambi.

Opzione 4: Plugin nativi costruiti su altri 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.

Mantieni @capacitor/google-maps se

• Hai bisogno della mappa base di Google, Places e dati di Street View.
• La tua mappa è una vista a schermo intero, non un piccolo card dentro contenuto scorrevole.
• Puoi vivere con rimuovere e aggiungere per i marker in movimento, o aggiornare le posizioni raramente.

Se lo conservate, impostate la trasparenza CSS sopra, date <capacitor-google-map> elementa una dimensione esplicita, chiamalo destroy() quando si lascia la pagina, e impostare skipLibCheck: true in tsconfig.json come richiede il README del plugin.

Plugin che si abbinano bene con qualsiasi mappa

Quando si rende la mappa, questi Capgo plugin coprono le parti native che una mappa WebView non può fare da sola.

Passa la navigazione a mano a mano

Costruire la navigazione è un progetto a sé. La maggior parte delle app apre l'app di navigazione preferita dell'utente. @capgo/capacitor-launch-navigator sostiene Apple Maps, Google Maps, Waze e molti altri:

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

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

Geocodifica senza un servizio web

@capgo/capacitor-nativegeocoder utilizza i geocodificatori della piattaforma su iOS e Android, che non richiedono una chiave Google sul dispositivo:

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);

On the web, il plugin utilizza Google’s API e richiede l' apiKey opzione.

Mostra la posizione dell'utente, anche in background

Per un puntino blu in primo piano, basta. @capacitor/geolocation Per mantenere la tracciatura mentre l'app è in background, o per attivare gli eventi quando gli utenti entrano in luoghi, utilizza @capgo/background-geolocatione passa i punti al mappa che hai scelto.

Risolvere problemi di mappa in Capacitor

La mappa è vuota su Android con il plugin ufficiale. La trasparenza manca su un elemento padre. Ispeziona con Chrome DevTools tramite chrome://inspect e cerca eventuali colori di sfondo tra <html> e l'elemento della mappa.

L'elemento della mappa ha altezza zero. I container della mappa non hanno dimensione intrinseca. Imposta un'altezza esplicita, o utilizza un layout flessibile con una altezza del padre fissata.

La mappa WebGL è sfocata o lenta su Android. Verifica che il WebView del sistema sia aggiornato sul dispositivo, riduci il numero di layer e evita di ricreare la mappa a ogni cambio di percorso. Crea una sola volta e riutilizzala.

I tile non si caricano nei build di rilascio. Controlla la tua politica di sicurezza del contenuto e la configurazione di sicurezza della rete, assicurati che il server dei tile sia HTTPS.

La mappa si rompe dopo aver cambiato l'URL dello stile dei tile. Gli URL di stile e di tile sono solo configurazioni JavaScript. Puoi cambiare provider per gli utenti esistenti con aggiornamenti Capgo in direttaSenza una rilascio dell'app store, fintanto che non ci sono cambiamenti nativi code.

Come decidere

• Hai bisogno di dati Google e prestazioni native su una mappa a schermo intero: mantieni @capacitor/google-maps.
• Hai bisogno di stili personalizzati, nessi di fatturazione Google e una mappa che si comporta come HTML: MapLibre GL JS.
• Hai bisogno di una mappa semplice con alcuni marker: Leaflet.
• Hai bisogno di un aspetto Google in un layout di scorrimento: Google Maps JS API nel WebView.

Qualunque scegli, testa su un dispositivo Android di bassa gamma presto. Per più blocchi di costruzione nativi, esplora il Capgo directory dei plugin.