Menambahkan peta Google Maps di artikel website CMS Joomla
Menambahkan Peta Google (Google Maps) Di Artikel Website CMS Joomla
Ketika mengunjungi sebuah laman website, terkadang Anda akan melihat sebuah peta (map), baik di dalam artikel atau di bagian lain di laman. Menambahkan peta di artikel terkadang dirasa perlu untuk menyesuaikan dengan kebutuhan. Umumnya, laman web dengan peta di dalamnya dapat ditemukan di situs-situs perusahaan, perguruan tinggi dan juga kantor-kantor pemerintah. Hal akan membantu yang berkepentingan menemukan lokasi dengan mudah dan tepat.

Joomla adalah salah satu aplikasi web Content Management System (CMS) untuk membuat website lebih mudah. Joomla memiliki fitur yang memudahkan Anda menambahkan peta ke dalam artikel. Dengan menggunakan Google Maps, Anda dapat menentukan lokasi tertentu yang diinginkan dan menampilkannya di artikel Joomla. Anda cukup menyalin kode Google Maps yang dihasilkan untuk ditambahkan ke dalam artikel.

Baca artikel:

Pengaturan (setting) Joomla untuk editor default TinyMCE (editor WYSIWYG) tidak membolehkan adanya penambahan kode atau skrip apapun yang berasal dari luar. Kode Google Maps yang ditambahkan ke dalam artikel Joomla menggunakan editor tersebut akan dipotong atau dihapus seluruhnya. Oleh karena itu, banyak pengguna Joomla yang kesulitan untuk menambahkan kode Google Maps ke dalam artikel atau sebagai modul.

Banyak pengguna Joomla kemudian memanfaatkan ekstensi yang berasal dari pihak ketiga untuk memudahkan menambahkan kode atau skrip yang berasal dari luar ke website Joomla. Di sisi lain, penggunakan ekstensi yang berlebihan dapat menurunkan performa website Joomla. Ekstensi yang berasal dari pengembang tidak jelas, kemungkinan juga memiliki celah keamanan atau ada kode jahat yang disisipkan.

Artikel terkait:

Hindari menggunakan ekstensi Joomla berlebihan agar performa website tetap baik. Artikel kali ini menunjukkan kepada Anda cara menambahkan atau menyisipkan kode Google Maps ke dalam artikel Joomla tanpa menggunakan ekstensi dari pihak ketiga. Diasumsikan, Anda sudah membuat artikel yang akan menampilkan Google Maps, bila belum, Anda dapat membuat artikel Joomla menggunakan editor default TinyMCE.

1. Merubah editor default Joomla ke Editor - None.

Joomla memiliki tiga editor bawaan yaitu CodeMirror, None dan TinyMCE. Bila sebelumnya Anda telah membuat artikel Joomla menggunakan editor default TinyMCE, Anda perlu mengganti editor TinyMCE ke editor None ketika menambahkan atau menyisipkan kode Google Maps. Kode yang ditambahkan ke dalam artikel Joomla menggunakan editor TinyMCE akan dipotong atau dihapus seluruhnya.

Mengganti editor default di Joomla tidak sulit. Bila Anda belum mengetahui cara mengganti editor di Joomla, Anda dapat membaca arikel Cara Mengganti Editor Default CMS Joomla. Berbeda dengan editor TinyMCE yang adalah editor WYSIWYG, editor None adalah editor HTML. Membuat artikel di editor None perlu menggunakan elemen atau tag HTML. Editor None juga dapat menerima kode atau skrip yang ditambahkan.

2. Mendapatkan kode Google Maps.

Anda perlu membuat peta lokasi di Google Maps yang ingin ditampilkan di artikel Joomla. Untuk membuat peta lokasi, buka Google Maps melalui link https://www.google.com/maps. Di laman Google Maps yang terbuka, ketikkan lokasi yang diinginkan di kotak teks Search Google Maps dan kemudian tekan tombol keyboard Enter.

Menambahkan menyisipkan kode Google Maps ke artikel Joomla

Untuk mendapatkan kode Google Maps untuk lokasi yang telah ditentukan sebelumnya, klik tombol SHARE.

Menambahkan menyisipkan kode Google Maps ke artikel Joomla

Di jendela Share yang muncul, pastikan Anda berada di tab Embed a map (1), kemudian tentukan ukuran frame Google Maps apakah Small, Medium, Large atau Custom size (2) dan kemudian klik COPY HTML (3) untuk menyalin kode Google Maps.

Menambahkan menyisipkan kode Google Maps ke artikel Joomla

3. Menambahkan kode Google Maps ke dalam artikel Joomla.

Buka artikel Joomla yang akan diberi kode Google Maps. Anda dapat memperhatikan artikel Joomla yang telah dibuka menggunakan editor None (mode HTML). Nampak dalam contoh ada elemen p atau tag <p> untuk membuat paragraf (1). Tentukan posisi dimana Google Maps akan ditampilkan di dalam artikel Joomla (2).

Menambahkan menyisipkan kode Google Maps ke artikel Joomla

Tempelkan kode Google Maps yang telah disalin sebelumnya (1) dan kemudian klik tombo Save & Close (2) untuk menyimpan perubahan. Bila Anda ingin menampilkan Google Maps di posisi tengah, Anda dapat menambahkan <div align="center"> kode Google Maps </div> (3).

Menambahkan menyisipkan kode Google Maps ke artikel Joomla

Jalankan website Joomla kembali dan buka laman artikel yang telah diberi kode Google Map. Anda sekarang dapat melihat Google Maps ditampilkan di artikel Joomla.

Menambahkan menyisipkan kode Google Maps ke artikel Joomla
SILAHKAN BAGIKAN ARTIKEL INI BILA BERMANFAAT
Pin It