💡 Ingin Web Kamu Lebih Interaktif? Tambahkan Map, Rute, & WhatsApp Sekali Klik!

 💡 Ingin Web Kamu Lebih Interaktif? Tambahkan Map, Rute, & WhatsApp Sekali Klik!



---

Oleh: Sela Rectoverso – Kelas XII PPLG 2 SMKN 1 Banjar

---

Halo teman-teman! 👋
Pernah nggak sih kalian lihat website yang keren banget karena:

📍 Menampilkan lokasi tempat langsung di Google Maps
🛣 Ada tombol “Arahkan ke Lokasi” yang langsung buka Google Maps
📲 Dan ada juga tombol “Chat WhatsApp” yang bisa langsung kirim pesan ke pemiliknya?

Keren, kan?
Ternyata semua itu bisa *kita buat sendiri dengan sangat mudah, bahkan hanya dengan **HTML dan link dinamis* saja, lho! Cocok banget buat website sekolah, usaha, portofolio, hingga undangan digital.

---

 ✨ Apa Saja yang Akan Kita Buat?

Dalam tutorial ini, saya akan membagikan bagaimana cara:

✅ Menampilkan peta lokasi Google Maps di halaman web
✅ Membuat tombol "Dapatkan Rute" yang langsung buka Google Maps dengan rute ke lokasi kamu
✅ Membuat tombol WhatsApp yang bisa langsung digunakan pengunjung untuk chat secara otomatis ke nomor kamu, lengkap dengan pesan bawaan

---
🔧 Kode HTML Lengkap
import 'package:flutter/material.dart';
import 'dart:html' as html;
import 'dart:ui' as ui;

void main() {
  _registerIframe();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lokasi SMKN 1 Banjar',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.light,
        primaryColor: const Color(0xFF4A148C),
        scaffoldBackgroundColor: const Color(0xFFF3F4F6),
        fontFamily: 'Poppins',
        textTheme: const TextTheme(
          headline5: TextStyle(
              fontWeight: FontWeight.bold, fontSize: 28, color: Color(0xFF4A148C)),
          bodyText1: TextStyle(fontSize: 16, color: Color(0xFF3E3E3E)),
          button: TextStyle(
              fontWeight: FontWeight.w600, fontSize: 16, letterSpacing: 1.1),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
            elevation: 6,
            padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 28),
            textStyle:
                const TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
            shadowColor: Colors.deepPurpleAccent.withOpacity(0.6),
          ),
        ),
      ),
      home: const MapPage(),
    );
  }
}

class MapPage extends StatelessWidget {
  const MapPage({super.key});

