Native Karte Capacitor Plugin

@capgo/capacitor-native-map verwenden

Google Maps auf Android, Apple MapKit auf iOS und Google Maps JS im Web – mit einem einzigen TypeScript-API für Marker, Kamera, Shapes, Clustering und Events.

Installieren

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

Was dieses Plugin bereitstellt

• create: eingebettete Karte in einem DOM-Element oder toBack: true für eine Karte hinter transparentem HTML.
• updateLayout: native Karte skalieren und neu positionieren (CSS-Pixel).
• setCamera / fitBounds: Kamera- und Viewport-Steuerung.
• addMarker / addMarkers / removeMarker: Marker mit Tap- und Drag-Listenern.
• enableClustering: dichte Marker-Sets gruppieren.
• enableCurrentLocation: Standortpunkt des Nutzers bei erteilter Berechtigung.
• Overlays: Polygone, Polylinien, Kreise und Tile-Layer (plattformabhängig).

Anwendungsbeispiel

Eingebettete Karte

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.

Hintergrundkarte mit HTML-UI

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

HUD-Bereiche mit ... umschließen data-map-overlay (siehe Getting Started), damit das Overlay-CSS Tipps ermöglicht; transparente Bereiche leiten Gesten an die Karte weiter.

Vollständige Referenz

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