Di era digital seperti sekarang, kehadiran peta interaktif, seperti Google Maps, menjadi kebutuhan penting untuk memperkuat kredibilitas dan mempermudah navigasi pengunjung sebuah website. Namun, tidak semua pemilik website tahu cara menambahkan Google Maps di website dengan benar.
Penasaran bagaimana caranya? Baca artikel ini sampai selesai, ya!
Baca Juga: 7 Rahasia Desain Website Terbaik yang Bikin Pengunjung Betah
Cara Menambahkan Google Maps di Website
Jika ingin menambahkan Google Maps ke website, Anda bisa menggunakan JavaScript dan HTML.
A. JavaScript
Ikuti tahapannya secara urut agar Anda tidak menemukan error apa pun.
1. Mendapatkan API Key Google Maps
API Key Google Maps Anda butuhkan untuk mengakses layanan peta dari Google. Berikut ini cara mendapatkannya.
- Pertama, buka Google Cloud Console dan masuk ke bagian Google Maps.
- Pilih menu Credentials di sidebar kiri.
- Lalu, klik tombol Create Credentials di bagian atas.
- Pilih API Key dan salin kunci yang muncul untuk Anda gunakan nanti.
2. Membuat Kontainer HTML untuk Peta
Kemudian, buat file HTML baru dan tambahkan elemen div dengan ID khusus untuk peta:
<div id="map"></div>3. Menambahkan Gaya pada Kontainer Peta
Jika sudah, atur ukuran peta menggunakan CSS agar tampilannya sesuai:
#map {
height: 400px; /* Sesuaikan tinggi */
width: 100%; /* Sesuaikan lebar */
}4. Menambahkan Script Eksternal Google Maps
Setelah itu, tambahkan script berikut di dalam dokumen HTML. Anda perlu mengganti <YOUR_API_KEY> dengan API Key yang Anda dapatkan:
<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap&libraries=&v=weekly" async></script>5. Menulis JavaScript untuk Menampilkan Peta
Buat fungsi initMap untuk menampilkan peta di dalam elemen div:
<script>
function initMap() {
const lokasi = { lat: -6.200000, lng: 106.816666 }; // Ganti dengan koordinat lokasi Anda
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: lokasi,
});
}
</script>6. Uji Peta di Browser
Terakhir, simpan file HTML dan buka di browser. Anda akan melihat peta yang menampilkan lokasi sesuai koordinat yang telah ditentukan.
Baca Juga: Memahami Apa Itu DOM JavaScript dan Fungsinya untuk Website
B. HTML
Sedangkan jika Anda hanya membutuhkan peta statis, Anda bisa menggunakan metode HTML dengan mengikuti langkah berikut ini.
1. Cari Lokasi di Google Maps
Pertama-tama, buka Google Maps dan cari lokasi yang ingin Anda tampilkan. Kemudian, klik tombol Share (Bagikan). Pilih Embed a map dan salin kode HTML yang tersedia.
2. Tempelkan Kode ke Dokumen HTML
Setelah itu, tempelkan kode iframe ke dalam file HTML Anda:
<iframe src="https://www.google.com/maps/embed?..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>3. Uji di Browser
Jika sudah, simpan file dan buka di browser untuk melihat peta. Untuk memastikan peta tampil responsif, tambahkan kode berikut pada HTML dan CSS:
HTML:
<div class="google-map">
<iframe src="https://www.google.com/maps/embed?..." style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>CSS:
.google-map {
padding-bottom: 50%;
position: relative;
}
.google-map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Baca Juga: Pilihan Aplikasi untuk Coding Terbaik yang Ramah Pemula
Buat Tampilan Website Anda Lebih Profesional dengan RackH!
Seperti yang telah dijelaskan dalam artikel ini, cara menambahkan Google Maps di website cukup mudah jika Anda tahu langkah-langkahnya. Namun, tidak semua orang memiliki waktu atau keahlian untuk melakukannya sendiri.
Di sinilah RackH hadir sebagai solusi. RackH tidak hanya memudahkan Anda untuk menambahkan fitur seperti Google Maps ke website, tetapi juga menawarkan layanan pengembangan website yang profesional sesuai dengan kebutuhan bisnis Anda.
Dengan dukungan tim ahli, RackH memastikan website Anda tidak hanya fungsional, tetapi juga menarik secara visual. Hubungi RackH sekarang untuk solusi web development terbaik dan wujudkan website impian Anda dengan mudah!