Memasang Google Map Pada Postingan Blog

Beberapa waktu yang lalu saya telah membuat Artikel tentang beberapa tempat wisata di Kota Kendari, kota kelahiran saya. Pada artikel tersebut saya memberikan kejelasan tempat dengan menggunkan google map, agar pengunjung bisa langsung melihat sendiri letak geografis dari tempat tersebut. Sempat ada salah satu sobat blogger yang menanyakan cara bagaimana menambahkan google map pada artikel tersebut. Oleh karena itu, pada kesempatan kali ini saya ingin menjelaskan cara memasang Google Map pada postingan. Silahkan disimak tutorialnya.

Cara Memasang Google Map Pada Postingan Blog

1. Silahkan kunjungi https://www.google.co.id/maps/

2. Setelah itu tuliskan nama tempat yang Anda cari pada kotak pencarian.

3. Jika sudah, silahkan pilih gambar gear di sudut bawah.

4. Lalu pilih Share or embed map.

Baca juga : Cara Membuat Link Pop Up

5. Kemudian pilih Embed map lalu Ambil kodenya.

6. Paste di postingan sobat. Perlu di ingat untuk membuat postingan dalam mode HTML jangan Compose karena kode tidak akan aktif bila dalam mode compose.

Bila setelah di publish previewnya akan berantakan. Mungkin seperti gambar berikut?

Membuat Tampilan Google Map Menjadi Lebih Rapih

Caranya sangat mudah, yaitu dengan mengedit kode pada google map. Berikut ini adalah kode dari google map.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63702.10807574123!2d122.38898900000002!3d-3.7266659999999945!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zM8KwNDMnM
zYuMCJTIDEyMsKwMjMnMjAuNCJF!5e0!3m2!1sen!2sus!4v1429179098541" width="600" height="450" frameborder="0" style="border:0"></iframe>

Tambahkan kode berikut pada bagian style

clear: left; float: left; margin-bottom: 1em; margin-right: 1em;

Sehingga kodenya menjadi seperti ini.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63702.10807574123!2d122.38898900000002!3d-3.7266659999999945!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zM8KwNDMnM
zYuMCJTIDEyMsKwMjMnMjAuNCJF!5e0!3m2!1sen!2sus!4v1429179098541" width="600" height="450" frameborder="0" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;border:0"></iframe>

Silahkan lihat hasilnya akan lebih baik dari sebelumnya bukan. Kurang lebih seperti ini.

Saya rasa cukup sekian tutorial kali ini, dengan judul Memasang Google Map Pada Postingan Blog. Semoga dapat bermanfaat bagi Anda yang memiliki blog dengan tema traveling atau feature. Bila masih kurang paham silahkan bertanya dengan berkomentar pada Artikel ini. Saya akan membantu Anda sampai bisa.

Bagikan Artikel ini