Cara membuat peta google dengan beberapa pin di wordpress
Diterbitkan: 2025-07-23Menambahkan peta ke situs web Anda dapat membantu pengunjung Anda menemukan bisnis atau lokasi acara Anda dengan mudah. Jika bisnis Anda memiliki lebih dari satu lokasi, Anda mungkin ingin menunjukkan semuanya di peta yang sama. Di sinilah menggunakan beberapa pin di peta Google bisa menjadi membantu.
Jika situs web Anda dibangun dengan Elementor, Anda tidak perlu terlalu merepotkan dalam menambahkan beberapa pin di peta google Anda. Sebaliknya, Anda dapat dengan mudah menambahkan sebanyak yang Anda inginkan. Prosesnya cukup sederhana, bahkan untuk pemula.
Dalam posting ini, kami akan membahas tutorial terperinci tentang cara membuat peta Google dengan beberapa pin di WordPress dengan Elementor. Tetapi sebelum itu, kami akan membahas beberapa kata tentang mengapa dan kapan Anda harus menggunakan Google Maps dengan beberapa pin di situs web WordPress Anda.
Mengapa menggunakan Google Maps dengan beberapa pin di situs WordPress Anda

Menggunakan Google Maps dengan beberapa pin dapat meningkatkan situs web Anda dalam banyak hal. Ini bukan hanya tentang menunjukkan lokasi. Ini dapat membantu pengguna membangun kepercayaan dan membuat situs Anda lebih berguna karena mereka dapat dengan mudah menemukan toko Anda. Berikut adalah beberapa alasan utama mengapa Anda harus mempertimbangkannya.
1. Tunjukkan semua lokasi Anda di satu tempat
Jika bisnis Anda memiliki beberapa cabang, toko, atau kantor, beberapa pin dapat membantu Anda menampilkan semuanya di satu peta. Ini memudahkan pengunjung untuk melihat setiap lokasi dengan pandangan tanpa beralih di antara peta atau halaman yang berbeda.
2. Bantu pengguna menemukan tempat terdekat
Ketika pengguna melihat semua lokasi di satu peta, mereka dapat dengan cepat menemukan yang paling dekat dengan mereka. Ini dapat meningkatkan pengalaman mereka dan membantu mereka mengambil tindakan lebih cepat, seperti mengunjungi toko Anda atau memesan janji temu.
3. Hemat waktu untuk pengunjung
Alih -alih mendaftarkan masing -masing alamat satu per satu dalam teks biasa, Anda dapat menunjukkannya secara visual dengan pin. Ini menghemat waktu untuk Anda dan pengunjung Anda. Ini juga membuat situs Anda terlihat lebih profesional dan modern.
4. Meningkatkan SEO lokal dengan data lokasi
Google Maps dapat membantu dengan SEO lokal situs web Anda. Saat Anda menambahkan alamat nyata ke peta Anda, ini memberi tahu mesin pencari tentang lokasi bisnis Anda. Ini dapat membantu situs Anda muncul dalam hasil pencarian lokal. Jelajahi cara meningkatkan SEO lokal dengan HappyAddons.

