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");
?>

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 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….