Responsywna mapa google na stronę

Responsywna mapa google na stronę

Dziś wstawimy mapę google na stronę, do tego responsywną, będzie skalowała się pod wszelkie rozdzielczości.

Taka mapka przydaje się gdy chcemy klientom pokazać gdzie znajduje się siedziba naszej firmy, sklepu, by mogli szybko znaleźć i dojechać. Można ją powiększać, pomniejszać, przesuwać. Wstawimy na całą szerokość strony.

Najpierw musimy wygenerować mapkę. Wchodzimy na https://www.google.pl/maps i znajdujemy siedzibę naszej firmy. Ustawiamy ją na środek, przesuwając rączką mapę i klikamy przycisk udostępnij:

maps

Potem pojawi się okienko i wybieramy zakładkę „umieść mapę” i kopiujemy link który tam się znajduje.

maps2

W kodzie html, w miejscu gdzie ma być mapka, wstawiamy:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d156400.2074432467!2d20.956818039481448!3d52.22970079988876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471ecc669a869f01%3A0x72f0be2a88ead3fc!2sWarszawa!5e0!3m2!1spl!2spl!4v1467043161269" class="map_big"></iframe>

Usuwamy z kodu:

width="600" height="450" frameborder="0" style="border:0" allowfullscreen

Do powyższego komu iframe dołączamy styl:
class=”map_big”

Ta klasa w pliku styli css wygląda tak:

.map_big{
	width: 100%;
	height: 785px;
	border: 0;
}

width: 100% – ustaliłam szerokość mapki na 100%, czyli na całą szerokość strony
height – należy ustawić wysokość mapki według uznania
border: 0 – usunęłam obramowanie

Mamy gotową mapkę:

maps3

1
Dodaj komentarz

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Kredytolog Recent comment authors
  Subscribe  
najnowszy najstarszy oceniany
Powiadom o
Kredytolog
Gość

Przez długi czas mapa na mojej stronie nie dostosowywała się rozmiarem do urządzeń mobilnych. Dziwi mnie, że Google o tym nie pomyślał. Dobrze, że trafiłem na ten bardzo pomocny poradnik.

Close Menu