Loncat ke Konten Utama

Bagaimana cara menambahkan peta interaktif ke situs web WordPress Anda

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Jika Anda menggunakan layanan seperti Google Maps, Anda hanya perlu memilih lokasi dan menyematkan peta di situs web Anda. Namun, Anda tidak dapat mengedit peta dengan cepat, begitu pula rekan kerja Anda - yang seringkali diperlukan untuk proyek kolaboratif.

Di sinilah peta interaktif berperan. Mereka memungkinkan Anda menempatkan penanda yang dapat dipindahkan yang dapat diedit semua orang di tim Anda. 

Dalam tutorial ini, kita akan berbicara tentang kapan jenis kartu ini berguna. Selain itu, kami akan menunjukkan cara menambahkannya dengan dua cara ke WordPress.

Tetapi sebelum Anda mulai, luangkan waktu untuk melihatnya Cara menginstal tema WordPressBerapa banyak plugin saya harus menginstal pada WordPress.

Lalu, mmari kita mulai bekerja!

Apa itu peta interaktif (dan kapan menggunakannya?)

Menambahkan peta ke situs web cukup mudah. Alat seperti Google Maps memungkinkan Anda untuk menyematkan peta di halaman Anda dalam hitungan menit. Keuntungan dari pendekatan ini adalah pengunjung dapat bergerak di sekitar peta, memperbesar, memperkecil, dll.

Jenis peta ini lebih interaktif daripada sekadar gambar, tetapi tidak memungkinkan Anda membuat perubahan apa pun setelah menambahkannya ke situs web Anda.

Di sisi lain, peta interaktif memungkinkan Anda (dan dalam beberapa kasus, kolega Anda) untuk menambahkan penanda, ikon, teks baru, dan lainnya. Bayangkan, misalnya, Anda merencanakan pertemuan untuk anggota situs web Anda. Anda dapat mengonfigurasi peta dengan banyak pin untuk menyarankan lokasi.

Temukan dengan cara Plugin 5 WordPress untuk menambahkan geolokasi ke Blog Anda

Anda juga dapat menggunakan peta interaktif sehingga pengguna Anda dapat membagikan lokasi mereka atau menavigasi ke tempat-tempat yang ingin mereka kunjungi. Lebih tepatnya, ini adalah aplikasi khusus. Namun, peta interaktif  bisa  berguna dalam berbagai situasi. 

Selain itu, mereka tidak selalu lebih sulit untuk ditambahkan daripada rekan-rekan mereka.

Cara menambahkan peta interaktif ke situs WordPress Anda

Jika menyangkut peta interaktif, Anda dapat menyematkannya di situs web Anda atau menggunakan plugin untuk membantu Anda melakukannya. Pendekatan pertama lebih sederhana, tetapi plugin sering kali mengemas lebih banyak fitur, seperti yang Anda duga. Mari kita bahas pendekatan plugin untuk menunjukkan apa saja fitur-fitur ini.

1. Gunakan plugin Peta Marker Pro

Gunakan pembuat peta pro

Plugin Peta Marker Pro adalah solusi premium satu atap untuk menambahkan peta ke WordPress. Ini menawarkan lusinan fitur lanjutan, seperti yang memungkinkan Anda melihat peta dari berbagai departemen, dan menambahkan jumlah penanda yang hampir tidak terbatas ke peta Anda dan mengaturnya. Selain itu, pengunjung dapat memfilter jenis penanda yang ingin mereka lihat di peta Anda.

Hal menyenangkan lainnya yang dapat Anda lakukan menggunakan plugin ini adalah menambahkan informasi jarak dan rute antar penanda. Anda bahkan dapat membagikan lokasi Anda sendiri secara real time melalui peta situs web Anda, jika Anda ingin melakukannya. Menyiapkan plugin dapat memakan sedikit waktu, mengingat banyaknya fitur yang ditawarkannya. 

Namun, ternyata tidak sesulit yang Anda bayangkan. 

Untuk memulai, konfigurasikan dan aktifkan plugin seperti yang Anda lakukan pada plugin lainnya. Jika Anda baru mengenal WordPress, cari tahu Cara menginstal plugin di WordPress