5. Jadikan situs Anda lebih interaktif
Peta dengan beberapa pin terlihat lebih interaktif dan dinamis daripada sekadar teks biasa. Pengunjung dapat memperbesar, mengklik pin, dan menjelajahi peta. Ini membuat situs Anda lebih menarik dan ramah pengguna.
6. Sempurna untuk bisnis berbasis layanan atau multi-cabang
Jika Anda menjalankan rantai restoran, klinik, toko, atau titik pengiriman, beberapa pin membantu menjelaskan jangkauan Anda dengan jelas. Seperti yang telah dikatakan di atas, ini membangun kepercayaan dan membantu pengguna memilih tempat terdekat.
Prasyarat untuk membuat peta google dengan beberapa pin dengan Elementor
Mari kita jelaskan satu hal di awal. Elementor memang memiliki widget built-in yang disebut Google Map . Tetapi fitur -fiturnya sangat terbatas. Anda tidak dapat menambahkan beberapa pin ke peta menggunakan widget default ini. Jadi, untuk melakukan itu, Anda akan memerlukan tambahan tambahan.
Salah satu pilihan bagus adalah HappyAddons . Ini menawarkan widget yang disebut Google Maps Advanced , yang memungkinkan Anda untuk dengan mudah membuat dan menambahkan beberapa pin ke peta Anda tanpa kerumitan.
Jadi, secara total, Anda memerlukan alat berikut di situs Anda untuk tutorial ini.
- Elementor
- Happyaddons
- HappyAddons Pro
Diperlukan HappyAddons Pro karena Google Map yang canggih adalah widget premium plugin. Setelah diinstal dan diaktifkan di situs Anda, mulailah mengikuti tutorial seperti yang disebutkan di bawah ini. Jelajahi semua widget lain dari HappyAddons.
Cara membuat peta google dengan beberapa pin di wordpress: tutorial langkah demi langkah
Di bagian ini, kami akan menjelaskan langkah demi langkah cara membuat peta google dengan beberapa pin di WordPress dengan plugin Elementor dan HappyAddons. Kami akan mendekorasi bagian ini dengan tangkapan layar yang diperlukan juga, sehingga Anda dapat memahami proses penuh. Teruslah membaca!
Langkah 01: Buka halaman dan temukan Widget Peta Google Lanjutan
Buka posting atau halaman tempat Anda ingin membuat peta Google dengan beberapa pin. Temukan Widget Google Map Advance di panel Elementor. Seret dan jatuhkan di kanvas Elementor.

Langkah 02: Dapatkan Kunci API Google
Setelah widget ditambahkan ke kanvas, Anda akan diminta untuk mengkonfigurasi kredensial untuk menampilkan peta Google. Untuk memulai ini, klik opsi kredensial di bawah bagian Pengaturan Umum pada panel.

Anda akan dibawa ke bagian Kredensial HappyAddons di backend situs web. Temukan opsi Google Map . Kemudian, tekan opsi kunci GET API .

Anda akan datang ke halaman Google Cloud.

Sekarang, Anda harus menemukan 'Peta JavaScript API'. Untuk ini, ketik peta JavaScript API di kotak pencarian. Setelah opsi muncul, klik .

Setelah datang ke halaman API peta JavaScript, aktifkan opsi .

Tekan tombol Setuju & Lanjutkan . Sebelum itu, Anda dapat memilih negara Anda. Kami telah mengaburkannya untuk kasus kami.

Kunci Google API secara teknis tidak gratis. Anda harus menyelesaikan informasi penagihan Anda untuk mendapatkan API.
Catatan (bagaimana gratis): Meskipun secara teknis tidak gratis, Anda akan menerima token yang setara dengan $ 200 per bulan, tidak ada biaya . Dengan token ini, Google Map Anda dapat dimuat atau dilihat hingga 28.000 kali . Hanya jika batas tampilan/beban ini dilintasi kartu Anda akan dibebankan.

Setelah itu, Anda akan diberi sembulan. Anda harus memberikan beberapa informasi tentang bisnis Anda di mana peta ini akan digunakan. Setelah selesai, klik tombol Kirim di sudut kanan bawah popup.


Kunci API Google Map akan langsung muncul di layar Anda dengan popup baru. Salin kunci API .

Kembali ke opsi kunci HappyAddons Google API dan tempel kode Anda di sana. Tekan tombol Simpan Perubahan di akhir.

Sekarang, datanglah ke Canvas Elementor Anda dan menyegarkan/memuat ulang. Peta Google akan muncul di kanvas.

Periksa cara membuat garis waktu di WordPress dengan Elementor.
Langkah 03: Tambahkan beberapa pin ke peta
Secara default, hanya satu pin yang ditampilkan di peta. Untuk menambah dan menampilkan lebih banyak pin ke peta, perluas bagian penanda peta pada panel.

Setelah bagian penanda peta diperluas, Anda dapat menambahkan pin sebanyak yang Anda inginkan dengan mengklik tombol + Tambah Item .

Sekarang, dengan menempatkan nilai untuk garis lintang dan bujur, Anda dapat secara tepat mengatur pin secara akurat untuk setiap tempat.

Langkah 04: Mengkonfigurasi Pengaturan Peta
Dengan cara yang sama, perluas bagian Pengaturan Peta .

Anda akan menemukan banyak opsi di bawah bagian ini.

