Apakah Anda ingin mengetahui cara membuat peta dengan banyak pin menggunakan Jet Elements?

Elemen Jet menawarkan widget bernama Peta Tingkat Lanjut. Berbeda dengan widget Google Peta asliElementor yang hanya mendukung satu lokasi, Jet Elements Advanced Map Widget memungkinkan Anda membuat peta dengan banyak pin.

Untuk menggunakan widget ini, Anda harus mengintegrasikan Jet Elements terlebih dahulu Google Peta menggunakan kunci API.

Widget Peta Lanjutan Elemen Jet cukup berguna jika Anda memiliki bisnis dengan banyak cabang di kota dan ingin membuat peta yang menunjukkan lokasi cabang Anda. Widget ini juga berguna untuk membuat sesuatu seperti peta tempat wisata di suatu kota.

Berikut cara menggunakan widget ini.

Langkah 1: Integrasikan JetElements dengan Google Maps

Seperti disebutkan, Anda memerlukan kunci API Google Maps untuk mengintegrasikan Jet Elements dengan Google Maps. Anda dapat memperoleh kunci API melalui konsol Google API.

Jadi kunjungi Konsol API Google dan masuk dengan akun Google Anda. Jika Anda belum memiliki proyek, buat proyek baru dengan mengeklik menu tarik-turun di bagian atas dan klik PROYEK BARU pada popup yang muncul.

Beri nama untuk proyek Anda dan klik tombolnya MENCIPTAKAN .

Setelah proyek baru Anda dibuat, pilih melalui menu tarik-turun di bagian atas dasbor Google API Console, lalu klik Perpustakaan di panel kiri.

Google membagi Google Maps API menjadi 17 jenis. Anda harus mengaktifkan API yang diperlukan oleh Jet Elements Advanced Map Widget untuk menggunakan widget ini. Crocoblock, pengembang Jet Elements, tidak memberikan informasi mendetail tentang API yang diperlukan. Berdasarkan pengalaman kami, kami telah mengaktifkan API berikut:

  • Petunjuk API
  • API Geocoding
  • Peta JavaScript API
  • Tempat API

Anda dapat mengklik link tersebut TUNJUKKAN SEMUA di bagian tersebut Peta untuk melihat mereka semua.

Untuk mengaktifkan API, pilih API yang bersangkutan (dengan mengkliknya) dan klik tombolnya MENGAKTIFKAN.

Setelah Anda selesai mengaktifkan API yang diperlukan, kembali ke dasbor utama Konsol Google API dan klik identifier di panel kiri. Klik tombolnya Buat kredensial dan pilih Kunci API. Salin kunci API pada popup yang muncul.

buat tur virtual 360 derajat di WordPress dengan Elementor

Selanjutnya, login ke dashboard WordPress Anda dan pergi ke JetPlugins – > Pengaturan JetElements.

Klik pada tab integrasi dan rekatkan kunci API Anda di lapangan Kunci Google Maps API di bagian Google Maps. Aktifkan opsi Kunci Geocoding API terpisah dan rekatkan kode yang sama di Kunci Geocoding API.

buat peta dengan banyak pin menggunakan Jet Elements

Langkah 2: Buat peta

Setelah Jet Elements dan Google Maps berhasil diintegrasikan, Anda dapat mulai membuat peta. Untuk melakukannya, buat halaman baru (Halaman – > Tambah) atau barang baru (Item – > Tambah) dan memodifikasinya dengan Elementor.

Di editor Elementor, atur tata letaknya sebelum Anda memulai. Untuk melakukan ini, buka panel Pengaturan Halaman dengan mengklik ikon roda gigi di sudut kiri bawah. Pilih tata letak dari menu tarik-turun di bawah opsi Pengaturan umum.

Tambahkan bagian baru dengan mengeklik ikon tambah di kotak edit Elementor dan seret widget Peta Tingkat Lanjut ke kanvas.

buat peta dengan banyak pin menggunakan Jet Elements

Atur pusat peta ke kota Anda (atau wilayah mana pun tergantung pada peta yang ingin Anda buat). Atur juga zoom awal.

buat peta dengan banyak pin menggunakan Jet Elements

terbuka Google Maps dan temukan lokasi pertama yang ingin Anda tambahkan ke peta dan salin alamatnya.

Kembali ke editor Elementor dan buka bagian tersebut Pin. Klik pada lokasi yang ada dan ganti alamat dengan alamat yang baru saja Anda salin. Tambahkan juga keterangan lokasi di lapangan Deskripsi Pin.

Klik pada tombol TAMBAHKAN ELEMEN terletak sedikit lebih rendah untuk menambahkan alamat lain.

Untuk mengubah gaya peta Anda, serta ketinggiannya, Anda dapat membuka bagian tersebut Gaya Peta.

CATATAN: Jika peta tidak dimuat setelah menyeret widget Peta Tingkat Lanjut di editor Elementor dan Anda melihat pesan “Hanya untuk tujuan pengembangan”, pastikan untuk mengaktifkan penagihan Google Anda awan. Kebijakan baru Google mengharuskan pengembang untuk mengaktifkan akun penagihan.

Dapatkan Elementor Pro Sekarang!!!

Kesimpulan

Jadi ! Itu saja untuk artikel ini yang menunjukkan cara membuat peta dengan banyak pin menggunakan Jet Elements. Jika Anda memiliki kekhawatiran tentang cara menuju ke sana, beri tahu mereka di komentar.

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 atau yang di Divi: tema WordPress terbaik sepanjang masa.

Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.

...