  final String mapsDirectionUrl =
      'https://www.google.com/maps/dir/?api=1&destination=-7.3704257,108.5244391';
  final String whatsappUrl =
      'https://wa.me/628123456789?text=Halo%20SMKN%201%20Banjar';

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final isMobile = size.width < 700;
    final mapWidth = isMobile ? size.width * 0.9 : 720.0;
    final mapHeight = isMobile ? 300.0 : 460.0;

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: Row(
          children: [
            Image.network(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Logo_SMKN_1_Banjar.svg/1024px-Logo_SMKN_1_Banjar.svg.png',
              width: 44,
              height: 44,
              errorBuilder: (_, __, ___) =>
                  const Icon(Icons.school, size: 44, color: Colors.white),
            ),
            const SizedBox(width: 16),
            const Text('Lokasi SMKN 1 Banjar',
                style: TextStyle(fontWeight: FontWeight.w700, fontSize: 22)),
          ],
        ),
        elevation: 8,
        centerTitle: false,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(vertical: 32, horizontal: 24),
        child: Center(
          child: Column(
            children: [
              // Kartu Peta
              Container(
                width: mapWidth,
                height: mapHeight,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(24),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.deepPurple.withOpacity(0.12),
                      blurRadius: 30,
                      offset: const Offset(0, 15),
                    ),
                    BoxShadow(
                      color: Colors.deepPurple.withOpacity(0.05),
                      blurRadius: 8,
                      offset: const Offset(0, 5),
                    ),
                  ],
                ),
                clipBehavior: Clip.hardEdge,
                child: HtmlElementView(viewType: 'google-map-iframe'),
              ),
              const SizedBox(height: 40),
              // Tombol Rute dan WA
              SizedBox(
                width: mapWidth,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: ElevatedButton.icon(
                        icon: const Icon(Icons.navigation, size: 28),
                        label: const Text('Rute ke Sekolah'),
                        onPressed: () =>
                            html.window.open(mapsDirectionUrl, '_blank'),
                        style: ElevatedButton.styleFrom(
                          backgroundColor: const Color(0xFF6A1B9A),
                          padding: const EdgeInsets.symmetric(vertical: 18),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(20)),
                          elevation: 10,
                          shadowColor: Colors.deepPurpleAccent.withOpacity(0.7),
                          textStyle: const TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                    const SizedBox(width: 24),
                    Expanded(
                      child: ElevatedButton.icon(
                        icon: const Icon(Icons.chat, size: 28), // Ganti icon WA
                        label: const Text('Hubungi via WA'),
                        onPressed: () => html.window.open(whatsappUrl, '_blank'),
                        style: ElevatedButton.styleFrom(
                          backgroundColor: const Color(0xFF25D366),
                          padding: const EdgeInsets.symmetric(vertical: 18),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(20)),
                          elevation: 10,
                          shadowColor: Colors.greenAccent.withOpacity(0.6),
                          textStyle: const TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 50),
              // Footer Info
              SizedBox(
                width: mapWidth,
                child: Column(
                  children: [
                    Text(
                      'SMKN 1 Banjar - Mewujudkan Generasi Unggul dan Profesional',
                      style: Theme.of(context).textTheme.bodyText1!.copyWith(
                            fontWeight: FontWeight.w600,
                            color: const Color(0xFF4A148C),
                            fontSize: 16,
                            letterSpacing: 0.6,
                          ),
                      textAlign: TextAlign.center,
                    ),
                    const SizedBox(height: 12),
                    Wrap(
                      alignment: WrapAlignment.center,
                      spacing: 24,
                      children: const [
                        _FooterLink(icon: Icons.phone, label: '+62 812-3456-7890'),
                        _FooterLink(
                            icon: Icons.email, label: 'info@smkn1banjar.sch.id'),
                        _FooterLink(icon: Icons.web, label: 'www.smkn1banjar.sch.id'),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _FooterLink extends StatelessWidget {
  final IconData icon;
  final String label;
  const _FooterLink({required this.icon, required this.label});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(icon, color: const Color(0xFF4A148C), size: 20),
        const SizedBox(width: 6),
        Text(
          label,
          style: const TextStyle(
            fontWeight: FontWeight.w500,
            color: Color(0xFF4A148C),
            fontSize: 14,
          ),
        ),
      ],
    );
  }
}

void _registerIframe() {
  ui.platformViewRegistry.registerViewFactory(
    'google-map-iframe',
    (int viewId) => html.IFrameElement()
      ..width = '720'
      ..height = '460'
      ..src = 'https://www.google.com/maps?q=-7.3704257,108.5244391&z=15&output=embed'
      ..style.border = '0',
  );
}

---

💼 Kenapa Fitur Ini Penting?

Fitur seperti ini *membuat website jadi lebih hidup, profesional, dan user-friendly*.
Bayangkan kamu punya bisnis atau event — pengunjung nggak perlu lagi copy-paste alamat atau tanya-tanya via DM.

👉 Tinggal klik tombol “Rute” ➡ langsung buka Maps
👉 Tinggal klik tombol “WhatsApp” ➡ langsung tanya via chat

Simple, tapi powerful!

---

🎯 Siapa Saja yang Bisa Pakai?

Fitur ini cocok banget buat:

* Pelajar atau mahasiswa yang sedang membuat project web
* Pemilik usaha lokal (cafe, laundry, toko sembako, dll)
* Web undangan digital
* Event organizer
* Freelancer yang ingin menampilkan lokasi layanan

---

🔧 Apa Saja yang Dibutuhkan?

Tenang, kita tidak akan menggunakan API yang rumit.
Kita hanya butuh:

* Sedikit kode HTML
* Link Google Maps (dapat dari lokasi kamu sendiri)
* Link WhatsApp dengan parameter nomor dan pesan otomatis

---

 📍 Contoh Output yang Akan Kita Buat:

✅ Peta lokasi usaha/kegiatan kamu
✅ Tombol: "Arahkan Saya ke Lokasi"
✅ Tombol: "Chat via WhatsApp"

Semua bisa langsung dicoba dan digunakan di halaman HTML kamu.

---

 📝 Identitas Penulis

*Nama:* Sela Rectoverso
*Kelas:* XI PPLG 2 – SMKN 1 Banjar
*Proyek:* Blog pribadi & tutorial website edukatif

---

Jadi, kalau kamu ingin membuat website yang lebih interaktif dan tidak kalah dari website profesional di luar sana — *fitur map & WhatsApp ini WAJIB banget dicoba!* 🚀

Yuk lanjut ke bagian tutorial dan kodenya di bawah ini!
Semoga bermanfaat dan jangan lupa share ke temanmu ya! 😉

---


Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Aplikasi Absensi dengan Flutter & MockAPI

Membuat Aplikasi Absensi dengan Flutter & MockAPI Halo semuanya! 👋 Perkenalkan, saya Sela Salafiah , dari kelas XII RPL 2 . Kali ini saya ingin berbagi pengalaman saya dalam membuat aplikasi absensi sederhana menggunakan Flutter dengan dukungan MockAPI sebagai backend-nya. Kenapa Flutter & MockAPI? Flutter menjadi pilihan saya karena: ✨ Bisa membuat aplikasi multiplatform (Android & iOS) dengan satu codebase. ✨ Tampilan UI mudah dikustomisasi dan terlihat modern. ✨ Banyak library yang mendukung pengembangan. Sementara MockAPI sangat membantu dalam tahap awal pengembangan karena: ⚡ Mudah membuat REST API tanpa harus setup server. ⚡ Bisa membuat schema data sendiri sesuai kebutuhan. ⚡ Sangat cocok untuk testing aplikasi sebelum nanti dihubungkan ke database asli. Schema Absensi Di aplikasi absensi ini, saya membuat schema sederhana seperti berikut: id → nomor unik absensi name → nama siswa date → tanggal absensi timeIn → jam masuk timeOut → jam ...
Baca selengkapnya

Aplikasi Kantin Sekolah Digital: Mini Project Flutter untuk Transaksi Makanan di Sekolah

Gambar
DESKRIPSI APLIKASI Kantin Sekolah Digital adalah aplikasi mobile berbasis Flutter yang dirancang untuk mempermudah proses pemesanan makanan di lingkungan sekolah. Aplikasi ini menghubungkan siswa dengan kantin sekolah melalui sistem pemesanan digital yang efisien, transparan, dan praktis. Aplikasi ini memungkinkan siswa untuk: Melihat daftar menu yang tersedia Memilih dan menyesuaikan jumlah pesanan Melakukan checkout secara digital Mengirim pesanan langsung ke WhatsApp admin kantin TUJUAN PEMBUATAN APLIKASI 2.1 Tujuan Praktis Mengurangi antrian di kantin sekolah Mempercepat proses pemesanan makanan Meminimalisir kesalahan dalam pencatatan pesanan Memberikan pengalaman pemesanan yang modern dan efisien 2.2 Tujuan Edukasi Sebagai proyek akhir semester, aplikasi ini bertujuan untuk: Menerapkan konsep pemrograman mobile menggunakan Dart dan Flutter Menguasai penggunaan widget-widget dasar Flutter Memahami manajemen state dalam aplikasi Mempelajari integrasi dengan aplikasi eksternal seper...
Baca selengkapnya