Capacitor Alternativas del plugin de Mapas de Google (2026)

If you need a Capacitor Google Maps alternative, you have three realistic paths: keep the official @capacitor/google-maps plugin and work around its limits, render the map inside the WebView with a JavaScript library such as MapLibre GL JS or Leaflet, or use a native map plugin built on another SDK. Capgo does not ship its own map rendering plugin, so this guide compares the options neutrally, and shows the Capgo plugins that work well next to any map: navigation handoff, geocoding and background location.

Por qué los desarrolladores buscan más allá de @capacitor/google-maps

El plugin oficial (versión 8 para Capacitor 8) incorpora el mapa de Google nativo SDK en iOS y Android y el mapa de Google JavaScript API en la web. Funciona, pero estos puntos surgen una y otra vez.

Una cuenta de Google Cloud con facturación habilitada en cada plataforma

El plugin necesita API claves vinculadas a una cuenta de Google Cloud con facturación habilitada, en Android, iOS y web. La tarifa de Google para cargas de mapa móvil nativo es generosa, pero todavía debes configurar la facturación, restringir claves por plataforma y vigilar las cuotas. Las cargas de mapa web y servicios como Lugares y Direcciones se facturan según el uso después de los límites gratuitos. Verifique la página de precios actualizada del Google Maps Platform antes de comprometerse, ya que el modelo cambió en 2025.

En Android, el mapa se dibuja detrás del WebView

En iOS, el mapa de vista se coloca en la vista de desplazamiento del WebView. En Android, se renderiza debajo de toda la WebView, y el plugin lo mueve para seguir a <capacitor-google-map> el elemento. Cada capa encima de él debe ser transparente:

/* Required on Android with @capacitor/google-maps */
html,
body,
ion-content,
ion-content::part(background) {
  background: transparent !important;
  --background: transparent;
}

Esto es el problema número uno de "mi mapa está en blanco". También hace que las capas personalizadas, modales y transiciones de página sean más difíciles, porque tu HTML se encuentra encima de una vista nativa.

Los marcadores se pueden agregar y eliminar, pero no actualizar

El API tiene addMarker, addMarkers, removeMarker pero no removeMarkerspero no updateMarkerUn vehículo en movimiento significa eliminar y agregar en cada actualización, lo que puede causar parpadeo y conlleva llamadas de puente.

Limitaciones en el estilo y características nativas

Algunas opciones son solo para web, por ejemplo mapId para el estilo basado en la nube, y region y language. Puedes obtener marcadores, agrupación, líneas, polígonos, círculos, capas de tiles, control de cámara y escuchas de clic. Si necesitas un estilo basado en datos, mapas de calor o edificios en 3D de la misma manera en todas las plataformas, alcanzarás los límites.

Las opciones a la vista

No hay un ganador único. La elección correcta depende del volumen de datos, necesidades de estilos y cuánto quieras depender de un proveedor.

Opción 1: MapLibre GL JS en la WebView

MapLibre GL JS es el fork de código abierto de Mapbox GL JS v1. Rende vectores con WebGL y funciona bien en WKWebView y el Android System WebView. Es la opción más flexible si no necesita los datos de Google.

bun add maplibre-gl

import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://your-tile-provider.example.com/styles/streets/style.json',
  center: [2.3522, 48.8566], // [lng, lat]
  zoom: 12,
});

map.addControl(new maplibregl.NavigationControl(), 'top-right');

// A marker you can move without remove/add
const courier = new maplibregl.Marker({ color: '#1d4ed8' })
  .setLngLat([2.35, 48.85])
  .addTo(map);

export function moveCourier(lng: number, lat: number) {
  courier.setLngLat([lng, lat]);
}

Capas GeoJSON, estilos impulsados por datos y líneas de ruta son de primera clase:

map.on('load', () => {
  map.addSource('route', {
    type: 'geojson',
    data: {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: [
          [2.3522, 48.8566],
          [2.3376, 48.8606],
          [2.2945, 48.8584],
        ],
      },
    },
  });
  map.addLayer({
    id: 'route-line',
    type: 'line',
    source: 'route',
    paint: { 'line-color': '#2563eb', 'line-width': 5 },
  });
});

Cosas a tener en cuenta:

• Necesita una fuente de mosaicos. Las opciones incluyen anfitriones comerciales de mosaicos vectoriales, o autoalbergar mosaicos generados desde los datos de OpenStreetMap. Los servidores públicos de OpenStreetMap tienen una política de uso que no permite un tráfico de aplicación pesado.
• Siempre muestra la atribución que requiere su proveedor de mosaicos.
• Porque es web plano code, el mismo mapa funciona en una vista previa del navegador, lo que acelera el desarrollo.

Opción 2: Leaflet

Leaflet es pequeño y maduro. Es una buena opción para mapas con unos pocos cientos de marcadores, mosaicos rasterizados y interacciones simples.

bun add leaflet

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const map = L.map('map').setView([48.8566, 2.3522], 13);

L.tileLayer('https://tiles.example.com/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© OpenStreetMap contributors',
}).addTo(map);

L.marker([48.8584, 2.2945]).addTo(map).bindPopup('Eiffel Tower');

In bundled apps, Leaflet’s default marker icon paths often break. Import the icon images and set L.Icon.Default opciones, o utilice sus propias L.divIcon.

