Native Map Plugin Capacitor

Utiliser @capgo/capacitor-native-map

Google Maps sur Android, Apple MapKit sur iOS et Google Maps JS sur le web avec un seul API TypeScript pour les marqueurs, la caméra, les formes, le clustering et les événements.

Installer

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

Ce que ce plugin expose

• create: carte intégrée dans un élément DOM, ou toBack: true pour une carte située derrière un HTML transparent.
• updateLayout: redimensionner et repositionner la carte native (pixels CSS).
• setCamera / fitBounds: contrôle de la caméra et du viewport.
• addMarker / addMarkers / removeMarker: marqueurs avec écouteurs de tap et de drag.
• enableClustering: grouper des ensembles de marqueurs denses.
• enableCurrentLocation: point de localisation utilisateur si la permission l'autorise.
• Overlays : polygones, polylignes, cercles et couches de tuiles (varie selon la plateforme).

Exemple d'utilisation

Carte intégrée

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.

Carte en arrière-plan avec UI HTML

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

Encapsuler les sections HUD avec data-map-overlay (voir le démarrage) pour que le CSS de l'overlay autorise les clics ; les zones transparentes transmettent les gestes à la carte.

Référence complète

• GitHub : https://github.com/Cap-go/capacitor-native-map/
• Docs : /docs/plugins/native-map/