Map native 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 derrière du 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 de l'utilisateur si autorisé
• Overlays : polygones, polylignes, cercles et couches de tuiles (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,
});

Envelopper les sections HUD avec data-map-overlay (voir démarrage rapide) pour que le CSS de l'overlay permette 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/