Sekarang, Anda dengan ramah mengeksplorasi setiap opsi dengan beralih dan mati untuk melihat bagaimana mereka bekerja sehingga Anda akhirnya bisa tetap dengan yang sesuai dengan kebutuhan desain.
Pelajari cara membuat galeri gambar gulir otomatis di WordPress.
Langkah 05: Stylize The Advanced Google Map Widget
Ketika semua pengaturan dan bagian konten selesai, datanglah ke tab Gaya . Dari sini, Anda dapat menyesuaikan tinggi, lebar, jenis perbatasan, jari -jari perbatasan, dan lebih banyak opsi.

Dengan cara yang sama, perluas opsi lain juga dan lakukan kustomisasi yang diperlukan karena Anda ingin mengubah penampilan pin.

Langkah 06: Pratinjau desain
Ketika desain selesai, sebelum menerbitkannya secara online, pratinjau untuk melihat apakah diperlukan koreksi atau modifikasi. Anda dapat melihat bahwa widget berfungsi dengan baik di ujung kami di klip video yang terpasang di bawah ini.
Dengan demikian, Anda dapat membuat peta Google dengan beberapa pin di WordPress dengan Elementor.
Tip Lanjutan untuk Google Map dengan beberapa pin
Setelah Anda menambahkan beberapa pin ke Google Map Anda, ada lebih banyak hal yang dapat Anda lakukan untuk membuat peta berfungsi lebih baik untuk pengunjung dan situs web Anda. Kiat -kiat canggih ini akan membantu Anda membuat peta Anda terlihat lebih profesional, meningkatkan pengalaman pengguna, dan bahkan mendukung upaya SEO lokal Anda.

1. Gunakan gambar khusus, bukan ikon
Alih -alih pin merah default, coba gunakan ikon atau gambar khusus untuk setiap lokasi. HappyAddons memungkinkan Anda melakukan ini dari tab Konten> Bagian Marker Peta. Gambar dan ikon khusus dapat membuat peta Anda lebih jelas dan menarik secara visual.
2. Pengaturan Zoom dan Pusat
Sesuaikan level zoom dan pusat peta Anda untuk menampilkan semua pin dengan benar. Jika beberapa pin berjauhan, pastikan level zoom cukup lebar sehingga semuanya terlihat saat peta dimuat. Ini memberi pengguna gambaran penuh tanpa perlu memindahkan peta secara manual.
3. Jadikan Mobile-Friendly
Selalu periksa bagaimana peta Anda terlihat di perangkat seluler. Pastikan memuat dengan cepat, pin dapat diklik, dan kotak info dapat dibaca di layar kecil. Peta yang bekerja dengan baik di desktop dan seluler akan membuat lebih banyak pengguna senang.
4. Embed Maps di halaman kontak atau lokasi
Jangan tinggalkan peta Anda di satu halaman. Anda dapat menggunakan kembali peta yang sama dengan menanamkannya di halaman lain seperti 'Hubungi Kami', 'Lokasi Kami', atau Halaman 'Kunjungi Kami'. Ini membantu pengguna menemukan tempat yang tepat di mana pun mereka berada di situs Anda.
Pelajari cara membuat halaman web dinamis di WordPress dengan Elementor.
Kesimpulan
Membuat peta Google dengan beberapa pin mungkin merupakan langkah atau bagian sederhana dalam desain web Anda, tetapi dapat memiliki kesan jangka panjang. Tidak hanya dapat membantu pengunjung menemukan lokasi Anda tetapi juga meningkatkan skor SEO lokal dan membuat situs web Anda terlihat lebih profesional.
Dengan bantuan plugin Elementor dan HappyAddons, Anda dapat menambahkannya dengan mudah ke situs web Anda tanpa banyak kesulitan. Sangat sederhana sehingga bahkan pemula dapat melakukan ini hanya dengan mengikuti tutorial yang dibahas di atas. Jika Anda masih memiliki pertanyaan yang belum terjawab, beri tahu kami melalui kotak komentar di bawah ini.
Kami akan segera menghubungi Anda dengan balasan yang layak. Terima kasih telah bersama kami sampai akhir. Beri tahu kami topik mana yang Anda ingin kami bahas di posting berikutnya.