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ż…
Super. Wszystko działa bez zarzutów. Dzięki !
Witam, responsywna jest, ale jaki w tym cel jeśli w smartfonie gubi pinezkę z oznaczeniem mojego miejsca,i odwiedzający nie widzi lokalizacji 🙂
Mi udało się zrobić coś takiego:
http://www.mapa-google.pl/
Wydaję mi się, że jest mapa google jest responsywna, aczkolwiek przy otwieraniu strony na małym ekranie menu trochę zasłania mapę
Daj sobie w
#footer-container padding-right:0px;Problem zniknie.
Dzięki wielkie!