Host Detail Google Maps dengan Plugin Map Locations WordPress

Diterbitkan: 2023-03-30

Tahukah Anda bahwa Anda dapat menghosting peta Google interaktif di situs web WordPress Anda?

Anda mungkin sudah tahu bahwa Anda dapat menyematkan peta Google di halaman atau postingan apa pun hanya dengan menyalin kode iframe ke dalam blok HTML. Itu akan menunjukkan peta area mana pun yang telah Anda tunjuk. Namun, itulah batas dari metode embed HTML.

Jika Anda ingin membawa lokasi peta Google ke level lain di situs WordPress Anda, bertahanlah karena saya akan menunjukkan cara melakukannya di artikel ini.

Tapi pertama-tama, kegunaan potensial apa yang bisa Anda miliki untuk menghosting peta Google di situs Anda?

Pertama, Anda dapat menunjukkan lokasi bisnis Anda dengan pin. Atau, jika Anda merencanakan acara, Anda dapat menampilkan lokasi persisnya langsung di halaman acara sehingga pengunjung dapat merencanakannya dengan mudah. Katakanlah Anda memiliki situs web perjalanan yang memberi tahu turis tentang museum terbaik untuk dikunjungi di kota tertentu. Atau Anda dapat menampilkan jalur pendakian dan mengizinkan pengguna memasukkan catatan mereka sendiri tentang pendakian tersebut?

Anda dapat melakukan semua ini dengan plugin Map Locations WordPress dari Creative Minds. Mari kita mulai!

Buat Peta Unik dengan Plugin Lokasi Peta

Dengan plugin Lokasi Peta, Anda dapat menempatkan beberapa lokasi di peta Google bersama dengan info spesifik tentang lokasi — plus gambar, video, rute kode pos, dan penanda yang dapat dicari.

Dengan menggunakan integrasi peta Google, Anda dapat membuat sistem lokasi toko menggunakan banyak peta, membuat direktori lokasi yang interaktif. Plugin ini juga memungkinkan Anda menampilkan ikon unik untuk setiap lokasi.

tangkapan layar halaman WordPress plugin Cm Map Locations

Selain itu, plugin mendukung:

  • Mengimpor dan mengekspor lokasi
  • Pencarian lokasi dengan kode pos
  • Menyematkan lokasi menggunakan kode pendek
Lihat Lokasi Peta

Memulai dengan Plugin Peta Lokasi WordPress

Plugin Peta Lokasi menampilkan menu lengkap pengaturan dan menghosting Panduan Pengguna yang mudah diakses langsung di dasbor admin WordPress Anda. Ada beberapa langkah penting untuk mengonfigurasi dan mengatur peta Anda. Yang pertama adalah memasang plugin di situs Anda.

Instal Plugin Lokasi Peta

Anda dapat menemukan dan mengunduh plugin Map Locations di halaman WordPress.org. Sebagai alternatif, Anda dapat mencari "lokasi peta cm" di dasbor Anda di bawah Plugins→Add New .

Anda juga dapat membeli salah satu plugin versi premium di situs web Creative Minds.

Setelah diinstal dan diaktifkan, Anda akan menemukan item menu baru di menu dasbor sisi kiri Anda yang disebut "Lokasi Peta CM".

Langkah pertama dalam mengonfigurasi plugin adalah memasukkan kunci Google Maps API Anda. Jika Anda belum memilikinya, mari kita bahas sekarang.

Dapatkan Kunci Google Maps API

Pertama, Anda memerlukan akun Google. Sejak Juli 2018, menggunakan data Google Maps, Rute, dan Tempat juga mengharuskan Anda memiliki informasi penagihan di Google Cloud. Namun, Anda akan memiliki kesempatan untuk menambahkan info tersebut saat Anda membuat kunci API.

Di bawah CM Map Locations→Settings , Anda akan menemukan bidang untuk kunci API dan tautan untuk mendapatkannya, jika Anda belum memilikinya.

tangkapan layar menu Lokasi Peta

Anda memerlukan beberapa kunci API untuk menggunakan plugin Lokasi Peta:

  • API JavaScript
  • API Geolokasi (Untuk beberapa fitur; memerlukan HTTPS)
  • API geokode
  • Tempat API

Untuk mendapatkan kunci ini, buka halaman Google Developers.

Arahkan ke proyek Anda, atau buat yang baru.

tangkapan layar menu proyek Pengembang Google

Selanjutnya, buka APIs & Services→Library .

Pilih satu API dari daftar, atau gunakan bilah pencarian untuk menemukan salah satu API yang saya sebutkan sebelumnya. Di popup menu untuk API, klik tombol Aktifkan berwarna biru. Ulangi langkah-langkah untuk setiap API.

