Bagaimana Nak Bagi Google Map (Embed) Responsive di Blogger

Ini satu lagi yang aku stumble dengan problem Blogspot. Peta yang aku embed masuk ke dalam Blogger, dia tak automatik responsive.

Maksudnya, bila aku tengok blog aku ni kat skrin yang lebih kecil, gambar peta tu terkeluar melebihi kotak kandungan entri.

Hodoh!

So, after some try and adjust, aku jumpa cara yang hari ini nak kongsikan dengan korang.

Sebelum tu jom kita tengok apa yang aku maksudkan dengan gambar peta tu terkeluar dari kotak entri.

Perasan tak kawasan yang aku letak anak panah tu. Nampak kan yang map tu terkeluar dari kawasan putih untuk kandungan entri tu. 

So, ini lah masalah yang aku nak cuba selesaikan.

Ye ye, aku tau.. akan ada yang cakap "Pakai gambar JPEG untuk peta sudah".

Memang la der. Tapi aku tak nak buat macam tu. Aku nak peta real punya. Jadi bila aku atau pengunjung nak ke tempat tu, boleh direct bukak map dari blog ke Google Map smartphone diorang.

Then Google Map siap bagi turn by turn GPS navigation lagi. Kan mudah :)

So amacam? Minat nak buat? Read on bro.

Langkah-Langkah Buat Google Map Jadi Responsive di Blogger

Ada dua langkah. Yang pertama ialah tambah CSS kod di dalam template dan yang kedua, tambah DIV tag di tempat kita nak letak Google Map embed code tu.

CSS

Korang kena tambah kod CSS di bawah di dalam template blog korang.

Pergi ke Template --> Edit HTML dan CTRL+F

Cari perkataan ini : ]]></b:skin>

Lepas tu, copy kod di bawah dan paste di atas ]]></b:skin> tu

/* Kod Untuk Responsive Google Map */

    .google-maps {
        position: relative;
        padding-bottom: 75%; 
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

/* PendekarLaut.com */

Hasilnya akan jadi macam ni

HTML

Ini part yang lebih senang.

Just letak <div class="google-maps"> sebelum kod Google Map, dan letak </div> selepasnya.

Contohnya:

Tu je.

Hasil Selepas 2 Minit - Jackpot!

Taddaaa, kan dah cun melecun terletak cantik Google Map di situ

Yang sebelah kanan tu, simulate screen kat smarpthone. Yang sebelah kiri pula di tablet atau ipad. Kedua-duanya berjaya resize dengan penuh gaya.

Selamat mencuba :)