Pada era digital saat ini, website memegang peranan penting dalam mempromosikan bisnis atau organisasi. Tak hanya menjadi media informasi, website juga dapat memberikan pengalaman yang lebih baik bagi pengunjung dengan menambahkan fitur-fitur interaktif seperti peta. Google Maps adalah salah satu platform peta yang sangat populer dan banyak digunakan. Dalam artikel ini, kita akan membahas bagaimana cara meng-embed Google Maps ke website.
Dengan adanya Google Maps, kita dapat dengan mudah menemukan lokasi bisnis atau organisasi kita dengan lebih detail dan mudah ditemukan oleh pengunjung. Selain itu, embed Google Maps pada website juga dapat memberikan pengalaman yang lebih baik bagi pengunjung dengan menampilkan lokasi bisnis atau organisasi secara visual dan interaktif.
Tujuan dari artikel ini adalah untuk memberikan panduan bagaimana cara meng-embed Google Maps ke website agar dapat digunakan sebagai fitur interaktif yang membantu pengunjung menemukan lokasi bisnis atau organisasi dengan mudah.
Cara Embed Google Map ke Website
Ada beberapa cara yang bisa digunakan untuk menambahkan peta Google Map di website.
Kita bisa menggunakan plugin jika website yang kita gunakan dibangun dengan WordPress, atau bisa menggunakan bantuan situs Embed Kode Google Map dan menyalin kode tersebut untuk di template ke halaman website yang akan di beri peta Map.
Menggunakan Situs Generator Embed Kode Google Map
Beberapa situs yang dapat membantu Anda meng-embed kode Google Maps pada website adalah:
- Google Maps Platform – Situs resmi dari Google yang memudahkan Anda untuk meng-embed kode Google Maps pada website.
- Maps Generator – Merupakan situs yang memudahkan Anda untuk membuat kode embed Google Maps dengan mudah.
- Embed Google Maps – Ini adalah situs yang memudahkan Anda untuk membuat kode embed Google Maps dengan mudah.
- BatchGeo – Salah satu situs yang memudahkan Anda untuk membuat kode embed Google Maps dengan fitur seperti marker, info window, dan lainnya.
Contoh:
Berikut adalah langkah-langkah untuk menggunakan Maps Generator untuk meng-embed Google Maps pada website:
1. Buka Situs Maps Generator
Kunjungi situs Maps Generator (https://maps-generator.com/).
2. Atur Tampilan dan Alamat Map
Masukkan detai alamat yang ingin ditampilkan pada peta, atau pilih lokasi pada peta seperti
- Title: Judul map yang akan di tampilkan (bisa dikosongkan)
- Street: Untuk memasukan lokasi detail nama jalan dan nomor.
- Zip Code: Untuk menambah kodepos.
- City: Isi dengan nama kota tujuan
- Map Type: Untuk menentukan tipe map yang akan di tampilkan
- Zoom: Kita bisa mengatur zoom peta dari ketinggian
- Map Height: Lebar peta yang akan ditampilkan
- Map Width: Tinggi peta yang akan di tampilkan
3. Google Map Preview
Untuk melihat tampilan peta, kita bisa melihat pratinjau peta di bagian “Google Map Preview”
4. Get Map Widget Code
Klik “Get map widget code” untuk mendapatkan kode HTML Google Map.
5. Copy Code to Clipboard
Klik “Copy code to Clipboard” untuk menyalin kode embed yang diberikan.
6. Template
Tempelkan kode tersebut pada halaman website yang akan diberi peta Google Map, pastikan untuk menggunakan mode “Teks” jika menggunakan WP dan Clasic Editor, juka Guterbeg bisa langsung di sisipkan melalui fitur embed code dan mode “HTML” jika menggunakan Blogger.
Tampilan Map di Website
Tampilan yang dihasilkan menggunakan Maps Generator.
Kita bisa membuang kode berikut untuk menghilangkan link website Map Generator, hapus kode berikut:
<a href='https://maps-generator.com/'>Maps Generator</a>Maka tampilan Map akan menjadi seperti berikut ini:
Ubah Hasil Tampilan Kode Embed Menjadi Responsif
Untuk merubah tampilan menjadi responsif dan menghapus link dari Maps Generator kita bisa mengubah denga cara berikut:
- Berikut adalah kode yang saya dapatkan dari situs Map Generator:
<iframe width="520" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" id="gmap_canvas" src="https://maps.google.com/maps?width=520&height=400&hl=en&q=%20Jakarta+()&t=&z=12&ie=UTF8&iwloc=B&output=embed"> </iframe> <a href='https://maps-generator.com/'>Maps Generator</a> - Kalian cuku sanlin link URL Mapnya saja, mulai dari https://map.google.com/…
https://maps.google.com/maps?width=520&height=400&hl=en&q=%20Jakarta+()&t=&z=12&ie=UTF8&iwloc=B&output=embedhttps://maps.google.com/maps?width=520&height=400&hl=en&q=%20Jakarta+()&t=&z=12&ie=UTF8&iwloc=B&output=embed - Silahkan sisipkan link peta Google Map tersebut di code berikut ini:
<div class="mapouter"> <div class="gmap_canvas"> <iframe id="gmap_canvas" src="Template-Link-Google-Map-Disini" width="300" height="250" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> </div> </div> - Ganti Template-Link-Google-Map-Disini dengan Link URL Google Map.
<div class="mapouter"> <div class="gmap_canvas"> <iframe id="gmap_canvas" src="https://maps.google.com/maps?width=520&height=400&hl=en&q=%20Jakarta+()&t=&z=12&ie=UTF8&iwloc=B&output=embedhttps://maps.google.com/maps?width=520&height=400&hl=en&q=%20Jakarta+()&t=&z=12&ie=UTF8&iwloc=B&output=embed" width="300" height="250" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> </div> </div> - Jika sudah, silahkan template kode tersebut ke laman website yang akan di tampilkan peta Google Map.
- Contoh tampilan Map bisa dilihat dibawah ini:
Dengan mengikuti langkah-langkah ini, Anda dapat dengan mudah menggunakan Maps Generator untuk meng-embed Google Maps pada website dan membuat pengalaman pengunjung menjadi lebih baik.
Sisipkan Google Map Kedalam Posting dari Web Resmi
Dengan menggunakan salah satu dari situs ini, Anda dapat dengan mudah meng-embed kode Google Maps pada website dan membuat pengalaman pengunjung menjadi lebih baik.
Persiapan
- Buat Akun Google Maps: Pertama, Anda harus memiliki akun Google Maps untuk dapat mengakses fitur pembuatan peta. Anda dapat mendaftar di https://maps.google.com/.
- Buat Peta yang Dikehendaki: Setelah memiliki akun, Anda dapat membuat peta yang sesuai dengan kebutuhan bisnis atau organisasi Anda.
Langkah-Langkah
- Temukan Kode Embed Google Map: Setelah peta selesai dibuat, buka peta tersebut dan klik tombol “Share” pada pojok kanan atas. Pilih opsi “Embed Map” dan salin kode yang muncul.
- Tempelkan Kode Embed pada Website: Buka halaman website yang ingin ditambahkan peta, lalu tempelkan kode yang telah disalin pada bagian yang dikehendaki.
- Konfigurasi Tampilan Peta: Anda dapat menyesuaikan tampilan peta sesuai kebutuhan dengan mengubah ukuran dan opsi lainnya yang tersedia.
Tips dan Trik
- Menambah Marker: Anda dapat menambahkan marker pada peta untuk menunjukkan lokasi bisnis atau organisasi dengan lebih jelas.
- Menyesuaikan Ukuran Peta: Ukuran peta dapat disesuaikan sesuai dengan kebutuhan dan tampilan website.
- Membuat Peta Interaktif: Anda dapat membuat peta interaktif dengan menambahkan fitur seperti zoom, info window, dan lainnya.
Dengan mengikuti langkah-langkah ini, Anda akan dapat dengan mudah meng-embed Google Maps ke website. Embed Google Maps akan membantu pengunjung menemukan lokasi bisnis atau organisasi dengan mudah dan memberikan pengalaman yang lebih baik.
Enmed Google Map Menggunakan Plugin di WordPress
Beberapa plugin yang dapat membantu Anda meng-embed Google Maps pada website adalah:
- Google Maps Plugin for WordPress – Merupakan plugin gratis untuk platform WordPress yang memudahkan Anda untuk meng-embed peta Google Maps pada website dengan mudah.
- Mapify.it – Ini adalah plugin yang memudahkan Anda untuk membuat peta interaktif dengan berbagai fitur seperti marker, info window, dan lainnya.
- WP Google Maps – Mudah menambahkan mapdengan plugin WordPress gratis yang memudahkan Anda untuk membuat peta Google Maps pada website dengan mudah.
- Simple Google Maps Shortcode – Salah satu plugin WordPress gratis yang memudahkan Anda untuk membuat peta Google Maps pada website dengan mudah menggunakan shortcode.
- Leaflet Maps Marker – plugin WordPress gratis yang memudahkan Anda untuk membuat peta interaktif dengan marker, info window, dan fitur lainnya.
Dengan menggunakan salah satu dari plugin ini, Anda dapat dengan mudah meng-embed Google Maps pada website dan membuat pengalaman pengunjung menjadi lebih baik.
Kesimpulan
Embed Google Maps pada website sangat berguna untuk membantu pengunjung menemukan lokasi bisnis atau organisasi dengan mudah dan memberikan pengalaman yang lebih baik. Dengan cara yang mudah dan sederhana, Anda dapat menambahkan fitur interaktif ini pada website dengan mengikuti langkah-langkah yang telah diberikan.
Kelebihan Embed Google Maps pada Website
- Memberikan pengalaman yang lebih baik bagi pengunjung
- Mempermudah pengunjung menemukan lokasi bisnis atau organisasi
- Menambah nilai tambah pada website
Saran Penggunaan yang Efektif
- Sesuaikan ukuran peta sesuai dengan tampilan website
- Tambahkan marker untuk menunjukkan lokasi dengan jelas
- Buat peta interaktif dengan menambahkan fitur seperti zoom, info window, dan lainnya.
Dengan mengikuti saran ini, Anda dapat memanfaatkan embed Google Maps pada website dengan efektif dan membuat pengalaman pengunjung menjadi lebih baik.