Responsywna Mapa Google na Twojej stronie www

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

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

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:

    .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;
    }

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

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

I już…

4 thoughts on “Responsywna Mapa Google na Twojej stronie www”

  1. Witam, responsywna jest, ale jaki w tym cel jeśli w smartfonie gubi pinezkę z oznaczeniem mojego miejsca,i odwiedzający nie widzi lokalizacji 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *