Alternatives au plugin Google Maps de Capacitor (2026)

Si vous avez besoin d'une alternative à Google Maps pour Capacitor, trois pistes réalistes s'offrent à vous : conserver l'officiel @capacitor/google-maps plugin et contourner ses limites, afficher la carte dans la WebView avec une bibliothèque JavaScript comme MapLibre GL JS ou Leaflet, ou utiliser un plugin de carte natif basé sur un autre SDK. Capgo ne fournit pas son propre plugin de rendu de carte : ce guide compare donc les options de manière neutre et présente les plugins Capgo qui fonctionnent bien avec n'importe quelle carte : handoff de navigation, géocodage et localisation en arrière-plan.

Pourquoi les développeurs vont au-delà de @capacitor/google-maps

Le plugin officiel (version 8 pour Capacitor 8) intègre le SDK Google Maps natif sur iOS et Android, ainsi que l’API Google Maps JavaScript sur le web. Cela fonctionne, mais ces points reviennent sans cesse.

Un compte Google Cloud avec facturation activée sur chaque plateforme

Le plugin nécessite des clés API liées à un compte Google Cloud avec facturation activée sur Android, iOS et le web. Les tarifs de Google pour les chargements de cartes natives sur mobile sont généreux, mais vous devez tout de même configurer la facturation, restreindre les clés par plateforme et surveiller les quotas. Les chargements de cartes web et les services comme Places et Directions sont facturés à l'usage au-delà des seuils gratuits. Vérifiez la page des tarifs de Google Maps Platform avant de vous engager, car le modèl’a changé en 2025.

Sur Android, la carte est dessinée derrière la WebView

Sur iOS, la vue de la carte est placée dans la scroll view de la WebView. Sur Android, elle est rendue sous l'ensemble de la WebView, et le plugin la déplace pour suivre l' <capacitor-google-map> élément. Chaque couche située au-dessus doit être transparente :

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

C'est le problème n°1 du type « ma carte est vide ». Cela rend aussi les overlays personnalisés, les modales et les transitions de page plus complexes, car votre HTML repose sur une vue native.

Markers can be added and removed, not updated

L’API possède addMarker, addMarkers, removeMarker et removeMarkers, mais pas de updateMarker. A live vehicle position means remove plus add on every update, which can flicker and costs bridge calls.

Styles et fonctionnalités limités en natif

Certaines options sont réservées au web, par exemple mapId pour la stylisation basée sur le cloud, et region et language. Vous disposez de marqueurs, de clustering, de polylignes, de polygones, de cercles, d'overlays de tuiles, du contrôle de la caméra et de listeners de clic. Pour des styles pilotés par les données, des heatmaps ou des bâtiments 3D identiques sur toutes les plateformes, vous rencontrerez des limites.

Les options en un coup d'œil

Il n’y a pas de vainqueur unique. Le bon choix dépend du volume de données, des besoins en stylisation et du degré de dépendance à un seul fournisseur.

Option 1 : MapLibre GL JS dans le WebView

MapLibre GL JS est le fork open source de Mapbox GL JS v1. Il rend les tuiles vectorielles avec WebGL et fonctionne bien dans WKWebView et le WebView système Android. C'est l'option la plus flexible si vous n'avez pas besoin des données de 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]);
}

Les couches GeoJSON, le style piloté par les données et les lignes d’itinéraire sont de premier plan :

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

Points à connaître :

• Vous avez besoin d'une source de tuiles. Les options incluent des hôtes de tuiles vectorielles commerciaux, ou l'auto-hébergement de tuiles générées à partir des données OpenStreetMap. Les serveurs de tuiles publics d'OpenStreetMap ont une politique d'utilisation qui n'autorise pas un trafic d'application important.
• Affichez toujours l'attribution exigée par votre fournisseur de tuiles.
• Étant donné qu'il s'agit de simple code web, la même carte fonctionne dans un aperçu navigateur, ce qui accélère le développement.

Option 2 : Leaflet

Leaflet est petit et mature. C'est un bon choix pour des cartes avec quelques centaines de marqueurs, des tuiles raster et des interactions simples.

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

Dans les apps bundle, les chemins d’icônes de marqueurs par défaut de Leaflet cassent souvent. Importez les images d’icônes et définissez L.Icon.Default options, ou utilisez les vôtres L.divIcon.

Option 3 : Google Maps JavaScript API dans le WebView

Si vous avez besoin des données et de l'apparence de Google, mais souhaitez que la carte se comporte comme n'importe quel élément HTML, chargez le Maps JavaScript API dans le WebView au lieu du SDK natif. Vous perdez un peu de fluidité native, et chaque chargement de carte est un chargement web facturable, mais vous obtenez l'API JS complet : style cloud avec des IDs de carte, marqueurs avancés, couches de données.

