Cara Menambahkan Widget Google Maps di Blog

Cara Menambahkan Widget Google Maps di Blog

Cara Menambahkan Widget Google Maps di Blog

Ditulis oleh : April 02, 2017
Cara Menambahkan Widget Google Maps di Blog - Setelah sebelumnya saya membagikan tutorial mengenai Google Maps juga, yaitu Cara Menambahkan Tempat pada Google Maps. Kali ini anda akan saya ajak untuk mengetahui bagaimana cara mendapatkan embed code yang dapat digunakan untuk dipasang pada blog/situs anda.

Kurang lebih penampakannya pada blog akan terlihat seperti ini :


Tertarik untuk memasangnya ? Ikuti tutorial di bawah ini.

1. Pertama, buka Google Maps
2. Cari dan Tandai lokasi / tempat yang anda inginkan

3. Klik tombol Bagikan

4. Akan muncul tampilan Bagikan Tautan dan Sematkan Peta. Klik tab Sematkan Peta
5. Pilih ukuran widget yang anda inginkan, dapat diatur ukuran kecil, sedang, maupun custom size.

5. Copy kode yang ada pada form tersebut dan paste pada HTML anda
(Dapat dipaste langsung pada widget section dengan cara ke Tata Letak > Tambahkan Widget > HTML/Javascipt > Paste kode > Save)

NOTE : 
Akan tetapi form iframe yang disediakan oleh Google ini tidak responsive, coba perhatikan baik-baik kodenya akan terlihat seperti ini :
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3956.7353706099466!2d112.67261511419565!3d-7.383524694672342!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd7e306aa8b182b%3A0xebd6d6605a75052e!2sRizaldi+Priantama+Blog!5e0!3m2!1sid!2sid!4v1491095993437" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Untuk merubahnya menjadi responsive, ganti width="600" menjadi width="100%", agar tampilan Google Mapsnya menjadi responsive

Atau, anda dapat menggunakan kode embed responsive youtube seperti kode dibawah ini
<script>
//<![CDATA[
document.write('<div style="text-align:center;margin:0 auto;width:100%;"><div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0;"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3956.7353706099466!2d112.67261511419565!3d-7.383524694672342!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd7e306aa8b182b%3A0xebd6d6605a75052e!2sRizaldi+Priantama+Blog!5e0!3m2!1sid!2sid!4v1491095993437" style="border:0;position:absolute;top:0;left:0;width:100%;height:100%;" allowfullscreen></iframe></div></div>');
//]]>
</script>
Ganti kode yang saya tandai dengan alamat titik point lokasi anda

Semoga bermanfaat, jika ada hal-hal yang masih belum jelas, silahkan bertanya pada kolom komentar

Terima Kasih

Artikel Baru
Next Post
Selanjutnya
Previous Post


Comment Policy:
Silahkan tuliskan komentar anda yang sesuai dengan topik postingan halaman ini.
Dengan berkomentar, anda dianggap telah memahami Comments Policy. Terima Kasih