Alternatif Plugin Google Maps Capacitor (2026)

Jika Anda butuh alternatif Google Maps untuk Capacitor, ada tiga jalur realistis: pertahankan plugin resminya @capacitor/google-maps dan atasi keterbatasannya, render peta di dalam WebView dengan library JavaScript seperti MapLibre GL JS atau Leaflet, atau gunakan plugin peta native yang dibangun di atas SDK lain. Capgo tidak menyediakan plugin rendering peta sendiri, jadi panduan ini membandingkan opsi secara netral, dan menunjukkan plugin Capgo yang bekerja baik bersama peta apa pun: handoff navigasi, geocoding, dan background location.

Mengapa developer mencari alternatif @capacitor/google-maps

Plugin resmi (versi 8 untuk Capacitor 8) meng-embed Google Maps SDK native di iOS dan Android serta Google Maps JavaScript API di web. Berfungsi, tapi poin-poin ini terus muncul.

Akun Google Cloud dengan billing aktif di setiap platform

Plugin ini butuh kunci API yang terhubung ke akun Google Cloud dengan billing aktif di Android, iOS, dan web. Harga Google untuk native mobile map load cukup murah, tapi Anda tetap harus mengatur billing, membatasi kunci per platform, dan memantau kuota. Penggunaan map web serta layanan seperti Places dan Directions akan ditagih berdasarkan pemakaian setelah melewati batas gratis. Cek halaman harga Google Maps Platform terbaru sebelum memutuskan, karena modelnya berubah di 2025.

Di Android, map digambar di belakang WebView

Di iOS, tampilan map ditempatkan di dalam scroll view WebView. Di Android, map dirender di bawah seluruh WebView, dan plugin akan menggerakkannya untuk mengikuti <capacitor-google-map> elemen tersebut. Setiap layer di atasnya harus transparan:

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

Ini adalah masalah utama penyebab “map saya kosong”. Hal ini juga membuat custom overlay, modal, dan transisi halaman jadi lebih sulit, karena HTML Anda berada di atas native view.

Marker bisa ditambah dan dihapus, tapi tidak bisa diupdate

API memiliki addMarker, addMarkers, removeMarker dan removeMarkers, tapi tidak ada updateMarker. Posisi kendaraan live berarti hapus lalu tambah di setiap update, yang bisa menyebabkan flicker dan menambah bridge calls.

Styling dan fitur terbatas di native

Beberapa opsi hanya tersedia di web, contohnya mapId untuk styling berbasis cloud, dan region dan language. Anda mendapatkan marker, clustering, polyline, polygon, circle, tile overlay, kontrol kamera, dan click listener. Jika Anda butuh data-driven styling, heatmap, atau 3D buildings yang sama di semua platform, Anda akan menemui batasan.

The options at a glance

Tidak ada satu pemenang tunggal. Pilihan yang tepat bergantung pada volume data, kebutuhan styling, dan seberapa besar Anda ingin bergantung pada satu vendor.

Opsi 1: MapLibre GL JS di WebView

MapLibre GL JS adalah fork open source dari Mapbox GL JS v1. Merender vector tiles dengan WebGL dan berjalan dengan baik di WKWebView dan Android System WebView. Ini adalah opsi paling fleksibel jika Anda tidak membutuhkan data 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]);
}

Lapisan GeoJSON, styling berbasis data, dan garis rute adalah fitur utama:

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

Hal yang perlu diketahui:

• Anda membutuhkan sumber tile. Opsi meliputi host vektor tile komersial, atau self-hosting tile yang dihasilkan dari data OpenStreetMap. Server tile publik OpenStreetMap memiliki kebijakan penggunaan yang tidak mengizinkan lalu lintas aplikasi yang berat.
• Selalu tampilkan atribusi yang diwajibkan oleh penyedia tile Anda.
• Karena ini adalah code web biasa, peta yang sama berfungsi di pratinjau browser, yang mempercepat pengembangan.

Opsi 2: Leaflet

Leaflet kecil dan matang. Cocok untuk peta dengan beberapa ratus marker, tile raster, dan interaksi sederhana.

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');

Dalam aplikasi ter-bundle, path ikon marker default Leaflet sering rusak. Impor gambar ikon dan set L.Icon.Default options, atau gunakan L.divIcon.

Opsi 3: Google Maps JavaScript API di WebView

