Responsywna Mapa Google na Twojej stronie www

Standardowy kod z Mapą Google do umieszczenia na stronie wygląda mniej więcej tak:

[html] [/html]

Nie jest on niestety responsywny, to znaczy, że nie dostosowuje się automatycznie do okna przeglądarki. Tak wklejona mapa wyjedzie poza obszar okna przeglądarki gdy zmiejszymy go do rozmiarów mniejszych niż ustalone w kodzie tj. 916px

Aby uczynić mapę Google responsywną należy dodac do naszego pliku ze stylami następujące wartości:

[css] .google-maps { position: relative; padding-bottom: 75%; // Tutaj regulujemy wysokość height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } [/css]

Następnie sam kod mapy zamknąć w DIV-ie z klasą google-maps:

[html]<div class=”google-maps”> <iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d81862.85876077056!2d20.145891804437465!3d50.11971108948787!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471649c2bca563b5%3A0xa6398b23a98494b9!2stech-sas!5e0!3m2!1spl!2spl!4v1389094245684″ width=”916″ height=”200″ frameborder=”0″></iframe></div>[/html]

I już…