Cara Menampilkan Google Map di Website WordPress

Nasikhun A. 27 Sep 2023 3 Menit 0

Advertisements

Cara menampilkan Google Map di website WordPress dapat dilakukan tanpa harus menggunakan plugin dan API Google. Anda dapat melakukannya hanya dengan block editor WordPress saja.

Di tutorial ini, kami menerapkan pemasangan Google Maps pada halaman statis. Jadi, jika sudah membuat halaman statis di WordPress, Anda akan lebih mudah mengikutinya.

Bagaimana cara memasang Google Map di website berbasis WordPress? Kenapa perlu memasang Google Map di website Anda? Simak penjelasan selengkapnya di bawah ini!

Advertisements

Mengapa Google Map di Website WordPress Penting?

Mengapa Anda harus mengetahui cara menampilkan Google Map di WordPress dan menerapkannya? Berikut beberapa alasan yang perlu Anda pertimbangkan:

1.Meningkatkan Kredibilitas Website

Menampilkan lokasi bisnis secara visual dapat membangun kepercayaan dan kredibilitas di mata pengunjung atau pelanggan. Dengan cara memasukkan Google Map di WordPress, tentu pengunjung bisa melihat lokasi bisnis secara lebih jelas.

Advertisements

2. Memudahkan Akses untuk User

Dengan menambahkan Google Map di WordPress, pengunjung dapat dengan mudah mengakses informasi lokasi dan mendapatkan arah untuk mencapai lokasi Anda.

3. Mengoptimasi SEO Lokal

Apabila Anda menerapkan cara membuat Google Map di website, hal ini dapat membantu dalam optimasi SEO lokal sehingga bisnis Anda lebih mudah ditemukan dalam pencarian lokal.

Google Maps juga dapat meningkatkan visibilitas bisnis Anda di hasil pencarian Google, terutama untuk pencarian yang berbasis lokasi. Nanitnya, Anda dapat memantau trafiknya dengan cara memasang Google Analytics di WordPress.

Advertisements

Cara Menampilkan Google Map di Website WordPress

Pada tutorial cara menampilkan Google Map di website WordPress ini, kami membaginya menjadi 3 bagian utama, yakni (1) pembuatan embed link, (2) pemasangan embed di WordPress, dan (3) penyesuaian layout Google Maps di website.

Advertisements

Pada tahap pertama, cara menambah Google Map di WordPress adalah dengan membuat embed link Google Maps. Embed adalah sebuah metode untuk mengintegrasikan konten atau fungsi dari satu sumber ke dalam halaman web.

Berikut langkah untuk memulai cara menampilkan Google Map di website WordPress:

  1. Buka Google Maps dan temukan alaman yang ingin Anda masukkan ke website WordPress. Di sini kami memberi contoh menggunakan alaman PT. Tonjoo Gagas Teknologi.
    Cara Menampilkan Google Map di Website
  2. Jika hasil sudah muncul, klik tombol Share > pada pop up Share yang muncul, klik tab Embed a map.
    Cara Menampilkan Google Map di Website
  3. Klik drop-down ukuran map, Anda bisa memilih Small, Medium, Large atau Custom size. Jika sudah pilih salah satu, kemudian klik Copy HTML.
    Cara Menampilkan Google Map di Website
  4. Simpan text copy HTML ini. Nantinya text ini akan dimasukkan ke website.

Selanjutnya, Anda perlu memasang embed link Google Maps tersebut ke website WordPress. Cara ini lebih mudah apabila Anda menjadi Admin.

Jika posisi Anda bukan Admin, Anda bisa meminta user Admin untuk mengubah user role di WordPress. Sehingga pengaturan pemasangan Google Maps akan lebih mudah.

Advertisements

Jika sudah siap, selanjutnya silakan langsung masukkan embed Google Maps ke website WordPress. Untuk menambahkan block, setidaknya Anda sudah memahami cara menggunakan block editor Gutenberg.

