Cara membuat peta google dengan beberapa pin di wordpress

Diterbitkan: 2025-07-23

Menambahkan 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

Why Use Google Maps with Multiple Pins on Your WordPress Site

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.

Boost Local SEO with Location Data

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.

Use the Advanced Google Map widget to create multiple pins

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.

Get credential for the Advanced Google Map

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

Get Google Map API Key

Anda akan datang ke halaman Google Cloud.

Google Cloud Page

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

Find Maps JavaScript API

Setelah datang ke halaman API peta JavaScript, aktifkan opsi .

Enable Maps JavaScript API

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

Configure JavaScript Account

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.

Complete the billing information

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.

Fill in your industry-related information

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

Copy the Google Map API key

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

Paste the Google Map API key to HappyAddons

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

Google map appears on the Elementor Canvas

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.

Expand the Map Marker section on the panel

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

Add more pins to the Google Map

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

Add latitude and longitude to pins on Google Map

Langkah 04: Mengkonfigurasi Pengaturan Peta

Dengan cara yang sama, perluas bagian Pengaturan Peta .

Configure Map Settings

Anda akan menemukan banyak opsi di bawah bagian ini.

Mag Settings options of the Advanced Google Map widget

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.

Stylize the Advanced Google Map Widget

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

Stylize the other options of the Advanced Google Map widget

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.

Advanced Tips for Google Map with Multiple Pins

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.