Cara Membuat Google Maps Responsive Di WordPress
Di kesempatan kali ini saya akan menjelaskan bagaimana cara merancang google maps memiliki tampilan yang dinamis di wordpress. Google maps yaitu fasilitas yang telah di sediakan oleh Google bagi menampilkan peta atau lokasi yang mengacu di titik koordinat suatu tempat.
Bagi pemasangan nya biasanya menggunakan iframe, dan di contoh yang saya jelaskan di sini saya akan merancang google maps tersebut menjadi memiliki tampilan yang dinamis supaya tampil nya tetap bagus ketika dibuka di beragam resolusi layar, seperti tablet, smartphone dan desktop.
Namun bagi pemakaian di WordPress biasanya menggunakan plugin yang dapat digunakan bagi mengerjakan hal tersebut. Akan tetapi lebih bagus teman-teman menghindari pemakaian plugin tersebut apabila dapat melakukannya secara manual tanpa plugin. Karena menggunakan terlalu banyak plugin tentu dapat merancang situs menjadi lambat. Bagi membuatnya secara manual dan tanpa plugin,
Berikut tahapan nya:
- Teman-teman buka file functions.php yang terdapat di pada 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 kini teman-teman telah dapat dengan gampang menambahkan google maps ke pada post maupun page. Dengan cara salin kode di bawah ini ke pada 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 yaitu( Source Code Aplikasi ).
<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>
Karenanya teman-teman lumayan 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
Karenanya shortcode yang teman-teman tulis di pada 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]
Hingga di sini penjelasan bagaimana cara merancang google maps memiliki tampilan yang dinamis di wordpress. Semoga Bermanfaat.
Sumber https://kursuswebsite.org