Setelah plugin siap, Anda perlu menambahkan peta atau lapisan baru, yang dapat Anda lakukan dari tab Maps Marker Pro> Tambahkan layer baru. Di sini, tetapkan nama yang dapat Anda kenali untuk lapisan Anda dan masukkan lokasi yang Anda inginkan untuk ditampilkan, seperti yang Anda lakukan dengan alat pemetaan online lainnya:

Tambahkan layer baru

Sekarang Anda dapat menyesuaikan ukuran dan tingkat zoom yang ingin Anda tetapkan sebagai default, menggunakan menu kiri. Ada juga opsi yang disebut Pengelompokan marker , yang akan menampilkan ikon dengan jumlah penanda di suatu area jika Anda memperbesar terlalu jauh, seperti pada contoh di bawah ini:

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Perlihatkan penanda

opsi Cari Penanda, di sisi lain cukup eksplisit. Ini dapat bermanfaat jika Anda ingin memasukkan informasi tambahan tentang spidol Anda:

Daftar penanda

Sekarang gulir ke bawah dan temukan opsi « Tambahkan penanda baru di layer ini« . Pada layar berikutnya, Anda akan dapat menentukan nama dan lokasi untuk penanda Anda, menggunakan peta yang sama seperti yang sebelumnya.

Temukan juga Cara kompres dan mengubah ukuran gambar pada WordPress

Anda juga dapat memilih ikon dan mengatur teks pop-up untuk penanda Anda. Ini akan muncul ketika pengunjung mengeklik penanda itu sendiri, atau memilihnya dari daftar jika Anda memilih untuk memasukkannya.

Bagaimanapun, jangan lupa untuk menekan tombol menerbitkan setelah Anda selesai. Setelah menambahkan beberapa penanda, lapisan awal Anda akan terlihat seperti ini:

Contoh lapisan pada satu blok

Saat Anda siap untuk menambahkan peta interaktif baru Anda ke salah satu halaman Anda, Anda harus menggunakan Kode pendek. Gulir ke atas tab Edit layer  dan cari ID yang sesuai:

Simpan pengenal kartu

Sekarang, tempatkan shortcode [mapsmarker layer = "X"] di postingan atau halaman Anda. Jangan lupa untuk mengganti placeholder  dengan ID "lapisan" Anda sebelumnya.

Kartu Anda sekarang harus operasional di situs web Anda! Lebih penting lagi, Anda atau siapa pun di tim Anda dapat mengeditnya dan menambahkan penanda baru kapan saja, tanpa meninggalkan dasbor Anda.

2. Menggunakan fitur Built-In Embed dari Google Map

Google Maps tidak terlalu membutuhkan perkenalan - ini adalah layanan yang memungkinkan Anda mengekstrak peta dari seluruh dunia untuk berbagi tempat dengan orang lain, menemukan alamat, dan bahkan berbagi lokasi Anda. Untuk situs web, ada banyak cara untuk mengintegrasikan Google Maps ke dalam halaman Anda. Simpan peta dengan peta google

Namun, sebagian besar kartu menawarkan interaktivitas dalam jumlah terbatas. Mereka memungkinkan Anda untuk menavigasi melalui mereka, memperbesar, keluar dan mengubah pandangan Anda, tetapi tidak lebih.

Faktanya adalah bahwa Google Maps menawarkan lebih banyak fitur daripada pemetaan sederhana. Misalnya, Anda juga dapat menambahkan beberapa penanda, mengukur jarak, dan memasukkan arah di peta Anda. Untuk mencoba fitur ini, buka Google Maps saya dan klik tombol  + Buat Peta Baru  :

Buat peta di peta google

Pada layar berikutnya, tentukan judul untuk peta Anda dan lapisan pertamanya, yang akan kita buat. Sekarang temukan lokasi yang ingin Anda bagikan menggunakan bilah pencarian Google Map di bagian atas layar:

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Peta baru dan lokasi peta google

