Memasang Google Maps responsive di postingan WordPress terkadang perlu untuk dilakukan, mulai dari blog pribadi hingga website perusahaan membutuhkan Google maps, kegunaannya adalah untuk menunjukan lokasi yang tepat tentang keberadaan mereka. Google maps umumnya ditaruh di halaman kontak.

Ada beberapa plugin WordPress yang bisa digunakan untuk melakukan hal tersebut. Namun ada baiknya kita menghindari penggunaan plugin jika dapat melakukannya dengan menulis kode sendiri. Menggunakan terlalu banyak plugin tentu bisa membuat website menjadi lambat.

Pada kesempatan kali ini Jurnalweb akan mencoba menjelaskan bagaimana cara membuat shortcode WordPress sederhana untuk mengaktifkan fitur embed Google maps di dalam post atau page WordPress. Google maps biasanya menggunakan iframe, kita akan membuat google maps tersebut menjadi responsive agar tampilannya tetap bagus ketika dibuka di layar yang lebih kecil seperti tablet dan smartphone.

Cara membuat [shortcode] Google Maps di WordPress

1. Buka file functions.php yang ada di folder theme Anda.

2. Tambahkan kode dibawah ini dan save.

<?php
// Google Map embed short code
// Usage: [googlemap src="you_url"]
function GoogleMapEmbed($atts, $content = null) {
   extract(shortcode_atts(array(
      "width" => '100%',
      "height" => '480',
      "src" => ''
   ), $atts));
   return '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.'" ></iframe>';
}
add_shortcode("googlemap", "GoogleMapEmbed");
?>
functions.php view raw

3. Sekarang kita sudah bisa dengan mudah menambahkan google maps ke dalam post atau page. Caranya tinggal menuliskan dengan format berikut ini.

[googlemap src=”URL_GOOGLE_MAP_ANDA”]

Ganti URL_GOOGLE_MAP_ANDA dengan URL yang Anda dapatkan dari Google maps.

– Baca juga: Cara mendapatkan kode embed Google Maps.

Misalnya kode yang didapat ketika embed google maps adalah seperti ini (contoh: lokasi gedung DRP/MPR)

<iframe loading="lazy" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.4156251015884!2d106.79762371452007!3d-6.208783562545754!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f153a35426ef%3A0xf69c935a828d0d3d!2sGedung+DPR%2FMPR+RI!5e0!3m2!1sen!2sid!4v1461729697704" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Maka kita ambil URL nya saja menjadi seperti ini

https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.4156251015884!2d106.79762371452007!3d-6.208783562545754!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f153a35426ef%3A0xf69c935a828d0d3d!2sGedung+DPR%2FMPR+RI!5e0!3m2!1sen!2sid!4v1461729697704

Maka shortcode yang kita tulis di dalam post atau page menjadi seperti ini

[googlemap src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.4156251015884!2d106.79762371452007!3d-6.208783562545754!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f153a35426ef%3A0xf69c935a828d0d3d!2sGedung+DPR%2FMPR+RI!5e0!3m2!1sen!2sid!4v1461729697704"]

Hasilnya nanti akan seperti ini

google maps wordpress shortcode

Selamat mencoba….

Artikel Lain:

Universitas Padjajaran UNPAD15 Website Universitas di Indonesia yang dibuat dengan WordPress 15 Cara Mengamankan Blog WordPress dari Serangan Hacker custom field wordpressCara Membuat dan Menampilkan Custom Field WordPress Contact FormTutorial Cara Membuat Contact Form dengan PHP Terkirim ke Email comment paginationMembuat Pagination Pada Komentar WordPress embed youtubeCara Embed Video YouTube Responsive, Efisien & Tidak Berat backup websiteCara Backup Website dan Database MySQL dengan PHP exec() google maps embed codeCara Mendapatkan Kode Embed Google Maps back to topMembuat tombol scroll ke atas (back to top) dengan jQuery halaman login wordpressCara Mengganti URL wp-admin dan wp-login di WordPress apache xampp virtual hostCara Membuat Virtual Host di XAMPP Windows shorturl bitly phpCara Membuat Short URL dengan PHP dan Bit.ly API