Advertisement
  1. Code
  2. WordPress Plugins

Membuat Peta Khusus Dengan Plugin MapSVG

by
Read Time:9 minsLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Indonesian (Bahasa Indonesia) translation by ibnuhadis83 (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

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.

create a mapcreate a mapcreate a map

Setelah Anda memilih negara Anda, plugin akan secara otomatis menghasilkan peta untuk Anda sesuaikan:

a new map of the UK before customizationa new map of the UK before customizationa new map of the UK before customization

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.

the colors screen before customizationthe colors screen before customizationthe colors screen before customization

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:

a map of the UK in bluea map of the UK in bluea map of the UK in blue

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:

map of the UK with counties in varying shades of bluemap of the UK with counties in varying shades of bluemap of the UK with counties in varying shades of blue

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.

creating a field for the databasecreating a field for the databasecreating a field for the database

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.

adding locations to the mapadding locations to the mapadding locations to the map

Terus tambahkan hingga Anda memiliki semuanya. Ini milik saya:

a map of the UK with locations addeda map of the UK with locations addeda map of the UK with locations added

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:

adding a marker to a locationadding a marker to a locationadding a marker to a location

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:

A map of the UK with markers addedA map of the UK with markers addedA map of the UK with markers added

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:

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:

a popover in the plugin admin screensa popover in the plugin admin screensa popover in the plugin admin screens

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:

a map of the UK with markers on a page in the sitea map of the UK with markers on a page in the sitea map of the UK with markers on a page in the site

Dan ketika saya memilih salah satu lokasi, inilah popover:

a popover on the map in a page in my sitea popover on the map in a page in my sitea popover on the map in a page in my site

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.