Tujuan Pembelajaran

Mampu menggunakan react-native-maps di Expo
Memahami marker, callout, polyline, dan region
Mengerti perbedaan Google Maps (Android) vs Apple Maps (iOS)

Analogi

Diagram


      MapView = Kanvas Peta:
- MapView = kanvas kosong
- Marker = pin di lokasi
- Callout = bubble info saat tap marker
- Polyline = garis rute (A ke B)
- Region = viewport (area yang terlihat di layar)

MapView seperti kanvas — kamu tambahkan marker untuk titik, callout untuk info, polyline untuk rute, region untuk viewport.

Penjelasan Konsep

react-native-maps menyediakan komponen MapView native — Google Maps di Android, Apple Maps di iOS. Expo mendukung ini lewat development build (tidak support di Expo Go).

Setup: (1) Install: npx expo install react-native-maps. (2) Plugin: react-native-maps dengan Google Maps API key (untuk Android). (3) Gunakan: <MapView style={flex:1} initialRegion={...} />.

Region: { latitude, longitude, latitudeDelta, longitudeDelta }. Delta mengontrol zoom level — 0.01 = sangat dekat, 1 = sangat jauh.

Marker: <Marker coordinate={...} title="Lokasi" description="Deskripsi" />. Custom marker: <Marker><CustomComponent /></Marker>. Draggable marker: draggable onDragEnd={(e) => update(e.nativeEvent.coordinate)}.

Callout: <Callout><View><Text>Detail</Text></View></Callout> — muncul saat tap marker. Bisa di-navigate ke screen lain.

Polyline: <Polyline coordinates={route} strokeColor="#007AFF" strokeWidth={4} /> — untuk rute, jalur tracking.

Google Maps vs Apple Maps: styling berbeda. Google Maps support custom map style (JSON), Apple Maps terbatas. Android wajib Google Maps API key. iOS bisa Apple Maps (default) atau Google Maps (dengan konfigurasi).

Performance: markers dalam jumlah ribuan → gunakan clustering (react-native-map-clustering). Re-render region → debounce onRegionChange.

Inti yang Perlu Dipahami

Bagian ini berfokus pada mampu menggunakan react-native-maps di Expo., memahami marker, callout, polyline, dan region., dan mengerti perbedaan Google Maps (Android) vs Apple Maps (iOS). Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca react-native-maps Integration, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

MapView seperti kanvas — kamu tambahkan marker untuk titik, callout untuk info, polyline untuk rute, region untuk viewport. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. MapView dengan initialRegion. Marker dengan title dan Callout untuk info. Polyline dari array coordinates untuk jalur.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

import MapView, { Marker, Callout, Polyline } from "react-native-maps";
import { View, Text } from "react-native";

export default function MapScreen() {
  const route = [{ latitude: -6.2, longitude: 106.8 }, { latitude: -6.21, longitude: 106.82 }];

  return (
    <MapView style={{ flex: 1 }} initialRegion={{ latitude: -6.2, longitude: 106.8, latitudeDelta: 0.05, longitudeDelta: 0.05 }}>
      <Marker coordinate={{ latitude: -6.2, longitude: 106.8 }} title="Start">
        <Callout><Text>Lokasi Awal</Text></Callout>
      </Marker>
      <Marker coordinate={{ latitude: -6.21, longitude: 106.82 }} title="End">
        <Callout><Text>Lokasi Tujuan</Text></Callout>
      </Marker>
      <Polyline coordinates={route} strokeColor="#007AFF" strokeWidth={4} />
    </MapView>
  );
}

Penjelasan Kode

MapView dengan initialRegion. Marker dengan title dan Callout untuk info. Polyline dari array coordinates untuk jalur.

Prompt AI

Buat fitur 'Restoran Terdekat': fetch restoran dari Google Places API → tampilkan sebagai Markers dengan custom icon → saat tap, tampilkan Callout dengan nama, rating, dan tombol 'Navigasi'. Cluster markers untuk performa.

Pertanyaan Reflektif

Aplikasi maps apa yang paling sering kamu pakai? Apa fitur maps yang paling kamu butuhkan di aplikasimu sendiri?