Pada kesempatan kali ini saya akan menjelaskan bagaimana cara membuat google maps responsive di wordpress. Google maps adalah fasilitas yang sudah di sediakan oleh Google untuk menampilkan peta atau lokasi yang mengacu pada titik koordinat suatu tempat.
Untuk pemasangan nya biasanya menggunakan iframe, dan pada contoh yang saya jelaskan di sini saya akan membuat google maps tersebut menjadi responsive supaya tampil nya tetap bagus ketika dibuka di berbagai resolusi layar, seperti tablet, smartphone dan desktop.
Namun untuk penggunaan pada WordPress biasanya menggunakan plugin yang bisa digunakan untuk melakukan hal tersebut. Akan tetapi lebih baik teman-teman menghindari penggunaan plugin tersebut jika dapat melakukannya secara manual tanpa plugin. Karena menggunakan terlalu banyak plugin tentu bisa membuat website menjadi lambat. Untuk membuatnya secara manual dan tanpa plugin,
Berikut tahapan nya:
- Teman-teman buka file functions.php yang ada di dalam folder theme WordPress tersebut.
- Tambahkan kode seperti di bawah ini:
<?php
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");
?>
- Save, dan dari penambahan kode tersebut sekarang teman-teman sudah bisa dengan mudah menambahkan google maps ke dalam post maupun page. Dengan cara salin kode di bawah ini ke dalam post maupun page, berikut kode nya:
[googlemap src=”URL_GOOGLE_MAP”]
Ganti URL_GOOGLE_MAP dengan URL yang di dapatkan dari Google maps.
Seperti contoh kode yang saya dapat ketika embed google maps adalah( Dumet School ).
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.714137184298!2d106.78254831470099!3d-6.169019995533729!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNsKwMTAnMDguNSJTIDEwNsKwNDcnMDUuMCJF!5e0!3m2!1sen!2s!4v1488006110200" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Maka teman-teman cukup ambil URL nya saja seperti contoh URL di bawah ini:
https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.714137184298!2d106.78254831470099!3d-6.169019995533729!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNsKwMTAnMDguNSJTIDEwNsKwNDcnMDUuMCJF!5e0!3m2!1sen!2s!4v1488006110200
Maka shortcode yang teman-teman tulis di dalam post atau page menjadi seperti contoh kode di bawah ini:
[googlemap src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.714137184298!2d106.78254831470099!3d-6.169019995533729!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNsKwMTAnMDguNSJTIDEwNsKwNDcnMDUuMCJF!5e0!3m2!1sen!2s!4v1488006110200"]
Sampai di sini penjelasan bagaimana cara membuat google maps responsive di wordpress. Semoga Bermanfaat.