Jika Anda membutuhkan data dan tampilan Google, tetapi ingin peta berperilaku seperti elemen HTML lainnya, muat Maps JavaScript API di WebView alih-alih SDK native. Anda kehilangan beberapa kehalusan native, dan setiap pemuatan peta adalah beban web yang dapat ditagih, tetapi Anda mendapatkan API JS penuh: styling cloud dengan map ID, marker lanjutan, dan lapisan data.

Batasi kunci web berdasarkan referrer HTTP. Di iOS, Capacitor menyajikan aplikasi dari capacitor://localhost secara default, dan di Android dari https://localhost, jadi tambahkan origin tersebut ke pembatasan kunci dan uji keduanya.

Opsi 4: Plugin native berbasis SDK lain

Wrapper native untuk MapLibre Native atau SDK Mapbox tersedia di komunitas. Mereka memberikan gesture dan performa native dengan sumber tile apa pun. Sebelum memilih, pastikan mendukung Capacitor 8, memiliki rilis terbaru, mendukung Swift Package Manager di iOS (default untuk proyek iOS Capacitor 8 baru), dan mencakup tipe overlay yang Anda butuhkan. Plugin peta native memiliki trade-off layering yang sama dengan plugin resmi: peta adalah view native, dan HTML Anda harus di-layout di sekitarnya.

Tetap gunakan @capacitor/google-maps jika

• Anda membutuhkan peta dasar Google, data Places, dan Street View.
• Peta Anda adalah view layar penuh, bukan kartu kecil di dalam konten yang di-scroll.
• Anda bisa menerima remove dan add untuk memindahkan marker, atau memperbarui posisi jarang-jarang.

Jika Anda mempertahankannya, atur CSS transparansi di atas, berikan <capacitor-google-map> elemen ukuran eksplisit, panggil destroy() saat meninggalkan halaman, dan atur skipLibCheck: true di tsconfig.json seperti yang diminta README plugin.

Plugin yang cocok dengan peta apa pun

Apa pun yang merender peta, plugin Capgo ini menangani bagian native yang tidak bisa dilakukan peta WebView sendiri.

Serahkan navigasi turn-by-turn

Membangun navigasi adalah proyek tersendiri. Sebagian besar aplikasi justru membuka aplikasi navigasi pilihan pengguna. @capgo/capacitor-launch-navigator mendukung Apple Maps, Google Maps, Waze, dan banyak lainnya:

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

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

Geocode tanpa web service

@capgo/capacitor-nativegeocoder menggunakan geocoder platform di iOS dan Android, yang tidak memerlukan kunci Google di perangkat:

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

Di web, plugin ini menggunakan API dari Google dan membutuhkan apiKey opsi.

Tampilkan posisi pengguna, bahkan saat di background

Untuk “blue dot” di foreground, @capacitor/geolocation sudah cukup. Untuk terus tracking saat aplikasi di background, atau memicu event saat pengguna memasuki suatu tempat, gunakan @capgo/background-geolocation, dan teruskan titik-titiknya ke map yang Anda pilih.

Troubleshooting masalah map di Capacitor

Map kosong di Android dengan plugin resmi. Transparansi hilang pada elemen parent. Periksa dengan Chrome DevTools via chrome://inspect dan cari warna background di antara <html> dan elemen map.

Elemen map memiliki height nol. Container map tidak punya ukuran intrinsik. Atur height secara eksplisit, atau gunakan flex layout dengan parent height yang tetap.

Peta WebGL terlihat buram atau lambat di Android. Pastikan System WebView di perangkat sudah diperbarui, kurangi jumlah layer, dan hindari membuat ulang peta setiap kali route berubah. Buat sekali dan gunakan kembali.

Tile tidak termuat di release build. Periksa Content Security Policy dan network security config Anda, lalu pastikan host tile menggunakan HTTPS.

Peta jadi rusak setelah Anda mengubah URL style tile. Style dan URL tile hanyalah konfigurasi JavaScript. Anda bisa ganti provider untuk user yang sudah ada dengan Live updates Capgo, tanpa rilis ke app store, selama tidak ada perubahan native code.

Cara memutuskan

• Butuh data Google dan performa native di peta full screen: tetap gunakan @capacitor/google-maps.
• Butuh custom styling, tanpa billing Google, dan peta yang berperilaku seperti HTML: MapLibre GL JS.
• Butuh peta sederhana dengan beberapa marker: Leaflet.
• Butuh tampilan Google di layout scroll: Google Maps JS API di WebView.

Apa pun pilihannya, tes lebih awal di perangkat Android low-end. Untuk building block native lainnya, telusuri direktori plugin Capgo.