Berbagi dan Belajar Ilmu pengetahuan bidang komputer, informatika, multimedia, dan teknologi. Berbagi dan Belajar itu Asyik

Cara Menambahkan Widget Google Maps di Blog

Cara Menambahkan Widget Google Maps di Blog

Cara Menambahkan Widget Google Maps di Blog

Pasang iklanmu 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

Pasang Iklanmu di sini!

Share this:

Share this with short URL: Get Short URL loading short url
Pasang Iklanmu disini !
Blogger
Pilih Sistem Komentar Yang Anda Sukai

No comments

Perhatian!
• Berilah Komentar yang baik, bermutu, dan membangun
• 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.

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