Saat memperbesar, Anda dapat menggunakan simbol penanda di bagian atas layar untuk mulai menyorot lokasi di peta Anda. Cukup klik di mana Anda ingin meletakkan penanda Anda, lalu tetapkan nama dan ikon untuk itu:

Tambahkan penanda ke peta baru Anda.

Setelah Anda memiliki banyak penanda, Anda dapat menggambar garis di antara mereka untuk menampilkan jarak:

Menampilkan jarak antara dua titik pada peta

Saat kartu Anda sudah siap, klik tombolnya Saham di menu sebelah kiri. Di sana, ubah pengaturan akses  de pribadi  à publik :

Tentukan akses kartu

Anda juga dapat mengundang anggota tim untuk menggunakan email mereka, sehingga mereka dapat segera mengakses peta:

Petakan kolaborasi dengan mitra

Bagaimanapun, Anda harus selalu menyematkan kartu baru Anda di situs web Anda. Anda dapat melakukan ini dengan mengklik ikon tiga titik di sebelah judul peta Anda dan mengklik opsinya Sematkan peta ini  :

Sematkan petaSekarang Anda dapat menyalin dan menempelkan kode semat di halaman Anda. Kartu baru Anda akan muncul di mana pun Anda meletakkannya. Selain itu, rekan Anda akan dapat mengeditnya dan menambahkan penanda baru melalui Google Maps jika perlu.

Temukan juga beberapa plugin WordPress premium  

Anda dapat menggunakan plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. Captcha Matematika Ultimate

Ultimate Math Captcha adalah plugin captcha WordPress premium yang 100% efisien. Ini memungkinkan penambahan captcha matematika pada login WordPress, registrasi, pemulihan kata sandi, komentar, WooCommerce, formulir Unduhan Digital Mudah, dan formulir bbPress.Plugin captcha wordpress matematika terbaik

Fitur-fiturnya antara lain: instalasi dan konfigurasi yang mudah, menambahkan captcha ke berbagai bentuk, mendukung beberapa captcha Matematika di halaman yang sama, kustomisasi pesan kesalahan, dan banyak lagi.

Download | DemoHébergement Web

2. Gateway Pembayaran Standar PayPal untuk Formulir Ninja

Gateway Standar PayPal untuk Formulir Ninja memungkinkan Anda membuat formulir yang terintegrasi secara mulus dengan gateway pembayaran PayPal. Anda akan dapat membuat formulir pesanan yang dipersonalisasi dan menerima pembayaran menggunakan akun Paypal standar.

Gateway pembayaran standar Paypal untuk formulir ninja

Fitur utamanya adalah: integrasi yang mudah dan cepat, integrasi IPN, kemampuan untuk mengaktifkan / menonaktifkan gateway PayPal pada formulir individu, dukungan untuk pembayaran reguler, dll.

Download | Demo |  Hébergement Web

3. Bentuk Gravitasi - Daftar & Edit

Dengan plugin WordPress premium ini, Anda dapat memodifikasi atau menghapus entri yang dikirimkan dalam bentuk situs web Anda. Fitur yang sangat kurang dalam plugin Gravity Forms, itulah sebabnya ekstensi ini dibuat.Gravity bentuk daftar edit plugin wordpress masukkan tabel grafik situs bentuk blog

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Di antara fitur-fiturnya kami akan menyebutkan antara lain: mmengedit dan menyimpan data yang direkam, filepenindasan data yang dimasukkan,modifikasi dan penghapusan artikel yang sudah diterbitkan, iIntegrasi sempurna dengan plugin jQuery Datatables dan Gravity-Bentuk, yangdukungan logika kondisional, simple dan cepat untuk menginstal, dan banyak lagi.

Download Demo | Hébergement Web

Sumber Daya yang Direkomendasikan

Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.

Kesimpulan

Sini! Itu saja untuk tutorial ini, saya harap ini memungkinkan Anda membuat peta interaktif di WordPress. Jangan sungkan berbagi dengan teman-teman Anda di jejaring sosial favorit Anda

Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.

Jika Anda memiliki saran atau komentar, tinggalkan di bagian kami komentar.

... 

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
8 saham
saham4
menciak2
Register2