Carte Native plugin Capacitor

Utilisation de @capgo/capacitor-native-map

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

Installer

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

Ce que ce plugin expose

• create: une carte intégrée dans un élément DOM, ou toBack: true : une carte derrière un HTML transparent.
• updateLayout: réajuster et répositionner la carte native (pixels CSS).
• setCamera / fitBoundsContrôle de la caméra et du viewport.
• addMarker / addMarkers / removeMarker: marqueurs avec écouteurs de clic et de glissement.
• enableClustering: regrouper des ensembles de marqueurs dens.
• enableCurrentLocationLocalisation de l'emplacement de l'utilisateur.
• Surimpressions : polygones, polylignes, cercles et couches de tuiles (varie en fonction du plateau).

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 de fond avec interface utilisateur 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 les démarrages) afin que le CSS de la surimpression active les clics ; les zones transparentes transmettent les gestes à la carte.

Référence complète

• GitHub : https://github.com/Capgo/capacitor-carte-native
• Documentation : /docs/plugins/native-map/