Advan – Menyematkan Google Maps ke dalam HTML itu sebenarnya gampang banget, lho! Dengan hanya beberapa langkah sederhana, kamu bisa menambahkan peta yang interaktif ke situsmu. Ini pastinya akan membantu pengunjungmu menemukan lokasi bisnismu atau tempat menarik lainnya. Di artikel ini, kita akan bahas langkah-langkahnya dan tips praktis lainnya.
Mengapa Menyematkan Google Maps itu Penting?
Sebelum kita masuk ke cara menyematkan Google Maps ke dalam HTML, penting buat kamu tahu kenapa hal ini sangat berguna. Dengan peta interaktif, pengunjung bisa:
Mudah menemukan lokasi: Mereka bisa langsung melihat di mana lokasi kamu berada.
Mendapatkan informasi tambahan: Seperti petunjuk arah dan jarak dari lokasi mereka.
Meningkatkan pengalaman pengguna: Hal ini membuat website kamu lebih menarik dan interaktif.
Jadi, yuk kita mulai!
Cara Menyematkan Google Maps ke dalam HTML
Berikut ini langkah-langkah mudah untuk menyematkan Google Maps ke dalam HTML. Kamu hanya perlu mengikuti langkah-langkah di bawah ini:
1.Buka Google Maps
Langkah pertama yang perlu kamu lakukan adalah membuka Google Maps. Setelah itu, cari lokasi yang ingin kamu sematkan. Misalnya, jika kamu memiliki bisnis atau lokasi menarik yang ingin ditampilkan, cukup ketikkan nama atau alamatnya di kolom pencarian.
2.Ambil Kode Penyematan
Setelah menemukan lokasi yang diinginkan, cari tombol berbagi (ikon berbagi) di sisi kiri. Klik tombol itu, dan kamu akan melihat beberapa opsi. Pilih “Embed a map” atau “Sematkan peta”. Di sini, kamu akan menemukan kode HTML yang siap disematkan.
3.Salin Kode HTML
Setelah memilih ukuran peta yang kamu inginkan (misalnya kecil, sedang, atau besar), salin kode HTML yang muncul. Kode ini biasanya terlihat seperti ini:
html
Copy code
<iframe src=”https://www.google.com/maps/embed?pb=…”></iframe>
4.Tempelkan Kode ke dalam HTML
Selanjutnya, buka file HTML kamu dan tempelkan kode yang telah kamu salin di tempat yang diinginkan. Misalnya, jika kamu ingin menampilkan peta di bagian konten utama, letakkan kode di antara tag <body> dan </body>.
html
Copy code
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Peta Lokasi</title>
</head>
<body>
<h1>Lokasi Bisnis Kami</h1>
<iframe src=”https://www.google.com/maps/embed?pb=…”></iframe>
</body>
</html>
5.Sesuaikan Ukuran Peta
Jika ukuran peta yang kamu dapatkan tidak sesuai, kamu bisa mengubah nilai width dan height di dalam tag <iframe>. Contohnya:
html
Copy code
<iframe src=”https://www.google.com/maps/embed?pb=…” width=”600″ height=”450″></iframe>
6.Simpan dan Cek
Setelah semua langkah di atas, jangan lupa untuk menyimpan file HTML kamu dan buka di browser untuk melihat hasilnya. Pastikan peta muncul dengan baik dan interaktif!
Baca Juga: Cara Menambahkan Google Maps di Elementor untuk Website yang Lebih Interaktif
Tips Tambahan untuk Penggunaan Google Maps
Setelah kamu tahu cara menyematkan Google Maps ke dalam HTML, ada beberapa tips tambahan yang bisa bikin peta kamu lebih menarik:
Gunakan Marker Khusus: Jika lokasi kamu adalah tempat bisnis, pertimbangkan untuk menggunakan marker khusus agar lebih mencolok.
Tautkan ke Website atau Kontak: Dalam peta yang disematkan, kamu juga bisa menambahkan link ke website atau informasi kontak agar pengunjung bisa langsung menghubungi atau mencari tahu lebih lanjut.
Jangan Lupa Responsif: Pastikan peta yang kamu sematkan responsif sehingga bisa ditampilkan dengan baik di berbagai perangkat.
Dapatkan Perangkat yang Mendukung Pekerjaan Kamu
Menyematkan Google Maps ke dalam HTML adalah langkah yang mudah untuk meningkatkan interaksi di situsmu. Namun, untuk memudahkan segala pekerjaanmu, mungkin kamu butuh perangkat yang tepat.
Kalau kamu mencari laptop yang mumpuni untuk mendukung kreativitas dan pekerjaanmu, coba deh lihat ADVAN Laptop 360 Stylus 2in1 Touchscreen – Intel i3 14.1” FHD IPS. Laptop ini dilengkapi dengan fitur touchscreen yang memudahkan navigasi, ideal untuk desain web dan pekerjaan multitasking.
Nah, itu dia cara menyematkan Google Maps ke dalam HTML dengan mudah! Dengan langkah-langkah yang telah dijelaskan, kamu bisa membuat situsmu lebih informatif dan menarik. Jangan ragu untuk eksplor lebih jauh dan berkreasi dengan peta yang kamu sematkan. Selamat mencoba!***
Editor: Andik Chefasa