Restreignez la clé web par référent HTTP. Sur iOS, Capacitor sert l’app depuis capacitor://localhost par défaut, et sur Android depuis https://localhost, ajoutez donc ces origines aux restrictions de la clé et testez les deux.

Option 4 : plugins natifs basés sur d’autres SDK

Des wrappers natifs autour de MapLibre Native ou des SDK Mapbox existent dans la communauté. Ils offrent des gestes et des performances natifs avec n’importe quelle source de tuiles. Avant d’en choisir un, vérifiez qu’il prend en charge Capacitor 8, qu’il a une release récente, qu’il supporte Swift Package Manager sur iOS (la valeur par défaut des nouveaux projets iOS Capacitor 8) et qu’il couvre les types d’overlay dont vous avez besoin. Les plugins de cartes natifs ont le même compromis de superposition que le plugin officiel : la carte est une vue native, et votre HTML doit être agencé autour d’elle.

Gardez @capacitor/google-maps si

• Vous avez besoin de la carte de base Google, des données Places et Street View.
• Votre carte est une vue plein écran, pas une petite carte dans du contenu défilant.
• Vous pouvez vous contenter de remove et add pour déplacer les marqueurs, ou mettre à jour les positions rarement.

Si vous le gardez, définissez le CSS de transparence ci-dessus, donnez à l’ <capacitor-google-map> élément une taille explicite, appelez destroy() en quittant la page, et définissez skipLibCheck: true dans tsconfig.json comme l’exige le README du plugin.

Plugins that pair well with any map

Peu importe ce qui affiche la carte, ces plugins Capgo couvrent les parties natives qu’une carte en WebView ne peut pas faire seule.

Déléguer la navigation pas à pas

Développer la navigation est un projet à part entière. La plupart des apps ouvrent simplement l’application de navigation préférée de l’utilisateur. @capgo/capacitor-launch-navigator prend en charge Apple Maps, Google Maps, Waze et bien d’autres :

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

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

Géocoder sans service web

@capgo/capacitor-nativegeocoder utilise les géocodeurs de la plateforme sur iOS et Android, qui n’ont pas besoin de clé Google sur l’appareil :

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

Sur le web, le plugin utilise l’API de Google et nécessite l’ apiKey option.

Afficher la position de l’utilisateur, même en arrière-plan

Pour un « point bleu » au premier plan, @capacitor/geolocation suffit. Pour continuer le suivi quand l’app est en arrière-plan, ou pour déclencher des événements lorsque les utilisateurs entrent dans un lieu, utilisez @capgo/background-geolocation, et passez les points à la carte de votre choix.

Résoudre les problèmes de carte dans Capacitor

Carte vide sur Android avec le plugin officiel. La transparence manque sur un élément parent. Inspectez avec Chrome DevTools via chrome://inspect et cherchez une couleur d’arrière-plan entre <html> et l’élément de la carte.

L’élément de la carte a une hauteur nulle. Les conteneurs de cartes n'ont pas de taille intrinsèque. Définissez une hauteur explicite ou utilisez un layout flex avec une hauteur parente fixe.

La carte WebGL est floue ou lente sur Android. Vérifiez que le System WebView est à jour sur l’appareil, réduisez le nombre de couches et évitez de recréer la carte à chaque changement d’itinéraire. Créez-l’une seule fois et réutilisez-la.

Tiles do not load in release builds. Vérifiez votre Content Security Policy et votre configuration de sécurité réseau, et assurez-vous que l’hôte des tuiles utilise HTTPS.

La carte se casse après modification de l’URL du style de tuile. Les styles et les URLs de tuiles ne sont que de la config JavaScript. Vous pouvez changer de fournisseur pour vos utilisateurs existants avec les live updates Capgo, sans passer par une release sur les stores, tant qu'aucun code natif ne change.

Comment choisir

• Besoin des données Google et de performances natives sur une carte plein écran : gardez @capacitor/google-maps.
• Besoin d'un style personnalisé, sans facturation Google, et d'une carte qui se comporte comme du HTML : MapLibre GL JS.
• Besoin d'une carte simple avec quelques marqueurs : Leaflet.
• Besoin du rendu de Google dans un layout à défilement : l’API Google Maps JS dans la WebView.

Quel que soit votre choix, testez-le tôt sur un appareil Android d'entrée de gamme. Pour plus de briques natives, consultez les répertoire de plugins Capgo.