Setelah Anda mengaktifkan semua API, Anda perlu mendapatkan kuncinya (Anda hanya perlu satu). Di bilah sisi, pilih Kredensial tempat Anda akan melihat kunci API Anda terdaftar. Salin kunci API ke papan klip Anda — Anda akan menempelkannya ke situs web Anda sebentar lagi.

Pertama, Anda harus mengaktifkan penagihan untuk Google Cloud seperti yang saya sebutkan sebelumnya. Ini adalah langkah penting agar plugin Maps Location berfungsi dengan benar. Saat masuk ke Proyek Anda, klik menu hamburger di kiri atas dan pilih Penagihan. Anda akan mendapatkan pesan yang meminta Anda untuk Menautkan akun penagihan . Klik tombol itu dan ikuti petunjuknya.

Sekarang setelah Anda menyelesaikan semua langkah untuk menyiapkan dan mendapatkan Kunci Google API Anda, kembalilah ke situs WordPress Anda. Di halaman setelan Lokasi Peta CM, tempel kunci Google Maps API Anda dan klik Simpan di bagian bawah. Jika suka, Anda dapat menguji konfigurasi menggunakan tombol di sebelah kanan.

Menambahkan Lokasi

Plugin Peta Lokasi membuat halaman indeks untuk pengunjung dan pengguna. Setelah Anda menambahkan lokasi, itu akan dicantumkan di halaman tersebut. Sebelum menambahkan lokasi, sebaiknya buat setidaknya satu kategori untuk peta Anda.

Ini sesederhana menambahkan kategori posting baru, tetapi ini khusus untuk Lokasi Peta. Buat kategori sebanyak yang Anda suka di bawah CM Map Locations→Categories . Anda juga dapat menambahkan ikon penanda default untuk setiap kategori.

tangkapan layar menu Peta Lokasi

Setelah membuat kategori, Anda dapat menambahkan lokasi. Anda dapat menggunakan menu Lokasi Peta CM atau klik + Baru di toolbar admin Anda dan pilih Lokasi . Pada editor halaman Lokasi yang baru, isi kolom Nama lokasi dan Deskripsi yang berhubungan dengan lokasi yang Anda inginkan.

Pilih kategori yang sesuai dari daftar, dan pilih ikon Penanda. Anda juga dapat mengunggah ikon Anda sendiri jika mau. Selanjutnya, Anda dapat menambahkan gambar atau video apa pun tentang lokasi Anda — ini berguna untuk situs panduan perjalanan.

Selanjutnya, gulir ke bawah ke peta Google yang ditampilkan di halaman. Cari lokasi atau pindahkan peta seperlunya. Setelah lokasi Anda terlihat, pilih salah satu alat menggambar dan gambar batas lokasi Anda di peta.

tangkapan layar membuat lokasi peta di peta Google

Menggulir ke bawah halaman lebih jauh, Anda akan melihat info Lintang, Bujur, dan alamat yang akurat untuk lokasi Anda terisi secara otomatis. Jika Anda suka, Anda dapat menambahkan:

  • Nomor telepon
  • Situs web
  • Alamat email
  • URL

Klik tombol Simpan dan lokasi Anda akan ditambahkan ke daftar lokasi yang tersedia di situs Anda. Saat melihat lokasi, pengunjung Anda akan melihat info dan peta yang terformat rapi.

tangkapan layar peta Santa Barbara yang ditampilkan

Membuat Halaman Indeks

Tujuan halaman indeks adalah untuk menampilkan peta dengan penanda yang mewakili berbagai lokasi, bersama dengan daftar lokasi tersebut yang dapat disesuaikan.

Halaman indeks dapat dikonfigurasi untuk menampilkan informasi yang berbeda tentang setiap lokasi, seperti:

  • Judul
  • Keterangan
  • Alamat
  • Peringkat.

Pengguna dapat berinteraksi dengan peta dan daftar lokasi untuk mencari lokasi tertentu atau menelusuri semua opsi yang tersedia.

Halaman indeks juga dapat menyertakan fitur seperti filter radius kode ZIP dan kemampuan untuk menambahkan URL khusus atau petunjuk arah ke setiap lokasi.

Tampilkan Peta Menggunakan Kode Pendek

Kode pendek adalah pintasan khusus WordPress yang memungkinkan pengguna menambahkan fitur dinamis, seperti peta dengan lokasi, ke postingan dan halaman.

