Cara Menambahkan Widget Google Maps di Blog
RizaldiPriantama.com adalah blog yang berisikan cerita dan informasi yang menarik untuk dibaca

Cara Menambahkan Widget Google Maps di Blog

Cara Menambahkan Widget Google Maps di Blog

Cara Menambahkan Widget Google Maps di Blog

Iklan di sini
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

Iklan di sini

Share this:

Share this with short URL: Get Short URL loading short url
Iklan di sini
Disqus
Blogger
Pilih Sistem Komentar Yang Anda Sukai

3 komentar

terimaksih pak rizal ,sangat membantu sekali artikelnya. semoga sukses selalu .saluttt

Balas

Sama-sama, senang bisa membantu :)
Semoga kita selalu diberi kesuksesan
Aamiin

Balas

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

Gunakan konversi 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