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.

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

Ifrod Maksum8 August 2016 at 18:38

biasanya kalo urusan peta saya taruk di bagian "about me"
Ifrod Maksum8 August 2016 at 18:40

biasanya "border: 0" saya ganti "border: none" mas biar lebih ramah lingkungan
Son Agia8 August 2016 at 21:40

Google maps ini biasanya dipake sebagai widget blog ya? Waw info baru. Saya baru tau kalo di Blog bisa pake map juga..
Kang Nurul Iman9 August 2016 at 08:25

Ternyata kalau diblog cukup rumit juga ya kang beda jauh dengan website mudah sekali buatnya.
Effendi Nurdiaman9 August 2016 at 08:57

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 Fhatoni9 August 2016 at 19:49

Nah ini keren dah mas sekarang google maps bisa hadir di situs pribadi. trima kasih kang
Mas Poniran10 August 2016 at 08:50

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 Nastutik10 August 2016 at 09:30

Jadi tertarik
Agar blog makin menarik
Karena ada peta unik
Dari Google maps yang cantik
Rahayu Wiandra10 August 2016 at 10:38

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 aduls11 August 2016 at 15:09

saya ga pernah memperhatikan peta yang saya tempelkan responsif apa engga ya. hehehehe.
berarti selanjutnya harus pake ini prosedurnya
Hape Kece31 January 2017 at 00:56

selamat malam ... alhamdulillah, nemu dan udah bisa praktekin, terima kasih sangat mas, semoga bermanfaat ilmunya

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...