Cara Memasang Google Maps di WordPress. WordPress merupakan platform blogging yang mendukung berbagai jenis file dan mendukung berbagai macam embed. Anda dapat menambahkan semua jenis konten ke situs WordPress Anda, anda bisa menambahkan file jenis audio, video, PDF dan Spreadsheets di WordPress.

Selain file Anda juga dapat menggunakan fitur embed untuk memasang status twitter, facebook, instagram dan juga Goolge Maps. Jika Anda pernah mengunjungi website sebuah perusahaan atau website pribadi milik orang lain mungkin pernah melihat dibagian kontak terdapat juga peta, peta yang dipasang tersebut adalah diambil dari Google Maps. Baca ⇒ Cara Menambahkan Lokasi Alamat dan Tempat ke Google Maps.

Jika Anda juga ingin memasang peta lokasi alamat Anda, maka pada artikel ini saya akan menunjukkan kepada Anda cara untuk menambahkan Google Maps di website WordPress. Pada artikel ini saya akan memberikan dua cara sekaligus yakni dengan cara manual dan juga memanfaatkan plugin.

Baca : Plugins Google Untuk Iklan Adsense WordPress

Menambahkan Google Map di WordPress Manual

Untuk melakukannya, pertama kali silahkan untuk mengunjungi situs web Google Maps, dan cukup mengetik alamat lokasi pada kolom pencarian yang terletak disebelah kiri atas dengan alamat yang Anda inginkan untuk menampilkan atau mencari lokasi.

Setelah Anda telah menemukan lokasi, klik tombol Menu icon tiga garis Ξ disebelah kolom pencarian dan pilih share and embed Map (Bagikan atau sematkan peta). Ini akan menampilkan kode embed. Salin kode iframe atau Anda juga dapat mengklik “Ukuran Khusus” untuk menyesuaikan ukuran tampilan peta sesuai dengan ukuran situs Anda.

Jika sudah silahkan paste kode embed tersebut di postingan, halaman, widget atau template. Dan setelah itu jangan lupa untuk menyimpan posting atau halaman dan lihat Google map sudah terpasang di situs WordPress Anda.

Membuat Peta Tampil Responsif

Jika Anda ingin menjadikan tampilan Google Maps dapat tampil secara responsive atau dapat menyesuaikan dengan berbagai macam ukuran layar Anda dapat melakukan kustom pada CSS, dengan ini Anda akan memberikan pengalaman pengguna yang lebih baik.

Dan meskipun pada pengaturan Embed Kode Google Maps sudah terdapat pengaturan lebar dan tinggi pada iframe, Anda harus tetap menggunakan cara ini agar tampil responsive. Sekarang silahkan tambahkan properti CSS ini pada file style.css Anda yang terdapat pada tema Anda atau pada child-theme.

[CSS].responsive-peta {
overflow: hidden;
padding-bottom: 56,25%;
position: relative;
height: 0;
}
.responsive-peta iframe {
kiri: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}[/CSS]

Dan setelah kode diatas Anda tambahkan pada CSS, selanjutnya tambahkan tag class pada kode embed iframe google map di postingan Anda sehingga menjadi seperti berikut :

<div class="responsive-map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3510.126963167523!2d-81.5660680494897!3d28.385232982430246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88dd7ee634caa5f7%3A0xa71e391fd01cf1a0!2sWalt+Disney+World+Resort!5e0!3m2!1sen!2sus!4v1463933469006" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Menambahkan Google Map di WordPress Dengan Plugin

Metode pertama adalah metode pilihan yang bagus, jika Anda hanya ingin menanamkan atau memasang embed Google Map untuk hanya satu lokasi di situs WordPress Anda. Tetapi jika peta memainkan peran penting pada konten utama situs Anda dan Anda perlu sering menambahkan peta di postingan, maka kami sarankan untuk menggunakan plugin MapPress Easy Google Maps.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan MapPress Easy Google Maps Plugin. Mengedit post / halaman di mana Anda ingin menambahkan peta. Scroll ke bawah ke bagian MapPress pada layar posting Anda dan lakukan edit dan klik pada tombol New Map.

Ini akan membuka MapPress editor di mana Anda dapat memasukkan alamat atau klik Lokasi tautan. maka plugin secara otomatis akan mendeteksi lokasi yang Anda ketikkan. Jika sudah ketemu silahkan untuk memberikan judul untuk peta dan pilih ukuran peta sesuai dengan keinginan Anda. Setelah Anda selesai melakukan pengaturan, klik pada tombol “Save” dan kemudian klik tombol “Insert into post” untuk menambahkan peta ke dalam posting Anda. Setelah itu klik Update atau Publish pada postingan Anda dan lihat hasilnya.

Dengan plugin MapPress Anda dapat menambahkan beberapa peta ke posting atau halaman. MapPress juga menambah menu pengaturan plugin di sidebar admin WordPress Anda. Anda bisa melakukan pengaturan tampilan google map dengan klik Settings plugin dan dibagian pengaturan tersebut Anda dapat menyesuaikan jenis peta, Border, alignment, control, dll.

Baca : 10 Tools Google Gratis untuk Para Konten Marketer

Menambahkan Google Maps dalam Widget dan Lightbox

Cara lain yang lebih mudah untuk menambahkan Google Map ke situs WordPress Anda adalah dengan menginstal Google Maps Widget Plugin. Setelah mengaktifkan plugin, Silahkan masuk ke menu Appearance » Widget dan drag dan drop Google Maps Widget ke area sidebar yang Anda inginkan.

Masukkan alamat Peta dalam pengaturan Widget. Anda juga dapat memilih ukuran peta, warna pin, tingkat zoom, dll. Klik pada tab lightbox untuk mengkonfigurasi pengaturan lightbox. Terakhir klik tombol Save untuk menyimpan pengaturan widget Anda. Dan sekarang lihat hasilnya.

Diatas adalah cara untuk memasang Google Maps pada WordPress dengan dua cara baik manual maupun dengan plugin. Semoga artikel ini bermafaat buat Anda dan selamat mencoba. 🙂

Baca : Cara Memasang Google Translate di WordPress

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.

Daftar isi Tutorial WordPress Terlengkap Gratis