Cara Menambahkan Peta Google Maps Responsive ke Website atau Blog

Sepertinya untuk sekarang ini punya tampilan website/blog yang resposive seperti menjadi sebuah keharusan, sehingga para web master mau tidak mau harus bisa membuat tampilan websitenya menjadi Responsive. Sebelumnya Saya pernah membagikan tentang bagimana Cara Membuat Navigasi Menu Website Responsive , nah sekarang Saya ingin membagikan sebuah cara tentang bagimana membuat tampilan Google Maps yang ditambahkan ke Website atau blog menjadi Responsive.

Untuk membuat tampilan dari peta Google Maps yang kita tambahkan ke blog/website menjadi Responsive, kita hanya perlu sedikit menambahkan/membuat kode CSS. Pada tutorial kali ini Saya ingin membuat tampilan peta responsive pada blog, jadi yang perlu Saya lakukan hanyalah melakukan Edit HTML lalu menambahkan beberapa susunan CSS.

Berikut adalah Cara Menambahkan Peta Google Maps Responsive ke Website atau Blog.

Masuk ke Blog, pilih menu Template > Edit HTML

Cari kode <b:skin><![CDATA[/* atau supaya lebih cepat tekan CTRL+F lalu tambahkan kode di bawah ini tepat dibawahnya atau taruh saja diantara susunan CSS yang sudah ada

/*CSS PETA RESPONSIVE */
.peta-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.peta-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Simpan template

Langkah selanjutnya kita lakukan iframe/embed sebuah peta yang ingin kita tambahkan ke blog, kurang lebih nanti kodenya seperti berikut

<iframe allowfullscreen="" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3953.852157993069!2d108.49361531477754!3d-7.6990103944501005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6595959d9a9d33%3A0x2b7b277d2edbaf7c!2sPangandaranlife.com!5e0!3m2!1sen!2s!4v1470647116998" style="border: 0;" frameborder="0" height="450" width="600"></iframe>

Misal kali Saya ingin menambahkan peta tersebut ke sebuah laman di blog, maka Saya hanya cukup membuat laman baru lalu menempel kode tersebut dalam mode HTML, dengan menggunakan tag <div> dan melakukan penggilan class "Peta Responsive" dari tag tersebut, jadi nanti kodenya akan terlihat seperti berikut

<div class="peta-responsive">
<iframe allowfullscreen="" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3953.852157993069!2d108.49361531477754!3d-7.6990103944501005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6595959d9a9d33%3A0x2b7b277d2edbaf7c!2sPangandaranlife.com!5e0!3m2!1sen!2s!4v1470647116998" style="border: 0;" frameborder="0" height="450" width="600"></iframe></div>

Untuk melihat hasilnya, mungkin Anda perlu mencobanya sendiri.

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simpel

15 Responses to "Cara Menambahkan Peta Google Maps Responsive ke Website atau Blog"

Ifrod MaksumAugust 8, 2016 at 6:38 PM

biasanya kalo urusan peta saya taruk di bagian "about me"
Ifrod MaksumAugust 8, 2016 at 6:40 PM

biasanya "border: 0" saya ganti "border: none" mas biar lebih ramah lingkungan
Son AgiaAugust 8, 2016 at 9:40 PM

Google maps ini biasanya dipake sebagai widget blog ya? Waw info baru. Saya baru tau kalo di Blog bisa pake map juga..
Kang Nurul ImanAugust 9, 2016 at 8:25 AM

Ternyata kalau diblog cukup rumit juga ya kang beda jauh dengan website mudah sekali buatnya.
UnknownAugust 9, 2016 at 8:57 AM

Wah ini boleh banget nih di praktekan bagi blog jualan seperti saya biar pelanggan tahu saya berada tepat dimana :) selain itu untuk menghindari fitnah dari tipu menipu gtu :)
Imron FhatoniAugust 9, 2016 at 7:49 PM

Nah ini keren dah mas sekarang google maps bisa hadir di situs pribadi. trima kasih kang
Mas PoniranAugust 10, 2016 at 8:50 AM

pertamax dulu mas,

sebenarnya soal yang beginian saya kurang begitu paham, jadi ijin simak dulu aja mas, siapa tahu nanti membutuhkannya jadi tinggal cari diblog ini aja
Anisayu NastutikAugust 10, 2016 at 9:30 AM

Jadi tertarik
Agar blog makin menarik
Karena ada peta unik
Dari Google maps yang cantik
AdminAugust 10, 2016 at 10:38 AM

saya blum ad kebutuhan sih mau masang google maps buat apaan di blog. hehe
tpi google maps emng membantu banget sih, klo gk ad google maps, mgkn perjalanan kami kmren bakal kesesat saat ke mangrove. :D
Mangs AbdulAugust 11, 2016 at 3:09 PM

saya ga pernah memperhatikan peta yang saya tempelkan responsif apa engga ya. hehehehe.
berarti selanjutnya harus pake ini prosedurnya
AdminJanuary 31, 2017 at 12:56 AM

selamat malam ... alhamdulillah, nemu dan udah bisa praktekin, terima kasih sangat mas, semoga bermanfaat ilmunya
Indra Kusuma SejatiJune 6, 2017 at 12:54 AM

Bisa di coba untuk meletakan google maps di blog kesayangan kita ya kang.
Toko bukuDecember 21, 2017 at 7:17 PM

Alhamdulillah....bisa mudah dipraktekkan
bengkel pagJanuary 19, 2018 at 10:09 AM

kalo saran saya misalkan mau taruh di website. untuk width nya pake % aja.. contoh width=100% . biar bisa menyesuaikan ukuran layar. makasi tutor nya gan. sangat membantu
Dede lesieFebruary 13, 2018 at 10:54 AM

alhamdulilah ya allah berhasil, thank 4G gan