22 May 2025
Menambahkan fitur Google Map ke website dapat memberikan berbagai manfaat untukmu, terutama bagi bisnis yang memiliki lokasi fisik. Selain memudahkan pengunjung menemukan lokasi kamu, integrasi ini juga dapat meningkatkan kredibilitas dan visibilitas online.
Artikel ini akan membahas cara menambahkan Google Map di website serta keuntungan yang bisa kamu peroleh dari langkah tersebut.
Apa Keuntungan Menyematkan Google Map di Website?
Menyematkan Google Map di website dapat memberikan beberapa keuntungan yang signifikan, di antaranya yaitu memudahkan pengunjung menemukan lokasi bisnis kamu. Kemudian, hal ini juga dapat meningkatkan kepercayaan dan kredibilitas bisnis di mata konsumen. Tak hanya itu, integrasi Google Map dapat membantu dalam upaya optimasi mesin pencari lokal atau Local SEO, yang sangat penting bagi bisnis yang ingin menjangkau audiens di area tertentu.
Meningkatkan Kredibilitas Bisnis Online
Menampilkan lokasi fisik bisnis kamu melalui Google Map dapat meningkatkan kepercayaan pengunjung terhadap bisnis kamu. Pengunjung cenderung lebih percaya pada bisnis yang transparan mengenai lokasi dan keberadaannya. Di samping itu, memunculkan ulasan dan rating yang ada di Google Map dapat memberikan bukti sosial yang memperkuat reputasi bisnis kamu.
Mempermudah Pengunjung Menemukan Lokasi Kamu
Integrasi Google Map memudahkan pengunjung untuk menemukan dan mengunjungi lokasi bisnis kamu. Pengguna dapat dengan mudah mendapatkan petunjuk arah, melihat jam operasional, dan informasi kontak langsung dari peta yang disematkan. Hal ini meningkatkan pengalaman pengguna dan mendorong kunjungan langsung ke lokasi kamu.
Optimasi Local SEO dengan Google Map
Menyertakan Google Map di website kamu dapat membantu dalam optimasi Local SEO. Google cenderung memberikan peringkat lebih tinggi pada bisnis yang memiliki informasi lokasi yang jelas dan akurat. Dengan menambahkan peta dan informasi lokasi, kamu meningkatkan peluang muncul di hasil pencarian lokal, sehingga menarik lebih banyak pengunjung dari area sekitar.
Baca juga artikel lain: Website Kamu Lambat? 6 Hal Ini Bisa Jadi Obat!
Cara Menambahkan Google Map ke Website
Menyematkan Google Map ke dalam website kamu dapat memberikan berbagai manfaat, seperti memudahkan pengunjung menemukan lokasi bisnis kamu, meningkatkan kredibilitas, dan membantu dalam optimasi SEO lokal. Integrasi ini juga memungkinkan pengunjung untuk mendapatkan petunjuk arah langsung ke lokasi kamu tanpa meninggalkan situs.
Berikut ini adalah langkah-langkah yang dapat kamu ikuti untuk menambahkan Google Map ke website kamu:
Menentukan Lokasi di Google Maps
Langkah pertama dalam menambahkan Google Map ke website adalah menentukan lokasi yang ingin kamu tampilkan. Pastikan lokasi bisnis kamu sudah terdaftar di Google Maps agar pengunjung dapat menemukannya dengan mudah.
Cara Mencari dan Memilih Lokasi yang Tepat di Google Maps
1. Akses Google Maps: Buka Google Maps di browser kamu.
2. Cari Lokasi: Gunakan kotak pencarian untuk memasukkan alamat atau nama bisnis kamu. Pastikan untuk memeriksa kembali detail yang muncul agar sesuai dengan lokasi fisik kamu.
3. Verifikasi Lokasi: Jika lokasi bisnis kamu belum terdaftar, kamu dapat menambahkannya melalui opsi "Tambahkan tempat yang belum ada" di Google Maps. Proses ini memerlukan verifikasi dari Google sebelum lokasi tersebut muncul secara publik.
Mendapatkan Kode Embed dari Google Maps
Jika kamu sudah menentukan dan memastikan lokasi yang tepat, langkah berikutnya adalah mendapatkan kode embed yang akan disematkan ke dalam website kamu.
Langkah-langkah Mendapatkan Kode Embed Google Maps
1. Buka Lokasi di Google Maps: Pastikan kamu sudah berada di halaman lokasi bisnis kamu di Google Maps.
2. Klik Tombol "Bagikan": Tombol ini biasanya terletak di panel sebelah kiri, tepat di bawah nama tempat.
3. Pilih Tab "Sematkan Peta": Setelah mengklik "Bagikan", akan muncul jendela pop-up dengan dua tab; pilih tab "Sematkan Peta".
4. Salin Kode HTML: Di bawah pratinjau peta, akan terdapat kode HTML. Klik "Salin HTML" untuk menyalin kode tersebut ke clipboard kamu.
Apabila sudah mendapatkan kode embed tersebut, kamu dapat menempelkannya ke dalam kode HTML website kamu di lokasi yang diinginkan. Pastikan untuk menyesuaikan ukuran dan tampilan peta agar sesuai dengan desain keseluruhan website kamu.
Menambahkan Kode Embed ke Halaman Website
Setelah mendapatkan kode embed dari Google Maps, langkah selanjutnya adalah menyisipkannya ke dalam halaman website kamu. Proses ini melibatkan penempatan kode tersebut ke dalam file HTML dan menyesuaikan tampilannya agar sesuai dengan desain situs kamu. Berikut ini panduan lengkap untuk melakukannya:
Cara Menyisipkan Kode Embed di HTML
1. Buka File HTML Website Kamu: Gunakan editor teks atau IDE pilihan kamu untuk membuka file HTML di mana kamu ingin menampilkan peta.
2. Tempelkan Kode Embed: Letakkan kode <iframe> yang telah kamu salin dari Google Maps ke dalam bagian <body> di file HTML kamu. Pastikan penempatannya sesuai dengan struktur dan tata letak halaman yang diinginkan.
3. Simpan Perubahan: Setelah menempelkan kode, simpan file tersebut dan unggah kembali ke server hosting kamu jika diperlukan.
Sebagai contoh, berikut adalah struktur dasar penempatan kode embed:
<!DOCTYPE html>
<html>
<head>
<title>Lokasi Kami</title>
</head>
<body>
<h1>Temukan Kami di Sini</h1>
<!-- Kode Embed Google Maps -->
<iframe src="URL_EMBED_GOOGLE_MAPS" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</body>
</html>
Gantilah URL_EMBED_GOOGLE_MAPS dengan URL yang telah kamu dapatkan sebelumnya.
Menyesuaikan Posisi dan Ukuran Peta di Halaman Web
Agar peta yang disematkan terlihat proporsional dan sesuai dengan desain website kamu, penting untuk menyesuaikan posisi dan ukurannya. Berikut beberapa langkah yang dapat kamu ikuti:
Menyesuaikan Ukuran Peta:
1. Mengubah Lebar dan Tinggi: Pada tag <iframe>, kamu dapat mengatur atribut width dan height sesuai kebutuhan. Misalnya, untuk membuat peta lebih responsif, kamu bisa mengatur lebar menjadi 100% dan tinggi sesuai proporsi yang diinginkan.
2. Contoh:
<iframe src="URL_EMBED_GOOGLE_MAPS" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
Menempatkan Peta di Pusat Halaman:
1. Menggunakan CSS: Bungkus <iframe> dengan elemen <div> dan gunakan CSS untuk mengatur posisi.
2. Contoh:
<style>
.map-container {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
}
</style>
<div class="map-container">
<iframe src="URL_EMBED_GOOGLE_MAPS" width="80%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
Kode di atas akan menempatkan peta di tengah halaman dengan lebar 80% dari kontainer induknya dan margin vertikal sebesar 20 piksel.
Menyesuaikan untuk Tampilan Responsif:
1. Menggunakan Persentase: Mengatur lebar <iframe> dalam persentase membantu peta menyesuaikan diri dengan berbagai ukuran layar.
2. Menggunakan CSS Media Queries: Untuk kontrol lebih lanjut, kamu bisa menggunakan media queries agar peta tampil optimal di berbagai perangkat.
Contoh:
<style>
.map-container {
position: relative;
padding-bottom: 56.25%; /* Rasio aspek 16:9 */
height: 0;
overflow: hidden;
}
.map-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="map-container">
<iframe src="URL_EMBED_GOOGLE_MAPS" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
Pendekatan ini memastikan peta mempertahankan rasio aspek 16:9 dan menyesuaikan ukurannya sesuai dengan lebar kontainer, membuatnya responsif terhadap berbagai ukuran layar.
Dengan mengikuti langkah-langkah di atas, kamu dapat menyematkan Google Map ke dalam website kamu dengan tampilan yang menarik dan fungsional, serta memastikan peta tersebut responsif dan sesuai dengan desain keseluruhan situs.
Kamu mungkin tertarik baca: Mau Meningkatkan Estetika Situs? Begini Cara Menambahkan Jam pada Website
Menambahkan Google Map di WordPress Menggunakan Plugin
Menyematkan Google Map ke dalam situs WordPress kamu dapat meningkatkan kredibilitas bisnis dan memudahkan pengunjung menemukan lokasi kamu. Salah satu cara termudah untuk melakukan ini adalah dengan menggunakan plugin khusus yang dirancang untuk integrasi peta.
Plugin seperti WP Google Maps menawarkan kemudahan dalam menambahkan peta interaktif tanpa memerlukan pengetahuan coding yang mendalam. Berikut ini panduan lengkap untuk menginstal dan menggunakan plugin tersebut.
Plugin WP Google Maps: Instalasi dan Penggunaan
WP Google Maps adalah salah satu plugin populer yang memungkinkan kamu menambahkan peta kustom ke situs WordPress dengan mudah. Plugin ini menawarkan berbagai fitur, termasuk penambahan marker, penyesuaian tampilan peta, dan integrasi yang mulus dengan berbagai tema WordPress.
Dengan interface yang user-friendly, kamu dapat membuat dan menyematkan peta hanya dalam beberapa langkah sederhana.
Cara Menginstal WP Google Maps di WordPress
1. Masuk ke Dashboard WordPress: Akses area admin situs WordPress kamu dengan memasukkan kredensial login.
2. Navigasi ke Menu Plugin: Di panel sebelah kiri, arahkan kursor ke "Plugins" dan klik "Add New".
3. Cari Plugin WP Google Maps: Pada kotak pencarian di pojok kanan atas, ketik "WP Google Maps". Plugin yang dimaksud akan muncul dalam hasil pencarian.
4. Instal Plugin: Klik tombol "Install Now" pada plugin WP Google Maps. Tunggu beberapa saat hingga proses instalasi selesai.
5. Aktifkan Plugin: Setelah instalasi selesai, tombol "Install Now" akan berubah menjadi "Activate". Klik tombol tersebut untuk mengaktifkan plugin.
Apabila plugin telah aktif, menu baru bernama "Maps" akan muncul di dashboard WordPress kamu. Dari sini, kamu dapat mulai membuat dan mengkustomisasi peta sesuai kebutuhan.
Menggunakan Plugin untuk Menyematkan Peta di Halaman Website
1. Membuat Peta Baru:
a) Klik menu "Maps" di dashboard, lalu pilih "Add New Map".
b) Berikan nama untuk peta kamu dan sesuaikan pengaturan seperti lebar, tinggi, dan level zoom sesuai preferensi.
c) Klik "Save Map" untuk menyimpan pengaturan.
2. Menambahkan Marker ke Peta:
a) Setelah menyimpan peta, gulir ke bawah ke bagian "Markers".
b) Masukkan alamat atau koordinat lokasi yang ingin kamu tandai.
c) Klik "Add Marker" untuk menambahkan penanda ke peta.
3. Menyematkan Peta ke Halaman atau Postingan:
a) Setelah peta selesai dikonfigurasi, kamu akan melihat shortcode di sebelah kanan layar.
b) Salin shortcode tersebut.
c) Buka halaman atau postingan di mana kamu ingin menampilkan peta.
d) Tempelkan shortcode ke dalam konten pada posisi yang diinginkan.
e) Simpan atau perbarui halaman/postingan tersebut.
Dengan langkah-langkah di atas, peta interaktif dari Google Maps akan tampil di situs WordPress kamu, memudahkan pengunjung untuk menemukan lokasi bisnis atau tempat penting lainnya yang ingin kamu bagikan.
Plugin MapPress Easy Google Maps: Alternatif Lain
Selain WP Google Maps, MapPress Easy Google Maps merupakan plugin populer yang memudahkan kamu menambahkan peta interaktif ke situs WordPress tanpa memerlukan pengetahuan teknis mendalam. Plugin ini mendukung integrasi dengan editor Gutenberg maupun editor klasik, sehingga fleksibel untuk berbagai kebutuhan.
Keunggulan dan Cara Menggunakan MapPress
Keunggulan MapPress Easy Google Maps
1. Kemudahan Penggunaan: Interface yang sederhana memungkinkan pembuatan dan penyisipan peta langsung dari editor posting atau halaman tanpa perlu meninggalkan halaman tersebut.
2. Dukungan Multi-Peta: Kamu dapat membuat dan menampilkan peta dalam jumlah tak terbatas pada situs kamu.
3. Marker Kustom: Tambahkan penanda lokasi dengan deskripsi, gambar, atau tautan untuk memberikan informasi lebih kepada pengunjung.
4. Responsif: Peta yang dibuat akan menyesuaikan tampilan di berbagai perangkat, memastikan pengalaman pengguna yang optimal.
Cara Menggunakan MapPress Easy Google Maps
1. Instalasi Plugin:
a) Masuk ke dashboard WordPress kamu.
b) Navigasi ke "Plugins" > "Add New".
c) Cari "MapPress Easy Google Maps".
d) Klik "Install Now" lalu "Activate".
2. Membuat Peta Baru:
a) Buka editor posting atau halaman tempat kamu ingin menambahkan peta.
b) Di editor Gutenberg, tambahkan blok "MapPress Map". Untuk editor klasik, gunakan tombol "Insert Map" yang tersedia.
c) Masukkan alamat atau koordinat lokasi yang ingin ditampilkan.
d) Sesuaikan pengaturan peta seperti zoom, tipe peta, dan ukuran sesuai kebutuhan.
e) Simpan peta dan publikasikan posting atau halaman kamu.
Melalui langkah-langkah di atas, kamu dapat dengan mudah menambahkan peta interaktif ke situs WordPress menggunakan MapPress Easy Google Maps, memberikan nilai tambah bagi pengunjung dalam menemukan lokasi atau informasi geografis yang relevan.
Artikel menarik lainnya yang bisa kamu baca: Jangkau Audiens Lebih Luas Melalui Cara Menambahkan Media Sosial di Website
Menyesuaikan Tampilan Google Map di Website
Menyematkan Google Map ke dalam website kamu tidak hanya memudahkan pengunjung menemukan lokasi bisnis, tetapi juga meningkatkan kredibilitas dan kepercayaan. Namun, agar peta tersebut selaras dengan desain dan tata letak situs, penting untuk menyesuaikan tampilannya.
Penyesuaian ini mencakup pengaturan ukuran, dimensi, serta responsivitas peta agar optimal di berbagai perangkat.
Mengatur Ukuran dan Dimensi Peta
Menyesuaikan ukuran dan dimensi Google Map memastikan peta tersebut tampil proporsional dan harmonis dengan elemen lain di halaman web. Pengaturan ini melibatkan penentuan lebar, tinggi, serta aspek rasio peta sesuai kebutuhan desain.
Cara Mengatur Lebar dan Tinggi Google Map
Menggunakan Kode Embed Langsung dari Google Maps:
1. Dapatkan Kode Embed: Buka Google Maps, cari lokasi yang ingin kamu tampilkan, klik tombol "Bagikan", lalu pilih "Sematkan peta". Salin kode <iframe> yang diberikan.
2. Tempelkan Kode ke Halaman Web: Letakkan kode <iframe> tersebut di tempat yang diinginkan dalam file HTML kamu.
3. Sesuaikan Ukuran: Pada atribut width dan height dalam tag <iframe>, atur sesuai kebutuhan. Misalnya:
<iframe src="URL_EMBED_GOOGLE_MAPS" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
Mengatur width menjadi 100% memastikan peta menyesuaikan lebar kontainer induknya, sementara height dapat disesuaikan sesuai preferensi.
Menggunakan CSS untuk Responsivitas:
1. Bungkus dengan Elemen Kontainer: Letakkan <iframe> dalam sebuah <div> dengan kelas khusus, misalnya map-container.
2. Tambahkan CSS: Gunakan CSS untuk mengatur lebar dan tinggi agar peta responsif. Contoh:
<style>
.map-container {
position: relative;
padding-bottom: 56.25%; /* Rasio aspek 16:9 */
height: 0;
overflow: hidden;
}
.map-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="map-container">
<iframe src="URL_EMBED_GOOGLE_MAPS" allowfullscreen="" loading="lazy"></iframe>
</div>
Pendekatan ini menjaga rasio aspek peta dan memastikan tampilannya optimal di berbagai ukuran layar.
Menggunakan Plugin pada Platform WordPress:
1. Instal Plugin Terkait: Jika menggunakan WordPress, plugin seperti "WP Google Maps" atau "MapPress Easy Google Maps" memudahkan penambahan dan penyesuaian peta tanpa menyentuh kode langsung.
2. Sesuaikan Melalui Pengaturan Plugin: Setelah menginstal plugin, biasanya terdapat opsi untuk mengatur lebar, tinggi, dan fitur lain dari peta melalui interface yang disediakan plugin tersebut.
Dengan menyesuaikan lebar dan tinggi Google Map sesuai panduan di atas, peta yang disematkan akan tampil proporsional dan responsif, meningkatkan pengalaman pengguna saat mengunjungi situs kamu.
Menambahkan Penanda (Marker) Kustom pada Peta
Menambahkan penanda kustom pada Google Maps memungkinkan kamu untuk menyoroti lokasi tertentu dengan ikon dan warna yang sesuai dengan kebutuhan atau branding situs kamu.
Penyesuaian ini tidak hanya memperindah tampilan peta, tetapi juga memudahkan pengguna dalam mengenali titik-titik penting yang kamu tampilkan.
Cara Membuat Marker Kustom di Google Maps
Untuk membuat penanda kustom pada Google Maps, kamu dapat memanfaatkan Google Maps JavaScript API. Berikut adalah langkah-langkahnya:
1. Mendapatkan API Key:
a) Kunjungi Google Cloud Console.
b) Buat atau pilih proyek yang ingin kamu gunakan.
c) Aktifkan Maps JavaScript API.
d) Buat kredensial API Key dan simpan untuk digunakan nanti.
2. Menyiapkan Peta Dasar:
a) Buat file HTML dan sertakan skrip Google Maps JavaScript API dengan API Key yang telah didapatkan.
b) Tentukan elemen <div> sebagai wadah peta dan atur ukurannya.
c) Inisialisasi peta dengan menentukan pusat koordinat dan level zoom.
3. Menambahkan Marker Kustom:
a) Siapkan URL ikon kustom yang ingin digunakan.
b) Gunakan objek google.maps.Marker untuk menambahkan penanda pada peta dengan properti icon yang mengarah ke URL ikon kustom tersebut.
Contoh kode:
<!DOCTYPE html>
<html>
<head>
<title>Peta dengan Marker Kustom</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
function initMap() {
var lokasi = {lat: -6.200000, lng: 106.816666}; // Koordinat Jakarta
var peta = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: lokasi
});
var marker = new google.maps.Marker({
position: lokasi,
map: peta,
icon: 'URL_ICON_KUSTOM' // Ganti dengan URL ikon kustom kamu
});
}
</script>
</head>
<body onload="initMap()">
<div id="map" style="width:100%;height:500px;"></div>
</body>
</html>
Pastikan untuk mengganti YOUR_API_KEY dengan API Key yang telah kamu peroleh dan URL_ICON_KUSTOM dengan URL ikon kustom yang ingin kamu gunakan.
Menyesuaikan Warna dan Ikon Penanda
Selain mengganti ikon penanda, kamu juga dapat menyesuaikan warna dan tampilannya. Berikut beberapa cara yang dapat kamu lakukan:
1. Menggunakan Ikon Berformat SVG:
a) SVG memungkinkan penyesuaian warna secara fleksibel.
b) Kamu dapat membuat file SVG sendiri atau mengunduh dari sumber terpercaya, lalu mengarahkannya pada properti icon saat membuat marker.
2. Mengubah Warna Penanda Bawaan:
a) Jika kamu ingin menggunakan penanda bawaan dengan warna berbeda, beberapa layanan pihak ketiga menyediakan URL ikon penanda dengan variasi warna.
b) Misalnya, kamu dapat menggunakan URL seperti http://maps.google.com/mapfiles/ms/icons/blue-dot.png untuk penanda berwarna biru.
3. Menambahkan Label pada Penanda:
a) Kamu dapat menambahkan label teks pada penanda menggunakan properti label.
Contoh:
var marker = new google.maps.Marker({
position: lokasi,
map: peta,
label: 'A' // Label dengan huruf 'A'
});
Label ini akan muncul sebagai teks di atas penanda dan dapat disesuaikan gayanya melalui CSS.
Dengan menyesuaikan ikon dan warna penanda, peta pada website kamu akan menjadi lebih informatif dan menarik bagi pengunjung.
Kesimpulan
Menampilkan Google Map di website bisa jadi keuntungan besar. Selain membuat bisnis kamu terlihat lebih kredibel, pengunjung juga lebih mudah menemukan lokasimu. Plus, ini bisa bantu optimasi Local SEO biar makin banyak orang yang datang.
Ada beberapa cara buat menyematkan Google Map di website, mulai dari pakai kode embed langsung sampai memanfaatkan plugin seperti WP Google Maps atau MapPress Easy Google Maps di WordPress.
Menariknya, tampilan peta juga bisa kamu ubah sesuai kebutuhan. Kamu bisa atur ukuran, posisi, atau bahkan tambahkan custom marker supaya lebih menarik dan sesuai dengan brand kamu.
Biar makin maksimal, kamu juga bisa pakai kode CSS biar Google Map jadi lebih responsif atau tambahin ikon khusus yang bikin tampilannya lebih estetik. Dengan langkah-langkah yang tepat, integrasi Google Map di website nggak cuma berguna, tetapi juga enak dilihat dan sesuai dengan desain situsmu.
Menggunakan Google Map dengan optimal bisa bikin pengunjung lebih nyaman dan meningkatkan kepercayaan terhadap bisnis yang kamu jalankan.
Punya bisnis tapi pelanggan masih kesulitan menemukan lokasimu? Dengan Google Map yang terintegrasi di website, pengunjung bisa langsung tahu di mana lokasi usahamu tanpa perlu repot mencarinya. Biar makin optimal, pastikan website kamu dibuat profesional, responsif, dan mudah diakses di berbagai perangkat!
Digital marketing agency seperti DCLIQ siap membantumu dengan jasa pembuatan website profesional yang tidak hanya fungsional, tetapi juga didesain untuk meningkatkan visibilitas bisnis. Mulai dari integrasi Google Map, optimasi Local SEO, hingga tampilan yang menarik dan user-friendly, semua bisa disesuaikan dengan kebutuhanmu.
Yuk, buat website yang mempermudah pelanggan menemukanmu!
