Cara Embed Google Maps Responsive di WordPress Tanpa Plugin

Kemanapun Anda pergi, Google Maps hampir bisa selalu membantu Anda dalam menujukkan jalan. Kemampuannya dalam memberikan arah mempermudah ketika menuju suatu lokasi atau rute.

Salah satu solusi yang paling sering digunakan adalah menambahkan Google Maps pada artikel blog anda. Penggunaan teknologi pemetaan yang nyaman digunakan akan mempermudah dalam menyertakan informasi, kontak, serta arah pada lokasi yang yang Anda pilih. Sehingga navigasi tersebut membantu Anda memperjelas transfer informasi kepada pengunjung blog anda.

Pernahkan Anda mencoba menambahkan Google Maps pada artikel di blog anda? Ada banyak cara sebenarnya, salah satunya adalah menggunakan plugin yang praktis dan cepat, namun penggunaan plugin yang terlalu banyak juga membuat beban server hosting kita menjadi kerepotan.

Dalam artikel ini akan dijelaskan mengenai penambahan peta oleh Google Maps secara manual, tanpa menggunakan plugin, namun tetap membuatnya responsif ketika dilihat dari berbagai perangkat. Jadi ketika dibuka pada resolusi layar yang kecil maka lebar peta akan menyesuaikan dengan layar, kemudian ketika dibuka menggunakan perangkat komputer maka peta akan berukuran sesuai dengan batas layout tema.

Penggunaan Responsive Google Maps sangatlah penting, karena pada masa sekarang ini semua jenis perangkat dalam ukuran layar yang beragam bisa mengakses blog anda. Dalam artikel ini CMS blog yang digunakan adalah WordPress, untuk blog dengan CMS lain belum pernah mencobanya, namun mungkin bisa dilakukan juga karena sama-sama menggunakan kode html.

Sekarang kita mulai langkah-langkahnya, pastikan membacanya dengan teliti agar tidak ada yang keliru.

Cara Mendapatkan Embed Code Google Maps

1. Bukalah Google Maps dan kemudian memasukkan lokasi yang akan Anda gunakan.

2. Gunakan fitur pencarian agar lebih mudah, namun ketika lokasi yang Anda tuju tidak ada, bisa menggunakan titik koordinat atau juga menarik pin lokasi secara manual.

3. Lalu pilihlah “share” (akan muncul pilihan tersebut pada sebelah kanan)

4. Pilih “Embed Map”, lalu salin kode html penyematan tersebut.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3953.405769274648!2d110.35991911425178!3d-7.746713094416537!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a58f197f76b0d%3A0xd4498250338e1c61!2sLorena+Group+-+Agen+Terminal+Jombor!5e0!3m2!1sen!2sid!4v1481012325984" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Menambahkan Peta Google Maps Pada WordPress

Bisa Anda masukkan pada sebuah artikel atau halaman. Terserah Anda untuk memasukkannya pada bagian yang mana.

5. Lalu bukalah tab html editor (text mode), lalu paste pada tempat yang Anda inginkan. Pastikan Anda tidak meletakkan kode penyematan tersebut pada mode visual.

6. Lalu pilihlah “save draft”, kemudian “preview” untuk melihatnya sebelum anda “publish”

Bagaimana? peta dari Google Maps sudah muncul, bisa merespon gerakan tetikus untuk melakukan pembesaran atau menggerakan area peta tersebut. Namun peta tersebut belum bisa menyesuaikan perubahan relosuli layar multi perangkat.

Membuat Agar Peta Tersebut Responsif

Ini merupakan pilihan tambahan yang sangat disarankan bilamana Anda sering menempatkan Google Maps pada artikel anda. Cara ini akan memudahkan dan memuaskan pengunjung anda ketika bernavigasi menggunakan peta pada blog anda.

Perhatikan embed code sebelummnya yang kita pakai dalam memasukkan peta ke dalam wordpress.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3953.405769274648!2d110.35991911425178!3d-7.746713094416537!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a58f197f76b0d%3A0xd4498250338e1c61!2sLorena+Group+-+Agen+Terminal+Jombor!5e0!3m2!1sen!2sid!4v1481012325984" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

7. Cara pertama dalam merubah embed code tersebut adalah dengan memasukkan parameter tambahan sebagai berikut :

<style>
 .google-maps {
 position: relative;
 padding-bottom: 75%; // This is the aspect ratio
 height: 0;
 overflow: hidden;
 }
 .google-maps iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100% !important;
 height: 100% !important;
 }
</style>
 
<div class="google-maps">
 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3953.405769274648!2d110.35991911425178!3d-7.746713094416537!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a58f197f76b0d%3A0xd4498250338e1c61!2sLorena+Group+-+Agen+Terminal+Jombor!5e0!3m2!1sen!2sid!4v1481012325984" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

8. Perhatikan baris ke-4, yaitu padding-bottom :75%. Itu adalah pengaturan aspek ratio antara lebar dan panjang peta. Kemudian pada pada baris ke 12 dan 13, dimunculkan ratio dalam angka 100%, artinya peta akan menyesuaikan dengan piksel layar secara penuh.

Sayangnya parameter tersebut kadang bisa dipakai, dan kadang tidak, tergantung tema yang kita gunakan. Namun solusinya ada pada panduan di bawah ini.

Membuat agar peta tersebut responsif dengan CSS

Penggunaan kode CSS akan melakukan prioritas kode pada tema wordpress anda, jadi ketika wordpress anda menggunakan cara di atas tidak berhasil, maka anda bisa menggunakan cara berikut ini :

9. Masuk ke dalam pengaturan tema wordpress anda, carilah bagian untuk menambahkan kode CSS. Beda tema wordpress tentu saja berbeda lokasi, jadi ketika anda tidak menemukannya, pastikan membaca kembali dokumentasi untuk tema yang anda gunakan tersebut.
Setelah menemukannya, tempelkan kode berikut, lalu simpan.

.responsive-map{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.responsive-map iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

kode yang dimasukkan merupakan penggalan yang telah dimodifikasi dari langkah di atas. Kode yang sederhana bukan?

10. Lalu pada bagian text editor untuk menempelkan kode penyematan Google Maps tersebut, rubahlah menjadi sebagai berikut ini :

<div class="responsive-map">
 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3953.405769274648!2d110.35991911425178!3d-7.746713094416537!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a58f197f76b0d%3A0xd4498250338e1c61!2sLorena+Group+-+Agen+Terminal+Jombor!5e0!3m2!1sen!2sid!4v1481012325984" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Ada penambahan penggunaan <div </div> dengan <iframe src di dalamnya. Jadilah seperti yang di bawah ini.

11. Sekarang coba anda buka peta tersebut dalam berbagai tampilan perangkat, maka peta Google Maps tersebut telah merespon berbagai ukuran layar.

Sekian, semoga tutorial ini bermanfaat untuk menyematkan Peta Google Maps pada blog WordPress anda.
Salam