Cara Menambahkan Widget Google Maps di Blog

Cara Menambahkan Widget Google Maps di Blog

Cara Menambahkan Widget Google Maps di Blog

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

Bagikan Artikel ini Agar Bermanfaat
Bagikan artikel ini dengan alamat berikut: Get Short URLloading short url
Blogger
Pilih Sistem Komentar Yang Anda Sukai

Tidak ada komentar tentang "Cara Menambahkan Widget Google Maps di Blog"

Perhatian!
• Berkomentarlah relavan dengan artikel
• Dilarang mencantumkan link hidup, promosi, porno, SARA, anarkis, dll
• Komentar yang melanggar akan dihapus tanpa pemberitahuan sebelumnya
Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar

Tampilkan Emoticon

Gunakan konversi parse HTML tool jika ingin menyertakan kode
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box