Di sini kami memberikan tutorial untuk menampilkan Google Maps pada homepage website. Bila belum memiliki, Anda bisa coba membuat homepage dengan Gutenberg WordPress, atau menempatkan embed-nya pada widget ataupun halaman lain.

  1. Buka WP Admin website WordPress Anda, kemudian klik menu Pages di sidebar kiri > pilih Homepage.
    Cara Menampilkan Google Map di Website WordPress
  2. Klik [+] pada bagian Homepage yang hendak Anda pasang Google Maps > ketik custom pada search box > pilih block Custom HTML.
    Cara Menampilkan Google Map di Website WordPress
  3. Paste text embed HTML yang telah Anda copy dari Google Maps. Untuk melihat hasilnya, klik Preview.
    Cara Menampilkan Google Map di Website WordPress
  4. Selesai, Anda sudah berhasil menampilkan Google Maps di website WordPress.

Namun, pemasangan Google Maps di website dengan menggunakan embed saat ini tidak ada fitur penyesuaikan width. Sehingga mungkin saja tampilan Google Maps jadi tidak selaras dengan keseluruhan website.

Pro tips: Untuk mengatasinya, Anda bisa membuat embed tersebut menjadi Group. Kemudian Anda bisa menyesuaikan ukurannya dengan ukuran website. Cara singkatnya: Ubah Block Embed menjadi Group > ubah width sesuai dengan ukuran website. Lebih detail silakan baca bagian penyesuaian layout Google Maps di bawah.

Tahap 3: Menyesuaikan Layout Google Maps

Sebagai contoh menyesuaikan layout, di sini kami menggunakan ukuran width website 1200. Maka, untuk membuat Google Maps-nya memiliki ukuran sama, berikut langkah-langkahnya:

  1. Jadikan Google Maps menjadi Group dengan cara klik block Custom HTML > klik List View (1) > klik titik tiga pada block Custom HTML > pilih opsi Group.
    Cara Menampilkan Google Map di Website WordPress
  2. Buka Settings (1) > pada bagian Content dan Wide, masukkan ukuran lebar website. Kami menggunakan ukuran 1200.
    Cara Menampilkan Google Map di Website WordPress
  3. Klik bar pengaturan width yang muncul di atas block > pilih Wide width.
    Cara Menampilkan Google Map di Website WordPress
  4. Selesai, selanjutnya simpan perubahan dan Anda bisa melihat hasilnya di front-end.

Sampai di sini, Anda sudah berhasil memasang Google Map di WordPress dan menyelaraskannya dengan keseluruhan tampilan website. Sehingga website Anda menjadi tampak lebih profesional.

Sudah Berhasil Menampilkan Google Map di Website WordPress?

Itulah cara menampilkan Google Map di website WordPress tanpa harus menggunakan plugin. Tanpa adanya plugin tambahan, tentu tidak membuat website Anda menjadi lambat.

Untuk meningkatkan performa website Anda, terutama jika website tersebut sudah memiliki banyak pengguna, Anda bisa menambahkan fitur Live Chat di website WordPress.

Apabila Anda memiliki pertanyaan, kendala, atau membutuhkan pengembang WordPress atau WooCommerce, silakan hubungi kami melalui Kontak Tonjoo, dan kami akan bantu menyelesaikannya!


Baca artikel terkait WordPress, WooCommerce, Plugin dan pengembangan website lainnya dari Moch. Nasikhun Amin di blog Tonjoo Studio.


 

Last Updated on Oktober 2, 2023 by Nasikhun A.

Bagikan ke:
Diarsipkan di bawah:
Nasikhun A.
Ditulis oleh

Nasikhun A.

Moch. Nasikhun Amin adalah SEO Technical Writer di Tonjoo. Spesialisasi topik yang ditulis meliputi, namun tidak terbatas pada WordPress, WooCommerce, dan Web Development. Setiap konten yang dibuat telah melalui tahap testing dan teknikal review oleh tim software engineer.

Advertisements

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.