Jika Anda seperti saya, Anda pernah menggunakan Google Maps untuk menambahkan peta ke situs WordPress Anda selama bertahun-tahun, tetapi terkadang Anda merasa sedikit frustrasi karena tidak adanya opsi penyesuaian
Dalam tutorial ini, saya akan menunjukkan cara menggunakan alternatif — plugin WordPress bernama MapSVG yang memungkinkan Anda menambahkan peta interaktif ke situs Anda. Anda kemudian dapat menyesuaikan peta Anda dengan warna, placeholder, dan popovers, dan biarkan pengguna Anda mencari mereka.
Saya akan memandu Anda tentang cara mengatur peta menggunakan plugin,Bagaiman cara menyesuaikannya, dan cara menambahkannya ke halaman di situs Anda.
Apa yang Anda Butuhkan
Untuk mengikuti tutorial ini, Anda akan membutuhkan:
- instalasi WordPress
- plugin MapSVG diinstal dan diaktifkan
- data Anda — lokasi yang ingin Anda gambarkan di peta Anda (Anda tidak perlu referensi atau koordinat peta karena plugin akan merawatnya untuk Anda)
Anda dapat membuat peta di mana saja di dunia, tetapi untuk tutorial ini saya akan membuat peta Kerajaan Inggris, karena dari sanalah saya berasal, dan menandainya dengan tempat liburan favorit saya di sini. Siapa tahu, saya dapat menginspirasi Anda!
Menautkan ke Google Maps API
Hal pertama yang perlu Anda lakukan adalah terhubung ke Google Maps API, sehingga plugin dapat menambahkan penanda untuk setiap lokasi Anda.
Untuk mendapatkan kunci API, buka konsol pengembang Google dan ikuti petunjuk di sana. Saya tidak akan membahasnya secara detail karena Google akan menjalankan Anda melalui langkah-langkah, dan mereka mungkin dapat berubah pada saat Anda membaca ini.
Anda harus mengaktifkan yang berikut di panel kontrol Google API (tidak di layar plugin di admin situs Anda):
- Maps API
- API Geocoding
- API Places
- Menetapkan batasan untuk 'None'
Setelah Anda selesai melakukannya, salin kunci API Google Anda dan kembali ke situs Anda. Pada layar MapSVG utama, pilih Google API button. Tempelkan kunci API Anda dan simpan.
Sekarang Anda siap membuat peta
Membuat peta
Untuk membuat peta, klik tautan MapSVG di menu admin Anda, lalu klik New SVG Map di kiri atas layar. Dari sini, Anda dapat memilih dari daftar peta SVG yang dibundel dengan plugin. Mulai ketikkan nama negara yang Anda inginkan petanya, dan plugin akan diisi secara otomatis untuk Anda.
Setelah Anda memilih negara Anda, plugin akan secara otomatis menghasilkan peta untuk Anda sesuaikan:
Mulailah dengan memberinya nama di bidang Title di sisi kanan, klik tombol Save, kemudian Anda dapat mulai menyesuaikannya.
Menambahkan Warna Kustom
Saat Anda pertama kali mengimpor peta Anda,peta itu akan menjadi hitam dengan latar belakang abu-abu. Mari sesuaikan itu.
Klik pada Colors di menu tarik-turun pada halaman pengeditan peta, untuk mengakses layar pengeditan warna.
Sekarang, luangkan waktu untuk menyesuaikan warna di peta Anda menggunakan pemilih warna. Anda dapat menyesuaikan warna latar belakang, warna dasar untuk wilayah Anda, warna pembatas, warna hover, warna yang dipilih, dan banyak lagi.
Saat mengedit hover dan status yang dipilih, Anda dapat mengatur warna kustom atau menggunakan pengaturan Brightness untuk menggunakan versi warna dasar yang lebih terang atau lebih redup.
Saya akan menggunakan palet blues sehingga peta saya tidak terlihat terlalu norak.
Begini cara peta saya terlihat dengan satu county dipilih dan satu lagi di kondisi mengambang:
Anda juga dapat mengedit warna setiap wilayah, untuk memberi peta Anda lebih banyak minat visual. Lakukan ini dengan mengeklik Edit regions di atas peta atau Regions di tarik-turun utama. Pilih setiap wilayah lalu pilih pemilih warna di sisi kanan daftar wilayah. Masuk akal untuk memiliki semua kode hex untuk warna Anda yang disimpan di tempat lain sehingga Anda dapat menyalin dan menempelkannya.
Sekali lagi, saya menempel dengan palet blues saya:
Luangkan waktu untuk menyesuaikan ini. Bagian yang sulit adalah mengatur warna sehingga negara tetangga atau negara bagian berada dalam warna yang berbeda!
Menambahkan Bidang Database
Sekarang setelah peta Anda terlihat seperti yang Anda inginkan, saatnya untuk menambahkan beberapa bidang yang dapat Anda gunakan untuk penanda Anda. Anda melakukan ini dengan menggunakan opsi Database di menu tarik-turun.
Klik pada ikon Edit fields di bagian atas panel untuk mulai menambahkan bidang. Saya akan menambahkan yang berikut untuk penanda saya:
- Nama
- Deskripsi
- gambar
- penanda
Anda bisa menambahkan apa pun yang Anda inginkan. Luangkan waktu untuk berpikir tentang informasi jenis apa yang pengunjung situs Anda akan ingin tahu tentang lokasi-lokasi di peta Anda. Misalnya, jika Anda memetakan kantor perusahaan Anda, orang-orang akan menginginkan nama dan alamat, dan mungkin informasi tentang bisnis apa yang ditangani kantor itu atau jam operasinya.
Bidang yang penting adalah Marker — tanpa itu, Anda tidak akan dapat menambahkan penanda tersebut ke peta Anda.
Anda dapat menggunakan berbagai jenis bidang dari kotak teks untuk memilih bidang, yang berarti Anda dapat menentukan jenis lokasi yang Anda tambahkan dan gunakan itu. Untuk bisnis ritel, ini berarti Anda dapat memilih lokasi mana yang merupakan toko besar, di luar toko kota, atau butik kecil, misalnya.
Saat mengedit bidang, Anda dapat menambahkan teks bantuan untuk orang lain yang mengedit bidang, dan Anda dapat menentukan apakah bidang akan dapat dicari. Masuk akal untuk memiliki sebanyak mungkin konten teks yang dapat dicari.
Menambahkan Tempat dan Penanda
Sekarang untuk bagian yang menyenangkan!
Peta Anda sudah siap, dan Anda memiliki bidang basis data Anda, tetapi Anda masih perlu menambahkan penanda tersebut.
Pertama, Anda perlu menambahkan data untuk lokasi Anda di basis data. Pilih tab Database dari daftar tarik-turun jika Anda belum masuk, lalu klik tanda + di kanan atas untuk menambahkan setiap lokasi secara bergantian.
Terus tambahkan hingga Anda memiliki semuanya. Ini milik saya:
Sekarang Anda memiliki lokasi di database, saatnya menambahkan penanda untuk masing-masingnya.
Untuk setiap lokasi, mulailah mengetik alamat di bidang Marker. Plugin akan secara otomatis menyarankan lokasi saat Anda mengetik:
Pilih tempat yang benar dari daftar yang diberikan plugin, lalu simpan lokasi Anda. Ulangi ini untuk semua lokasi di database Anda.
Setelah selesai, daftar lokasi Anda akan terlihat seperti ini:
Menyiapkan Popovers
Anda sekarang memiliki peta Anda, lokasi Anda, dan semua penanda Anda. Tapi Anda belum selesai! Langkah selanjutnya adalah mengkonfigurasikan popovers. Dengan begitu, ketika seseorang melihat peta, mereka dapat mengarahkan kursor ke lokasi yang Anda tambahkan dan melihat deskripsi dan gambar Anda (atau apa pun yang telah Anda tambahkan ke peta Anda sendiri).
Pilih tab Actions di menu dropdown. Gulir ke bawah ke bagian Marker click dan centang kotak centang Show popover. Pastikan kotak ini — ada beberapa di antaranya di layar ini, untuk berbagai popovers.
Setelah Anda selesai melakukannya, Anda perlu mengatur template untuk popovers. Klik DB Objek popover template link untuk menampilkan panel pengeditan kosong. Anda harus mengisi ini menggunakan kombinasi HTML dan bidang dari plugin.
Inilah markup yang saya gunakan di tangan saya:
<h4>{{name}}</h4>
<p>{{description}}</p>
{{#each images}}
<img src= "{{thumbnail}}" />
{{/each}}
Teks di dalam kurung akan menjadi teks yang sama yang ditetapkan sebagai judul bidang untuk setiap bidang yang Anda tambahkan ke database. Jika Anda tidak dapat mengingat apa yang Anda tambahkan, kembali ke tab Database dan mereka akan menjadi judul didalam daftar.
Satu jenis bidang yang berbeda adalah gambar. Di sini, Anda harus menambahkan placeholder untuk mengambil sumber untuk thumbnail. Kode di atas mengulang melalui gambar apa pun yang ditambahkan ke bidang gambar, jadi jika Anda menambahkan lebih dari satu, semuanya akan ditampilkan. Untuk lebih lanjut tentang ini, lihat dokumentasi plugin.
Sekarang coba klik salah satu penanda dan Anda akan melihat sebuah popover:
Tips: Jika Anda tidak dapat melihat popover, mungkin karena Anda salah mencentang kotak Show popover atau sedang mengedit template yang salah. Pastikan kotak centang yang Anda centang Marker click di bagian pada Actions tab dan bahwa template yang Anda edit adalah DB Object popover template. Anda dapat memilih templat dari daftar tarik-turun di Templates tab.
Mengkonfigurasi Direktori dan Pencarian
Agar pengguna dapat melihat detail lokasi Anda dan mencari konten di peta Anda, Anda harus mengonfigurasi direktori yang digunakan untuk pencarian dan memastikan pencarian diaktifkan.
Pergi ke tab Directory. Di tombol Directory, pilih On. Di bawah Data source, pilih Database.
Klik pada tautan template Directory item untuk mengedit template yang digunakan untuk direktori. Anda harus menambahkan bidang Anda dengan cara yang sama seperti saat menambahkan popovers, kecuali kali ini Anda hanya menggunakan placeholder dan tanpa HTML. Saya hanya menambahkan {{name}}, tetapi Anda mungkin ingin memasukkan lebih banyak.
Catatan: jika Anda tidak ingin daftar lokasi muncul di samping peta Anda, alihkan Directory ke off dan jangan khawatir tentang template.
Sekarang tekan tombol Save untuk menyimpan peta Anda. Saatnya untuk menambahkannya ke halaman di situs Anda.
Menambahkan Peta ke Halaman
Buka (atau buat) halaman yang akan Anda tambahkan peta.
Di mana Anda ingin peta muncul, klik pada Insert MapSVG icon, yang tampak seperti penanda hitam.
Pilih peta yang ingin Anda sisipkan dari daftar, dan plugin akan menambahkan kode pendek ke halaman Anda untuk menampilkan peta. Sekarang simpan halaman Anda dan ujilah.
Ini peta saya:
Dan ketika saya memilih salah satu lokasi, inilah popover:
MapSVG Memberi Anda Cara yang Ampuh Menambah Peta ke Situs Anda
Menggunakan plugin MapSVG memberi Anda cara untuk menambahkan peta ke situs Anda dengan lebih banyak opsi kustomisasi daripada hanya menanamkan peta Google. Jika Anda ingin peta Anda terlihat seperti peta Google tetapi termasuk popovers dan direktori, Anda dapat melakukan ini.
Tutorial ini telah menunjukkan salah satu cara membuat peta menggunakan plugin. Untuk mempelajari tentang semua fitur dan melihat bagaimana Anda dapat menambahkan peta khusus yang canggih, periksa dokumentasi.
