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.

  1. Masuk ke Blog, pilih menu Template > Edit HTML  
  2. 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;
    }
    
  3. Simpan template
  4. Langkah selanjutnya kita lakukan iframe/embed sebuah peta yang ingin kita tambahkan ke blog, kurang lebih nanti kodenya seperti berikut
    melakukan embed 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>

  5. 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.

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

  1. biasanya kalo urusan peta saya taruk di bagian "about me"

    ReplyDelete
  2. biasanya "border: 0" saya ganti "border: none" mas biar lebih ramah lingkungan

    ReplyDelete
  3. Google maps ini biasanya dipake sebagai widget blog ya? Waw info baru. Saya baru tau kalo di Blog bisa pake map juga..

    ReplyDelete
  4. Ternyata kalau diblog cukup rumit juga ya kang beda jauh dengan website mudah sekali buatnya.

    ReplyDelete
  5. 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 :)

    ReplyDelete
  6. Nah ini keren dah mas sekarang google maps bisa hadir di situs pribadi. trima kasih kang

    ReplyDelete
  7. 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

    ReplyDelete
  8. Jadi tertarik
    Agar blog makin menarik
    Karena ada peta unik
    Dari Google maps yang cantik

    ReplyDelete
  9. 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

    ReplyDelete
  10. saya ga pernah memperhatikan peta yang saya tempelkan responsif apa engga ya. hehehehe.
    berarti selanjutnya harus pake ini prosedurnya

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

    ReplyDelete
  12. Bisa di coba untuk meletakan google maps di blog kesayangan kita ya kang.

    ReplyDelete
  13. Alhamdulillah....bisa mudah dipraktekkan

    ReplyDelete
  14. 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

    ReplyDelete
  15. alhamdulilah ya allah berhasil, thank 4G gan

    ReplyDelete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin