Panduan Lengkap: Cara Menyematkan Google Maps di WordPress

Cara Menyematkan Lokasi Google Maps Tunggal Di WordPress

Mari kita mulai dengan cara paling dasar untuk menampilkan lokasi Google Maps di situs WordPress Anda. Jika Anda hanya ingin menyematkan peta dengan satu lokasi atau tampilan, Anda tidak memerlukan alat atau plugin apa pun – yang Anda perlukan hanyalah menempelkan kode penyematan Google Maps ke situs WordPress Anda .

Berikut cara kerjanya:

Buka situs web Google Maps seperti biasa dan cari lokasi yang ingin Anda sematkan. Anda dapat mencari apa saja. Itu adalah:

• Seluruh negara
• Kota tertentu
• Bisnis tertentu
• Sebut saja

Itu tidak penting!

Setelah Anda memiliki lokasi yang ingin Anda tampilkan di peta Anda, cari tombol Bagikan di bilah sisi kiri:

Anda akan melihat popup kecil muncul. Klik opsi Sematkan peta di sembulan itu:

Kemudian, pilih ukuran yang Anda inginkan dari drop-down. Dan setelah Anda memilih ukuran yang Anda inginkan, salin kode di dalam kotak:

Sekarang, buka posting atau halaman WordPress tempat Anda ingin menyematkan kotak Google Maps.

Di Editor WordPress, alihkan ke tab Teks dan rekatkan kode yang Anda salin dari Google Maps di tempat yang Anda inginkan untuk menampilkan peta Anda:

Sekarang, publikasikan posting Anda seperti biasa dan Anda akan melihat kotak Google Maps Anda di bagian depan situs WordPress Anda:

Cukup mudah, bukan?

Anda juga dapat menggunakan metode serupa untuk menyematkan petunjuk arah Google Maps di WordPress. Satu-satunya perbedaan adalah antarmuka awal. Daripada langsung melihat tombol Bagikan , Anda harus mengeklik ikon hamburger dan memilih opsi Bagikan atau sematkan peta :

Cara Menyematkan Google Maps Dengan Beberapa Penanda Lokasi Ke WordPress

Jika Anda ingin menyematkan kotak Google Maps dengan beberapa penanda lokasi ke WordPress, semuanya sedikit berbeda.

Meskipun saya akan menunjukkan kepada Anda dua plugin Google Maps WordPress untuk membantu Anda melakukannya di bagian berikutnya, Anda sebenarnya tidak memerlukan plugin untuk melakukannya .

Sebagai gantinya, Anda dapat membuat peta Anda sendiri menggunakan Google My Maps dan kemudian menyematkan peta itu di WordPress menggunakan metode yang mirip dengan yang diuraikan di atas.

Untuk memulai, buka Google Petaku dan klik Mulai untuk meluncurkan antarmuka. Di antarmuka, klik opsi Buat Peta Baru :

Kemudian, gunakan antarmuka untuk membangun peta Anda. Mungkin agak sulit untuk memulai – tetapi begitu Anda memahaminya, ini cukup mudah digunakan. Anda dapat mencari sesuatu dengan menggunakan kotak pencarian, dan Anda dapat menambahkan penanda pada peta menggunakan tombol Penanda :

Setelah Anda puas dengan peta Anda, klik ikon Tiga Titik di bagian atas dan pilih Sematkan di situs saya .

Kemudian, seperti sebelumnya, Anda dapat menempelkan kode yang diberikan Google Maps ke dalam tab Teks di Editor WordPress untuk menampilkan peta di situs WordPress Anda.

Plugin WordPress Untuk Membantu Anda Bekerja Dengan Google Maps Lebih Banyak Lagi

Meskipun Anda tidak benar-benar membutuhkan plugin untuk menangani penyematan Google Maps dasar seperti yang saya tunjukkan di atas, plugin dapat berguna jika Anda menginginkan lebih banyak fleksibilitas (atau jika Anda menginginkan cara yang lebih ramah pengguna untuk menerapkan fleksibilitas itu).

Sebagian besar plugin tidak benar-benar melakukan apa pun yang tidak dapat Anda lakukan sendiri dengan minyak siku yang cukup – tetapi mereka membuatnya jauh lebih mudah dan lebih ramah pengguna. Berikut adalah beberapa plugin yang rapi untuk membantu Anda bekerja lebih baik dengan Google Maps.

WP Google Maps

WP Google Maps adalah plugin Google Maps gratis paling populer di direktori plugin WordPress.org.

Ini membantu Anda membuat tampilan Google Maps kustom Anda sendiri menggunakan penanda peta yang Anda pilih dan tema peta yang berbeda. Pada dasarnya, ini adalah implementasi proses yang lebih ramah pengguna yang baru saja saya uraikan di atas.

Satu-satunya downside adalah bahwa versi gratisnya hanya memungkinkan Anda membuat satu peta. Jika Anda membutuhkan banyak peta, Anda harus membeli versi premium atau menggunakan solusi lain.

Untuk memulai, instal dan aktifkan WP Google Maps. Karena terdaftar di WordPress.org, Anda dapat melakukannya langsung dari dashboard WordPress Anda.

Setelah Anda mengaktifkannya, buka opsi Maps baru di sidebar Anda untuk memulai.

Sebelum Anda dapat membuat peta pertama Anda, Anda harus mendapatkan Google Maps JavaScript API Key dan memasukkannya ke dalam pengaturan plugin. Anda dapat melakukannya dengan mengikuti petunjuk berikut:

Setelah memasukkan kunci API, Anda dapat mengedit peta default My first ( ingat – versi gratis plugin ini hanya memungkinkan Anda membuat satu peta ):

Gunakan antarmuka untuk membangun peta Anda. Kemudian, setelah selesai, Anda dapat menyematkannya di mana saja di situs Anda menggunakan kode pendek:

Ini sangat mudah dan fleksibel – satu-satunya downside adalah batasan satu peta dalam versi gratis.

Pembuat Peta

Pilihan bagus lainnya untuk membuat penyematan Google Maps dengan plugin WordPress adalah Maps Builder.

Setelah Anda menginstal dan mengaktifkan plugin, Anda akan mendapatkan tab Google Maps baru di sidebar dasbor Anda. Seperti halnya WP Google Maps, Anda harus menambahkan Google Maps API Key sebelum dapat memulai dengan plugin.

Setelah Anda melakukannya, Anda dapat pergi ke Google Maps → Add New untuk membuat peta baru. Di antarmuka itu, klik tombol Buka Pembuat Peta untuk meluncurkan antarmuka yang ramah pengguna:

Di sana, Anda dapat membuat peta menggunakan bilah sisi plugin:

Setelah selesai, Anda dapat menggunakan kode pendek yang dibuat oleh plugin untuk menyematkan peta di mana saja di situs WordPress Anda.

Pencari Toko WP

Jika Anda secara khusus ingin menggunakan Google Maps untuk menampilkan beberapa lokasi toko di situs WordPress Anda ( keinginan yang sama! ), Anda mungkin lebih baik menggunakan plugin pencari lokasi toko khusus.

Meskipun Anda dapat menemukan beberapa plugin untuk melakukan ini, saya suka WP Store Locator karena fleksibel dan tampak hebat.

Gunakan Modul Google Maps Pembuat Halaman Favorit Anda

Sebagian besar pembuat halaman WordPress menyertakan elemen/modul Google Maps khusus untuk membantu Anda menyematkan konten Google Maps dalam desain Anda.

Misalnya, plugin Divi Builder yang populer menyertakan modul Google Maps yang dapat Anda sesuaikan sedikit melalui antarmuka plugin:

Jadi, jika Anda sudah menggunakan pembuat halaman, periksa untuk melihat apakah pembuat halaman Anda memiliki alat Google Maps sebelum Anda mulai mencari plugin Google Maps khusus,

Tweak Menyenangkan Untuk Pengguna Tingkat Lanjut

Metode ini tingkat lanjut dan memerlukan pengetahuan kode – jadi jika Anda seorang pemula, jangan ragu untuk mengabaikannya.

Tetapi jika Anda tahu cara Anda menggunakan WordPress dan bidang khusus, Anda dapat menggunakan bidang khusus untuk membuat peta secara otomatis berdasarkan skema URL Peta Google Maps.

Misalnya, Anda dapat membuat bidang di backend WordPress di mana pengguna hanya perlu menempelkan alamat ke suatu lokasi.

Kemudian, dengan sedikit pra-pemrosesan untuk menghapus spasi, Anda dapat memasukkan alamat itu ke sesuatu seperti di bawah ini dalam iframe di file template tema Anda:

Dan voila! Yang perlu dilakukan pengguna hanyalah memasukkan alamat di Editor WordPress dan penyematan Google Maps akan secara otomatis muncul di front-end untuk lokasi itu.

Sekali lagi – metode ini pasti membutuhkan pengetahuan dasar tentang PHP dan bidang khusus – tetapi ini adalah peretasan yang keren untuk menghemat waktu.

Membungkus Semuanya

Baik Anda hanya ingin melakukan sesuatu yang mendasar seperti menyematkan lokasi Google Maps biasa ke WordPress atau menjadi lebih mahir dengan beberapa penanda peta atau pembuatan peta otomatis, Anda memiliki banyak pilihan.

Untuk menyematkan peta tunggal, Anda mungkin dapat melewati plugin dan cukup menggunakan kode sematan Google Maps biasa. Tetapi jika Anda ingin membuat peta dengan banyak lokasi dan memiliki kontrol yang mudah atas gaya, dua plugin Google Maps adalah pilihan yang baik.

Dan terakhir, jika Anda menggunakan pembuat halaman, Anda harus memeriksa untuk melihat apakah Anda sudah memiliki elemen Google Maps sebelum beralih ke solusi eksternal.