Opción 3: Google Maps JavaScript API en la WebView

If you need Google’s data and look, but want the map to behave like any other HTML element, load the Maps JavaScript API in the WebView instead of the native SDK. You lose some native smoothness, and every map load is a billable web load, but you get the full JS API: cloud styling with map IDs, advanced markers, data layers.

Restringe la clave web por referente HTTP. En iOS, Capacitor sirve la aplicación desde capacitor://localhost por defecto, y en Android desde https://localhost, así que agrega esas orígenes a las restricciones de la clave y prueba ambos.

Opción 4: Plugins nativos construidos sobre otras SDKs

Native wrappers around MapLibre Native or the Mapbox SDKs exist in the community. They give native gestures and performance with any tile source. Before choosing one, check that it supports Capacitor 8, has a recent release, supports Swift Package Manager on iOS (the default for new Capacitor 8 iOS projects), and covers the overlay types you need. Native map plugins share the same layering trade-off as the official plugin: the map is a native view, and your HTML has to be laid out around it.

Mantén @capacitor/google-maps si

• Necesitas el mapa base de Google, datos de Places y Street View.
• Tu mapa es una vista de pantalla completa, no una tarjeta pequeña dentro de contenido deslizante.
• Puedes vivir con eliminar y agregar para mover marcadores, o actualizar posiciones raramente.

Si lo mantienes, establece la transparencia CSS arriba, da al <capacitor-google-map> elemento un tamaño explícito, llama destroy() cuando se abandona la página, y se establece skipLibCheck: true in tsconfig.json como el README del plugin requiere.

Plugins que se combinan bien con cualquier mapa

Lo que renderiza el mapa, estos Capgo plugins cubren las partes nativas que un mapa de WebView no puede hacer por sí solo.

Entregar la navegación por turnos

Crear navegación es un proyecto por sí solo. La mayoría de las aplicaciones abren la app de navegación preferida del usuario. @capgo/capacitor-launch-navigator soporta Apple Maps, Google Maps, Waze y muchas otras:

import { LaunchNavigator, TransportMode } from '@capgo/capacitor-launch-navigator';

await LaunchNavigator.navigate({
  destination: [48.8584, 2.2945], // [lat, lng]
  options: { transportMode: TransportMode.DRIVING },
});

Geocodificar sin un servicio web

@capgo/capacitor-nativegeocoder usa los geocodificadores de la plataforma en iOS y Android, que no necesitan una clave de Google en el dispositivo:

import { NativeGeocoder } from '@capgo/capacitor-nativegeocoder';

const { addresses } = await NativeGeocoder.reverseGeocode({
  latitude: 48.8584,
  longitude: 2.2945,
  maxResults: 1,
});
console.log(addresses[0]?.thoroughfare, addresses[0]?.locality);

const result = await NativeGeocoder.forwardGeocode({
  addressString: '5 Avenue Anatole France, Paris',
  maxResults: 1,
});
console.log(result.addresses[0]?.latitude, result.addresses[0]?.longitude);

On the web, el plugin usa Google’s API y necesita la apiKey opción.

Mostrar la posición del usuario, incluso en segundo plano

Para un punto azul en primer plano, @capacitor/geolocation Para mantener el seguimiento mientras la aplicación está en segundo plano, o para desencadenar eventos cuando los usuarios ingresan lugares, utilice @capgo/background-geolocationSolucionar problemas de mapa en __CAPGO_KEEP_0__

Resolución de problemas con el mapa en Capacitor

Mapa en blanco en Android con el plugin oficial. La transparencia está faltando en un elemento padre. Inspecciona con Chrome DevTools a través de chrome://inspect y busca cualquier color de fondo entre <html> El elemento de mapa tiene cero altura.

Elemento de mapa tiene cero altura. Los contenedores de mapas no tienen un tamaño intrínseco. Establezca una altura explícita o utilice un diseño flexible con una altura de padre fija.

El mapa WebGL es borroso o lento en Android. Verifique que la vista de sistema WebView esté actualizada en el dispositivo, reduzca el número de capas y evite re-crear el mapa en cada cambio de ruta. Crea una sola vez y reutilízala.

Los tiles no se cargan en compilaciones de producción. Verifique su política de seguridad de contenido y la configuración de seguridad de red, y asegúrese de que el host de tiles esté en HTTPS.

El mapa se rompe después de cambiar la URL del estilo de tiles. Los estilos y las URLs de tiles son solo configuración de JavaScript. Puede cambiar proveedores para usuarios existentes con Capgo actualizaciones en vivosin una versión en la tienda de aplicaciones, siempre y cuando no haya cambios nativos en code.

Cómo decidir

• Necesita datos de Google y rendimiento nativo en una pantalla completa de mapa: mantener @capacitor/google-maps.
• Necesita datos de Google y rendimiento nativo en un mapa completo de pantalla: mantenga
• Necesita un mapa simple con unos pocos marcadores: Leaflet.
• Necesita la vista de Google en un layout de desplazamiento: Google Maps JS en el WebView de API.

Independientemente de la que elijas, prueba en un dispositivo Android de bajo rendimiento temprano. Para más bloques de construcción nativos, explora el Capgo directorio de plugins.