Bikin Fitur Maps di ZaapRun Flutter, Ada Tombol Rute & WhatsApp Gesss 🗺️💬

---

Heyy sobat ngoding! 😎
Di project Flutter gue yang bernama ZaapRun, gue lagi nambahin fitur yang menurut gue wajib banget ada di aplikasi kekinian — yaitu Maps pake iframe, lengkap sama tombol rute dan tombol chat ke WA! 🔥

🧠 Kenapa Nggak Pake Plugin Maps?

Gue tau sih di Flutter ada plugin kayak google_maps_flutter, tapi ribet bro, harus API key, setting sana-sini, kadang error juga. Jadi gue cari cara yang lebih cepet dan simpel: langsung sematkan Google Maps pake iframe di dalam WebView.
Lebih ringan, lebih clean, dan tetep works!

---

🔧 Cara Gue Nerapin di Flutter

Gue pake package webview_flutter buat nampilin HTML-nya. Nah di HTML itu gue tempelin iframe maps + 2 tombol penting:

WebView(
  initialUrl: Uri.dataFromString(
    '''
    <html>
    <body style="margin:0;padding:0;text-align:center;font-family:sans-serif;">
      <iframe 
        src="https://www.google.com/maps/embed?pb=..." 
        width="100%" height="350" style="border:0;" allowfullscreen loading="lazy">
      </iframe>
      <br><br>
      <a href="https://www.google.com/maps/dir/?api=1&destination=-6.123456,106.123456" target="_blank">
        <button style="padding:10px 25px;border:none;background:#000;color:#fff;border-radius:8px;">📍 Buka Rute</button>
      </a>
      <br><br>
      <a href="https://wa.me/6281234567890" target="_blank">
        <button style="padding:10px 25px;border:none;background:#25D366;color:#fff;border-radius:8px;">💬 Chat WA</button>
      </a>
    </body>
    </html>
    ''',
    mimeType: 'text/html'
  ).toString(),
  javascriptMode: JavascriptMode.unrestricted,
)

---

🚀 Hasilnya Gimana?

• Bisa liat lokasi langsung di aplikasi.

• Bisa klik tombol "Buka Rute" buat langsung navigasi ke lokasi via Google Maps.

• Bisa klik tombol "Chat WA" buat langsung ngobrol.

Semua langsung jalan, tanpa perlu install plugin ribet, tanpa loading berat. Simpel, clean, dan user-friendly banget.

---

💭 Buat Apa Sih Fitur Ini?

Cocok buat lo yang mau bikin aplikasi:

• Lokasi bisnis 🏪

• Titik jemput/antar 🛵

• Map sekolah, rumah, kampus, atau event 📍

• Dan pokoknya biar user langsung tau: "Gue harus ke mana nih?"

---

Segitu dulu cerita gue kali ini.
Kalo lo pengen nyoba juga, tinggal copas aja konsep ini. Dijamin gampang dan cepet jadi. 😎
Mau tanya-tanya? Klik tombol WhatsApp aja gengs! 💬

Peace out, stay ngoding! ✌️

---