LUXEE HELPS
Tamu Tersesat Saat Mencari Lokasi? Ini Cara Edit Template Maps Lokasi Parallax V1!
📌 Apa itu Edit Template Maps Lokasi Parallax V1?
Edit Template Maps Lokasi Parallax V1 adalah langkah penyematan kode peta interaktif Google Maps ke dalam website undangan digital klien. Melalui perpaduan widget HTML Elementor dan tombol penunjuk arah, tamu undangan dapat melihat denah gedung pernikahan secara interaktif serta membuka navigasi rute jalan (GPS) secara instan.
Klien Anda menyelenggarakan resepsi pernikahan di gedung yang lokasinya cukup tersembunyi di tengah kota. Jika Anda hanya mencantumkan denah gambar mati biasa, tamu luar kota akan kesulitan mencari jalan dan berisiko tersesat. Dengan menyematkan **Peta Google Maps Iframe** interaktif serta tombol kustom *"Buka Google Maps"* bawaan Luxee Parallax V1, tamu cukup mengetuk layar ponsel mereka untuk langsung diarahkan ke rute tercepat oleh aplikasi Google Maps / Waze.
✨ Fitur Kunci Widget Peta Parallax V1
- Iframe Embed Integration: Mengintegrasikan visual peta satelit atau denah jalan Google Maps secara responsif dan interaktif di halaman situs.
- GPS Route Link: Menyematkan tombol pemantik khusus yang otomatis membuka aplikasi Google Maps/Waze di smartphone tamu.
- Border & Shadow Stylers: Mendesain tampilan tepi peta dengan lengkungan pinggir (border radius) dan efek bayangan (box shadow) agar serasi dengan ornamen floral di sekelilingnya.
🛠️ Langkah Menyematkan Google Maps
Langkah 1: Mengambil Kode Semat (Embed Code)
Buka situs **Google Maps** di browser komputer Anda. Cari nama lokasi gedung pernikahan klien, klik tombol **Share** (Bagikan), pilih tab **Embed a map** (Sematkan peta), lalu klik **Copy HTML**.
Langkah 2: Menempelkan Kode ke HTML Widget
Buka editor Elementor Anda, cari widget **HTML** atau **Text Editor** pada seksi lokasi. Klik widget tersebut, ubah mode penulisan ke **Text** (bukan *Visual*), lalu tempelkan (paste) kode HTML dari Google Maps tadi.
Langkah 3: Mengatur Responsivitas Lebar Peta
Ubah nilai parameter `width="600"` di dalam baris kode iframe tadi menjadi `width="100%"` agar lebar visual peta otomatis menyesuaikan dengan semua ukuran lebar layar HP tamu.
Langkah 4: Menghubungkan Tombol Navigasi Jalan
Klik pada tombol bertuliskan *"Petunjuk Lokasi / Buka Aplikasi Maps"*. Di panel kiri Elementor, isi kolom **Link** dengan URL rute langsung Google Maps gedung tersebut (contoh format: `https://maps.google.com/?q=Gedung+Pernikahan+A`).
Langkah 5: Menonton Video Langkah Setting Maps
Simak tata cara pengambilan kode semat iframe, trik pengaturan rasio peta responsif, serta integrasi rute GPS di video berikut:
Untuk memastikan halaman undangan tidak terasa berat saat di-scroll akibat memuat peta, tambahkan atribut `loading="lazy"` di dalam baris tag iframe Google Maps Anda. Trik ini akan memaksa browser untuk menunda pemuatan peta sebelum tamu benar-benar menggulir halaman hingga ke seksi lokasi.
🔗 Modul Panduan Terkait
Langkah penting berikutnya yang harus dikerjakan setelah menyetel peta:
💡 Pertanyaan Sering Ditanya (FAQ)
Tidak. Dengan menggunakan metode **HTML Iframe Embed** (Sematkan Peta) resmi dari Google Maps, Anda dapat menampilkan peta interaktif secara 100% gratis tanpa perlu mendaftarkan kartu kredit untuk API Key.
Hal ini disebabkan fitur zoom kursor aktif. Untuk mencegah layar tersangkut peta saat di-scroll di HP, Anda bisa membungkus widget peta di dalam container khusus dan mengaktifkan opsi CSS `pointer-events: none` yang akan dinonaktifkan kembali ketika area peta diketuk oleh tamu.
Buka situs resmi waze.com, cari lokasi gedung pernikahan klien, salin link URL pencarian lokasinya, lalu masukkan link tersebut pada tombol cadangan navigasi khusus Waze di bawah peta Anda.