Ada kode pendek yang berbeda untuk berbagai tujuan, termasuk menampilkan cuplikan lokasi, menampilkan lokasi tertentu di peta, menampilkan peta dengan lokasi dari suatu kategori, dan menampilkan peta lokasi saat ini.

Pengguna dapat menambahkan parameter untuk membuat shortcode ini lebih spesifik, seperti memilih tema, lebar, dan tinggi peta atau membatasi jumlah lokasi yang ditampilkan.

Di bawah ini adalah daftar semua shortcode dan parameternya, bersama dengan contoh agar lebih mudah dipahami:

Kode Pendek Lokasi:

  1. Potongan
    • Kode pendek: [cmloc-cuplikan]
    • Gunakan: Menampilkan cuplikan lokasi.
    • Parameter penyaringan: id
    • Lihat parameter: unggulan
    • Contoh: [cmloc-snippet id=”487″ fitur=”peta”]
  2. Peta Lokasi Spesifik
    • Kode pendek: [cmloc-location-map]
    • Gunakan: Menampilkan lokasi tertentu di peta.
    • Parameter penyaringan: id
    • Lihat parameter: tema, tinggi peta, lebar peta, lebar, judul pertunjukan, tanggal pertunjukan
    • Contoh: [cmloc-location-map id=1767 mapwidth=640 mapheight=480 width=700 showtitle=1 showdate=1]
  3. Peta Beberapa Lokasi
    • Kode pendek: [cmloc-lokasi-peta]
    • Gunakan: Menampilkan peta dengan lokasi dari kategori yang dipilih.
    • Parameter pemfilteran: showonlybyparams, limit, page, category, taxonomy_key
    • Lihat parameter: tema, daftar, lebar peta, lebar, menu, keterangan alat, peta, pelacakan pengguna, from_date, to_date
    • Dapatkan parameter: bgcolor, bgcolor_filter, waktu, time_filter, identifier, identifier_filter, from_date, to_date, hours, path
    • Contoh 1: [cmloc-locations-map category=”pegunungan”]
    • Contoh 2: [cmloc-locations-map list=left limit=4 page=1 category=”111″]
  4. Peta Lokasi Saat Ini
    • Kode pendek: [cmloc-current-locations-map]
    • Gunakan: Menampilkan peta lokasi saat ini.
    • Parameter pemfilteran: batas, halaman
    • Lihat parameter: tema, lebar peta, lebar, keterangan alat
    • Contoh: [cmloc-current-locations-map]

Kode pendek dapat ditemukan di bawah opsi Kode pendek untuk referensi.

Kode Pendek yang Tersedia

Anda dapat menemukan petunjuk mendetail tentang menyiapkan kode pendek dan menampilkan lokasi menggunakan kode pendek di dokumen bantuan basis pengetahuan Lokasi Peta CM.

Kontrol akses

Jika Anda ingin membuat peta Anda interaktif, Anda perlu mengonfigurasi Kontrol Akses di menu Lokasi Peta CM . Ada beberapa opsi yang tersedia untuk akses.

Pengaturan akses memungkinkan admin mengontrol siapa yang dapat melihat, melihat, membuat, dan memperbarui lokasi, serta peran mana yang dapat menggunakan Perpustakaan Media saat mengunggah gambar.

Admin dapat memilih dari opsi prasetel seperti semua orang, pengguna yang masuk, atau peran pengguna tertentu seperti administrator, editor, penulis, kontributor, atau pelanggan.

Alternatifnya, mereka dapat membuat peran khusus dan mencantumkan nama kemampuan dari mereka yang diizinkan untuk mengaksesnya.

Daftar Lokasi

Ini memungkinkan Anda menentukan siapa yang dapat mengakses indeks lokasi dan mencari atau memfilter lokasi.

Lihat Lokasi

Ini menentukan siapa yang dapat menampilkan halaman lokasi.

Buat Lokasi

Pilih siapa yang dapat membuat lokasi.

Perbarui Lokasi Sendiri

Pilih siapa yang dapat memperbarui lokasi.

Peran Diizinkan untuk Menggunakan Pustaka Media

Jika pelanggan memiliki kemampuan upload_files, mereka dapat melihat tab Perpustakaan Media WordPress saat mengunggah gambar untuk suatu lokasi. Jika Anda ingin mencegah pengguna menelusuri Perpustakaan Media situs web Anda, pastikan Anda mencabut akses untuk peran tertentu.

Untuk setiap kategori, Anda dapat memilih salah satu peran default yang termasuk dalam inti WordPress atau peran yang disediakan oleh plugin yang menunjukkan peran tertentu.

Fitur tambahan

Saya telah membahas dasar-dasar penyiapan dan penggunaan plugin Lokasi Peta, tetapi masih banyak lagi fitur yang tersedia.

