Cara Menambahkan Peta ke Aplikasi Anda: Embed, Peta Interaktif, dan Pencari Lokasi

Untuk menambahkan peta ke aplikasi Anda, pertama-tama putuskan apakah Anda memerlukan embed statis (satu lokasi dengan pin, seperti "temukan toko kami") atau peta interaktif (banyak pin dari data Anda, filter, pengelompokan, "terdekat dari saya"). Untuk satu lokasi, peta yang disematkan adalah yang tercepat dan, dengan Maps Embed API dari Google, gratis. Untuk peta interaktif, gunakan library peta JavaScript — Google Maps JavaScript API, Mapbox GL JS, atau Leaflet open-source dengan penyedia tile — simpan latitude dan longitude setiap tempat di database Anda, dan batasi kunci API Anda ke domain Anda sendiri. Detail vendor di bawah ini berasal dari dokumentasi masing-masing penyedia per September 2026.

Peta seperti apa yang Anda butuhkan?

Sebagian besar situs bisnis kecil hanya memerlukan baris pertama. Direktori, marketplace, dan situs daftar memerlukan baris ketiga dan keempat.

Opsi Anda

Google Maps Platform

Panduan memulai Google menyebutkan Anda harus membuat proyek Cloud dengan penagihan aktif dan mengaktifkan API yang Anda inginkan. Harga bayar sesuai pemakaian mereka memberi SKU Essentials, termasuk Dynamic Maps, batas gratis 10.000 event per bulan, dan mencantumkan Dynamic Maps seharga $7,00 per 1.000 event di atas itu (pada tingkat volume pertama). SKU Maps Embed dicantumkan sebagai tanpa batas dan gratis. Google juga menjual paket langganan bulanan. Cek harga Google Maps Platform untuk angka terkini.

Mapbox

Halaman harga Mapbox mencantumkan 50.000 pemuatan peta gratis per bulan untuk Mapbox GL JS di web, lalu $5,00 per 1.000 pemuatan. Lihat harga Mapbox.

Leaflet dan OpenStreetMap

Leaflet menggambarkan dirinya sebagai library JavaScript open-source untuk peta interaktif yang ramah seluler, sekitar 42 KB JavaScript. Ia membutuhkan tile peta (gambar peta) dari suatu tempat. Server tile publik OpenStreetMap memang menggoda, tetapi kebijakan penggunaan tile mewajibkan atribusi yang terlihat, melarang pengunduhan massal, tidak menjamin layanan, dan memperingatkan layanan komersial bahwa aksesnya bisa dicabut. Untuk produk nyata, gunakan sumber tile komersial atau yang di-host sendiri yang bekerja dengan Leaflet.

Kunci API: publik, tetapi dibatasi

Kunci peta yang dipakai di browser bisa dilihat oleh siapa pun yang membuka halaman Anda. Itu memang diharapkan, tetapi artinya seseorang bisa menyalin kunci Anda dan menaikkan pemakaian di tagihan Anda. Panduan keamanan Google adalah menambahkan pembatasan website (HTTP referrer) yang mencantumkan domain Anda, dan pembatasan API agar kunci hanya berfungsi untuk API yang Anda gunakan.

Kunci untuk layanan sisi server — misalnya geocoding ribuan alamat — sebaiknya kunci terpisah yang disimpan di secret sisi server, bukan di halaman. Atur juga peringatan anggaran atau kuota di konsol penyedia agar kesalahan tidak berubah menjadi tagihan besar.

Geocoding: ubah alamat menjadi koordinat sekali saja

Peta memetakan latitude dan longitude, bukan alamat. Mengubah alamat menjadi koordinat disebut geocoding, dan sebagian besar penyedia menagihnya per permintaan. Pola yang efisien:

1. Saat sebuah daftar disimpan, lakukan geocoding alamatnya di server.
2. Simpan latitude dan longitude di database.
3. Peta membaca koordinat tersimpan; peta tidak pernah melakukan geocoding saat halaman dilihat.

Periksa ketentuan setiap penyedia tentang berapa lama Anda boleh menyimpan hasil geocoding; aturannya berbeda-beda.

Contoh prompt

Satu peta yang disematkan:

Di halaman Kontak, tambahkan peta Google yang disematkan dan menampilkan alamat kami (12 High Street, Leeds) menggunakan Maps Embed API dengan kunci di GOOGLE_MAPS_EMBED_KEY. Tambahkan tautan "Dapatkan petunjuk arah" di bawahnya. Buat lebar penuh di ponsel dan muat secara lazy.

Peta interaktif berisi daftar:

Tambahkan latitude dan longitude ke tabel listings. Saat sebuah listing dibuat atau alamatnya berubah, lakukan geocoding di server dengan kunci di GEOCODING_API_KEY dan simpan koordinatnya. Di halaman Browse, tampilkan peta dengan satu marker per listing menggunakan Leaflet, dengan pengelompokan saat marker tumpang tindih. Mengklik marker menampilkan judul, harga, dan tautan. Peta dan daftar harus memakai filter yang sama.

"Terdekat dari saya":

Tambahkan tombol "Terdekat dari saya" yang meminta lokasi pengunjung dan menampilkan listing dalam radius 10 km, diurutkan berdasarkan jarak. Jika mereka menolak akses lokasi, biarkan mereka mengetik nama kota.

Langkah demi langkah

1. Pilih jenis peta dari tabel di awal.
2. Buat akun penyedia dan proyek, dan aktifkan hanya API yang Anda butuhkan.
3. Buat kunci: kunci browser yang dibatasi ke domain Anda (termasuk domain pratinjau saat membangun) dan, jika perlu, kunci server untuk geocoding.
4. Simpan kunci sebagai secret dan minta builder Anda memakainya; kunci browser tetap dibatasi meski akhirnya berada di halaman.
5. Simpan koordinat untuk setiap tempat di database Anda.
6. Bangun peta: marker, popup, pengelompokan, dan zoom default yang masuk akal.
7. Padukan dengan daftar. Peta saja sulit digunakan di ponsel dan oleh pembaca layar. Tampilkan hasil yang sama dalam bentuk daftar.
8. Atur peringatan anggaran di konsol penyedia.
9. Publikasikan dan uji di domain live, karena pembatasan referrer sering memblokir peta sampai domain live ditambahkan.

Kesalahan umum

• Kunci tanpa pembatasan. Siapa pun bisa memakainya ulang di situs mereka sendiri.
• Geocoding di setiap tampilan halaman. Lambat dan mahal; lakukan geocoding sekali saat disimpan.
• Lupa domain live di pembatasan kunci. Berfungsi di pratinjau, tetapi menjadi kotak abu-abu kosong di produksi.
• Tata letak hanya peta. Pin tanpa daftar menyulitkan di layar kecil dan tidak mudah diakses.
• Ratusan marker tanpa pengelompokan. Tidak terbaca dan lambat.
• Atribusi tidak ada. Sebagian besar penyedia peta dan tile mewajibkannya, dan menyembunyikannya melanggar ketentuan mereka.
• Meminta lokasi saat halaman dimuat. Mintalah hanya saat pengguna mengetuk "Terdekat dari saya".

Checklist

• Jenis peta yang tepat dipilih untuk pekerjaannya
• Kunci browser dibatasi ke domain Anda dan API yang diperlukan
• Kunci sisi server disimpan di secret
• Koordinat tersimpan di database, di-geocode sekali
• Hasil juga ditampilkan sebagai daftar
• Pengelompokan untuk banyak marker
• Atribusi terlihat
• Peringatan anggaran diatur di penyedia
• Diuji di domain yang sudah dipublikasikan dan di ponsel

Menambahkan peta dengan Mythex

Mythex tidak memiliki integrasi peta bawaan; Anda membawa kunci penyedia sendiri, menambahkannya sebagai secret proyek (atau menempelkannya saat agen menampilkan kartu secret), dan meminta peta di chat, seperti dijelaskan di Integrate any API. Koordinat disimpan di database proyek. Ingat untuk menambahkan domain pratinjau dan domain yang sudah dipublikasikan ke pembatasan website kunci, dan publikasikan lagi setelah mengubah secret.

Peta biasanya berdampingan dengan pencarian dan daftar: lihat cara menambahkan pencarian ke aplikasi Anda, cara membangun situs direktori, dan cara membangun situs bisnis kecil.

Pertanyaan