Mapa Nativo plugin de Capacitor

Usando @capgo/capacitor-native-map

Google Maps en Android, Apple MapKit en iOS y Google Maps JS en web con un solo archivo TypeScript API para marcadores, cámara, formas, agrupación y eventos.

Instalar

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

Qué Este Plugin Exposa

• create: una mapa integrado en un elemento DOM, o toBack: true : un mapa detrás de HTML transparente.
• updateLayout: redimensionar y reubicar el mapa nativo (píxeles CSS).
• setCamera / fitBounds: control de cámara y visor.
• addMarker / addMarkers / removeMarker: marcadores con oyentes de toque y arrastrar.
• enableClustering: agrupar conjuntos de marcadores densos.
• enableCurrentLocation: punto de ubicación del usuario cuando se permite.
• Superficies: polígonos, líneas polilíneas, círculos y capas de mosaico (varía por plataforma).

Uso de ejemplo

Mapa integrado

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.

Mapa de fondo con interfaz de usuario 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,
});

Envolver secciones HUD con data-map-overlay (consulte la documentación de inicio) para que el CSS de la capa de overlay habilite los toques; las áreas transparentes pasan gestos al mapa.

Referencia completa

• GitHub: https://github.com/Cap-go/capacitor-mapa-nativo/
• Documentación: /docs/plugins/mapa-nativo/