Carte native plugin Capacitor

Utilisation de @capgo/capacitor-carte-native

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 plugin expose quoi

• create: carte intégrée dans un élément DOM, ou toBack: true : carte derrière un HTML transparent.
• updateLayout: redimensionner et répositionner la carte native (pixels CSS).
• setCamera / fitBoundsContrôle de la caméra et du viewport.
• addMarker / addMarkers / removeMarker: markers with tap and drag listeners.
• enableClustering: regrouper des ensembles de marqueurs dens.
• enableCurrentLocationLocalisation de l'emplacement de l'utilisateur.
• Surcouche : polygones, polylignes, cercles et couches de tuiles (varie par 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 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 Pour commencer, les touches sur l'overlay CSS sont activées ; les zones transparentes transmettent les gestes à la carte.

Référence complète

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