Skip to main content

My Maps location: Lokasi & Kategori

1. Dapatkan kunci API Google Maps

Setiap kali Anda menggunakan API Google Maps, jika domain Anda dibuat setelah 22 Juni 2016, Anda harus menyertakan kunci untuk memvalidasi permintaan Anda.
Dapatkan kunci dan aktifkan API: https://developers.google.com/maps/documentation/javascript/get-api-key

Informasi selengkapnya: https://developers.google.com/maps/documentation/javascript/usage?hl=en

Langkah pertama adalah membuat proyek, lalu ketik nama proyek tersebut.

 

buat-api-key

 

Jika saya ingin mengizinkan semua permintaan dari mydomain, maka pola yang harus diikuti adalah *.joomunited.com/*.
Jika Anda hanya ingin mengizinkan satu domain, misalnya mydomain.com, maka polanya adalah joomunited.com/*.


Pada lingkungan localhost, Anda dapat memasukkan kunci valid apa pun dan itu akan berfungsi tanpa perlu merujuk ke domain apa pun.

 

pola API domain


Kemudian, kunci API akan dibuat. Kunci inilah yang perlu Anda salin untuk ditambahkan ke My Maps location.

 

dibuat oleh api

 

Tambahkan kunci ke My Maps Location.

Dari Komponen > My Maps Location > tampilan Opsi , Anda dapat menambahkan kunci dalam konfigurasi.

 

konfigurasi peta

 

Tempelkan kuncinya.

 

tambahkan kunci-api

 

Resume langkah demi langkah:


Jadi langkah-langkah yang saya ikuti adalah

  • Buka Google API Console
  • Buat atau pilih proyek
  • Klik Lanjutkan untuk mengaktifkan API dan layanan terkait lainnya.
  • Di halaman Kredensial, dapatkan kunci Browser (dan atur Kredensial API)
  • Untuk mencegah pencurian kuota, amankan kunci API Anda dengan mengikuti praktik terbaik tersebut.

2. Kelola kategori lokasi

Lokasi diklasifikasikan ke dalam kategori. Kategori-kategori tersebut dapat ditampilkan sebagai filter di antarmuka pengguna atau digunakan sebagai parameter yang telah ditentukan sebelumnya dalam item menu untuk memuat beberapa lokasi yang dikategorikan.
 

frontend filter kategori

 

Jika Anda memiliki banyak lokasi, disarankan untuk menggunakan kategori. Anda dapat membuat kategori dan subkategori.
Untuk membuat kategori, silakan masuk ke My Maps location > Kategori dan klik Baru.

 

kategori-lokasi

 

Kemudian dari layar kategori, Anda perlu menambahkan judul dan kategori induk jika Anda ingin membuat subkategori

 

kategori-induk

 

Anda juga dapat menentukan penanda default untuk lokasi dalam kategori menggunakan tab Pemilihan penanda.

 

kategori penanda

 

Catatan: sebuah kategori dibuat secara default dengan nama "Kategori Saya" yang memungkinkan Anda untuk mulai menambahkan lokasi langsung setelah instalasi.

3. Buat lokasi

Untuk membuat lokasi, silakan masuk ke My Maps location > Lokasi > Baru

Terdapat 3 kolom yang wajib diisi:

  • Nama lokasi
  • Kategori lokasi
  • Detail lokasi (alamat)      

 

Untuk alamat tersebut, Anda memiliki 3 solusi untuk menambahkannya:

  • Gunakan kolom pencarian (disarankan)
  • Arahkan kursor ke peta dan gunakan kursor untuk menunjuk lokasi
  • Isilah alamat (harus valid di Google Maps)

 

Untuk menambahkan lokasi menggunakan mesin pencari, ketik nama tempat yang ingin Anda tambahkan.

 

tambahkan lokasi

 

Saat dipilih, kolom lintang dan bujur akan terisi secara otomatis. Peta saya juga terintegrasi dengan Google Places! Artinya, Anda dapat mencari toko atau apa pun yang terdaftar di Google Maps, komponen kami akan mendapatkan semua informasi tempat tersebut.

 

Tempat Google

 

 

Anda juga dapat bergerak di peta dan meletakkan penanda secara langsung, hasilnya akan sama dan Anda akan mendapatkan garis lintang dan garis bujur yang terisi secara otomatis.

 

titik peta

 

Berhati-hatilah dengan kolom alamat dan kode pos jika Anda mengisinya secara manual, harus sesuai dengan alamat yang dikenal di Google Maps.

 

kolom alamat

 

Semua informasi lain tentang lokasi (deskripsi, jam operasional,...) ditampilkan dalam tampilan detail lokasi.

Tautan kontak di bagian detail lokasi memberikan kemungkinan untuk menambahkan tautan kontak, email, atau URL untuk setiap lokasi. Di bagian depan (frontend), tautan ini akan berupa tombol kontak yang akan membuka URL atau menjalankan tindakan email.

 

9

 

4. Informasi lokasi lainnya

Di setiap lokasi, Anda dapat menambahkan gambar dan penanda. 

  • Gambar lokasi: Gambar akan ditampilkan sebagai thumbnail di tooltip lokasi dan dalam ukuran lebih besar di halaman detail lokasi.
  • Gunakan ikon kategori: Gunakan ikon yang Anda masukkan di kolom kategori lokasi peta saya.
  • Latar Belakang Spidol: pilih warna untuk spidol latar belakang Anda.
  • Penanda akan ditampilkan di peta sebagai ikon penanda lokasi. Anda juga mendapatkan beberapa set penanda yang bagus untuk lokasi Anda yang disertakan dalam My Maps Location .
  • Opsi "Gunakan Tautan Kustom" akan mengganti tautan ke detail lokasi dengan URL kustom.

 

lokasi gambar penanda

 

My Maps location menggunakan fitur multibahasa bawaan Joomla. Anda dapat menentukan bahasa dalam kategori lokasi dan di dalam lokasi. Saat beralih bahasa, lokasi akan difilter seperti konten Joomla lainnya untuk menampilkan konten yang disetujui dalam bahasa tersebut.

 

bahasa

 

Kolom deskripsi lokasi adalah salah satu yang terpenting.
Kolom ini akan ditampilkan di halaman detail lokasi dan, tergantung pada tema, sebagai teks pengantar lokasi di hasil pencarian. Lebih penting lagi, deskripsi ini adalah editor WYSIWYG dengan semua plugin yang dimuat di dalamnya, artinya Anda dapat memasukkan apa pun yang Anda inginkan di dalamnya (gambar, video...).

 

deskripsi lokasi

 

Berikut teks pengantar yang ditampilkan dalam hasil pencarian lokasi.

 

teks di hasil lokasi

 

Kolom tag menggunakan sistem tag yang sama seperti Joomla. Anda dapat menambahkan tag dan sub-tag, lalu memuatnya di frontend sebagai filter. Untuk mengelola semua tag, cukup muat komponen tag Joomla: Komponen Menu > Tag
. Di frontend, tergantung pada konfigurasinya, tag dapat ditampilkan sebagai kotak centang (seperti di bawah) atau sebagai daftar dropdown.

 

filter tag

 

My Maps Location kini memiliki kolom tambahan untuk mengisi informasi meta (untuk mesin pencari). Kolom-kolom ini dimuat di halaman detail lokasi.

 

meta-informasi

 

5. Tampilkan lokasi di antarmuka pengguna

Untuk menampilkan lokasi Anda di bagian depan (frontend), Anda dapat menggunakan:

  • Menu untuk menampilkan mesin pencari lokasi, lokasi tunggal, atau kategori lokasi
  • Modul untuk menampilkan kolom pencarian atau memilih sekumpulan lokasi
  • Tombol editor untuk menampilkan satu atau beberapa lokasi di editor mana pun

Muat lokasi dari menu

Dari pengelola menu Joomla, tambahkan elemen dan pilih tipe “Pencarian dan tampilan lokasi”. Ini akan menampilkan mesin pencari lokasi dengan filter.
Pilih “Tampilan detail lokasi” untuk menampilkan satu lokasi yang telah ditentukan sebelumnya.

 

menu lokasi

 

Jika Anda memilih “Pencarian dan tampilan lokasi”, Anda memiliki beberapa parameter tampilan. Beberapa di antaranya mungkin menimpa parameter komponen default.

 

konfigurasi menu utama

 

Dari tab utama menu, Anda dapat mengatur:

  • Masukkan alamat: Anda dapat memaksa alamat default untuk ditampilkan saat halaman dimuat. Kolom ini dapat dibiarkan kosong.
  • Jarak: jarak untuk mengunci pencarian, mengacu pada alamat di atas. Dapat dibiarkan sebagai -1 (default).
  • Kategori: muat kategori lokasi tertentu
  • Batas pencarian: batasi jumlah hasil pencarian. Angka 10 hanya akan menampilkan 10 hasil pertama pada pencarian lokasi.
  • Pengurutan: urutkan hasil pencarian berdasarkan Tanggal, Judul, Jarak (default)

 

mml-menu-lanjutan

 

Kemudian pada tab menu My Maps Location , Anda dapat mengatur:

  • Pilih Komponen: My Maps Location atau semua integrasi pihak ketiga seperti K2, Jomsocial ...
  • ID kategori default (ekstensi pihak ketiga): Kategori default yang akan dimuat saat ekstensi pihak ketiga digunakan, seperti K2, Hikashop, atau Adsmanager, ID daftar CB untuk pembangun komunitas.
  • Lokasi kategori anak: Tampilkan juga lokasi dari subkategori sebagai hasil pencarian, bukan hanya yang dipilih di atas.
  • Tema: pilih salah satu dari 3 tema default, lebar penuh, dan sidebar dari tema tampilan pencarian dan hasil yang tersedia untuk item menu.
  • Penyedia peta: Pilih Google Maps, Bing Maps, Mapbox, OpenStreetMap, Baidu, atau Mapquest untuk menyesuaikan tampilan peta Anda.
  • Aktifkan Tag Pencarian : Memungkinkan kueri pencarian dilakukan menggunakan nama tag lokasi.
  • Desain: Tergantung pada sumber peta, Anda memiliki beberapa jenis dan warna peta.
  • Lapisan peta: Tambahkan beberapa data (lapisan) ke peta Anda. Terdapat lapisan KML, lapisan lalu lintas, lapisan transportasi umum, dan lapisan bersepeda.
  • URL Layer Google Map: Gunakan layer Data untuk menyimpan data kustom Anda, atau untuk menampilkan data GeoJSON pada peta Google.
  • Jenis Bing Maps: Jika Bing Maps adalah penyedia peta Anda, pilih tampilan dan data Bing Maps.
  • Tipe OpenStreetMap: Jika OpenStreetMap adalah penyedia peta Anda, maka Anda dapat menambahkan beberapa data (lapisan) ke peta Anda.
  • Tooltip lokasi: Saat peta dimuat, tooltip lokasi akan otomatis terbuka setelah pencarian lokasi.
  • Perbesaran peta: Tetapkan tingkat perbesaran default pada peta.
  • Opsi lebar dan tinggi peta dan hasil pencarian

 

Tampilan frontend berdasarkan tema

 

tema pencarian peta

 

Hasil pencarian untuk tampilan lokasi tunggal:

lokasi bridgewater


Menampilkan lokasi menggunakan modul

My maps location dilengkapi dengan 2 modul untuk lokasi bawaan + modul lain untuk integrasi pihak ketiga (seperti modul untuk menampilkan lokasi item K2)

Modul Peta memungkinkan Anda menampilkan lokasi dengan filter yang sama seperti menu, tetapi dalam posisi modul. Lokasi akan ditampilkan sebagai Peta atau Daftar. Anda dapat memilih sekumpulan lokasi atau memilih kategori lokasi.

 

modul peta

 

Modul Pencarian Peta My Maps Location akan menampilkan mesin pencari dengan beberapa filter sebagai pilihan, seperti lebar peta atau komponen tempat lokasi akan dicari (misalnya, hanya mencari lokasi K2).

 

modul pencarian

 

Modul tampilan di frontend:

 

modul frontend peta pencarian

 

 

Tampilkan lokasi menggunakan tombol editor


Tombol editor akan dimuat di editor Joomla Anda (biasanya di artikel atau modul kustom HTML). Anda akan melihat tombol tersebut di bagian bawah editor Anda.
Saat diklik, Anda akan melihat kotak dialog yang memungkinkan Anda memilih satu atau beberapa lokasi yang telah Anda tambahkan sebelumnya.

 

tombol editor peta

 

Kemudian Anda dapat memilih satu atau beberapa lokasi dan menekan tombol untuk menambahkannya ke artikel Anda. Jika Anda tidak menentukan tingkat zoom apa pun, peta akan dimuat secara otomatis agar sesuai dengan area lokasi Anda.
Kode tag yang akan Anda lihat di editor WYSIWYG Anda akan seperti model ini: {mymaplocations mapid width height}

Contoh: {mymaplocation id=1 width=58% height=400px zoom=10 type=google} Kode ini akan menampilkan peta dengan ID lokasi=1, lebar 58%, tinggi 400px, zoom 10 kali, dan tipe Google. Gunakan koma untuk menambahkan lebih dari satu lokasi dalam peta. Contoh: {mymaplocation id=1 width=58% height=400px zoom=10 type=google} ID lokasi = 1, 2, 3.