Tema

Ada hingga enam tema yang dapat dipilih untuk membuat lokasi Anda menonjol di situs Anda.

Ubin/Lapisan

Ubin atau lapisan adalah bagian dari peta yang dibuat dan ditampilkan secara terpisah dari peta lainnya.

Ubin atau lapisan ini biasanya berupa gambar persegi yang telah dirender sebelumnya dan di-cache di server, memungkinkannya ditampilkan dengan cepat di peta tanpa memerlukan browser pengguna untuk memuat seluruh peta sekaligus.

Ubin atau lapisan digunakan untuk menyempurnakan tampilan visual peta dengan memungkinkan informasi tambahan ditampilkan di atas peta dasar. Ini dapat mencakup label, penanda, dan data lain yang dapat membantu pengguna menavigasi peta dan memahami konteks area yang ditampilkan.

Selain itu, petak atau lapisan juga dapat meningkatkan performa peta dengan memungkinkan browser memuat hanya sebagian peta yang sedang ditampilkan, bukan keseluruhan peta sekaligus.

Anda dapat menambahkan lapisan di atas peta Anda ke info seperti menampilkan siklus lalu lintas menggunakan OpenStreetMap atau layanan lainnya.

Contoh overlay petak pada peta
Contoh overlay petak pada peta

Pengaturannya ada di tab Umum, di bawah bagian Peta.

  • Tampilan peta default – Pilih tampilan default. Pengguna dapat mengubahnya kapan saja.
  • Sisipkan URL ubin – Tambahkan URL layanan ubin pilihan Anda. Periksa Tiles – OpenStreetMap Wiki untuk contoh lainnya
Menyiapkan petak dan lapisan pada peta
Menyiapkan petak dan lapisan pada peta

Izinkan pengunjung untuk mengaktifkan atau menonaktifkan ubin saat menjelajahi peta.

Pilih tombol Ubin untuk menampilkan atau menyembunyikan ubin
Pilih tombol Ubin untuk menampilkan atau menyembunyikan ubin

Anda bahkan dapat mengizinkan pengguna mengunggah ubin.

Tampilkan Lokasi Pengguna

Pengguna Anda dapat membagikan geolokasi mereka dan menampilkannya di peta.

Dukungan REST/API

Gunakan REST API untuk membuat lokasi dari situs lain atau bahkan aplikasi seluler.

Templat Tampilan

Ada beberapa templat tampilan yang tersedia, memungkinkan Anda membuat pencari toko, daftar, atau tempat menarik dengan mudah.

Cari berdasarkan Radius

Anda dapat mencari radius yang ditentukan dari kode pos di negara mana pun.

Waze dan Google Direction

Saat Anda membuat lokasi baru, tautan arah Wave dan Google secara otomatis ditambahkan ke daftar.

Harga untuk Plugin Lokasi Peta

Anda dapat menginstal dan menggunakan plugin Map Locations secara gratis di sebanyak mungkin situs WordPress. Ini mencakup semua hal penting yang Anda butuhkan untuk membuat lokasi sebanyak yang Anda suka, menambahkan deskripsi dan gambar, dan menampilkan setiap lokasi di peta uniknya. Namun, dengan membeli versi premium, Anda mendapatkan akses ke lebih banyak fitur.

Lokasi Peta Esensial (Pro) = $39/tahun

Selain hal-hal penting yang tercantum di atas, Anda mendapatkan template tampilan, impor/ekspor, dukungan untuk kategori, informasi cuaca, kontrol akses, dan lainnya — di satu situs web.

Lokasi Peta Lanjutan + Bundel Pengelola Rute = $69/tahun

Tingkat ini menambahkan plugin Route Manager Creative Minds dan memperluas lisensi ke tiga situs web.

Lokasi Peta Utama + Rute Peta + 5 Pengaya = $119/tahun

Tingkat Ultimate menambahkan beberapa add-on dan plugin Map Routes, dengan lisensi hingga sepuluh situs web.

Setiap tingkatan memberikan dukungan selama satu tahun dan menawarkan jaminan uang kembali 30 hari.

Tampilkan Peta Interaktif di Situs WordPress Anda

Plugin Peta Lokasi memberi Anda kemampuan untuk membuat daftar lokasi toko, memandu wisatawan melalui kota mana pun, atau bahkan membiarkan pengguna membuat dan menyesuaikan peta sesuai kebutuhan mereka. Ini adalah salah satu plugin dari banyak pilihan penawaran oleh tim pengembangan di Creative Minds.

Coba plugin Lokasi Peta