Strona kontaktowa z aktywną mapą z Google Maps w tle


21 sierpnia 2015 / Michał Kortas


Google maps as a background

Strona z formularzem kontaktowym nie musi być nudna i przewidywalna. Wpadłem więc na pomysł stworzenia takiej, która jako tło przyjmie aktywną mapę z Google Maps.

Demo Pliki źródłowe

Gotowi na to niewielkie wyzwanie? Zapraszam do lektury.

HTML

Projekt będzie miał 2 warstwy: mapę i formularz z logiem strony, polami tekstowymi i przyciskiem wysyłania.

Google Maps API

Załaduj plik JavaScript z Google Maps API.

W pliku HTML strony dodaj podstawowy skrypt inicjujący mapę.

Ważniejszymi wartościami są: długość i szerokość geograficzna (LatLng), która wskaże odpowiednie miejsce oraz zoom. Eksperymentując z przybliżeniem możesz dopasować widok mapy własnych potrzeb.

W swoim przykładzie usunąłem elementy interfejsu Google Maps dzięki linii:

Jeżeli chciałbyś je przywrócić, zmień wartość tego parametry na:

Spójrz jednak na poniższy zrzut ekranu.

Kolorowa mapa google

Standardowe kolory nie za bardzo nadają się do umieszczania ich w tle. Na szczęście w łatwy sposób możesz zastosować swoją stylistykę.

Własne kolory w Google Maps

Do JavaScript’u dodaj poniższy kod. Wybrałem jasną kolorystykę. Jeżeli szukasz innych kolorów, odwiedź stronę https://snazzymaps.com/, gdzie znajdziesz już przygotowane wcześniej schematy.

Po tym zabiegu mapa zyskała nowe barwy.

Jasna kolorystyka Google Maps

Pozostały jeszcze style CSS.

CSS

Na początek nadaj mapie maksymalne wymiary.

Przygotuj też warstwę formularza wraz z logiem.

Etykiety, jeżeli nie chcesz ich umieszczać w projekcie, możesz spokojnie ukryć przed wzrokiem użytkownika.

Zadbaj o odpowiedni wygląd wszystkich pól formularza.

Dopasuj też ich zachowanie na wybrane akcje użytkownika, korzystając z pseudo-klas hover oraz focus.

Przydatne odnośniki

Demo Pliki źródłowe


Tagi:


12 odpowiedzi na “Strona kontaktowa z aktywną mapą z Google Maps w tle”

  1. Adam M. pisze:

    Świetne ;)

  2. Dzięki! Bardzo użyteczny materiał

  3. Maciej pisze:

    dzięki :)

  4. DakiDollar pisze:

    Fajna, ale nie działa mi, jak odpale ściągniętą ze strony jest ok,
    przekopiowana na moją stronę pokazuje tylko szare pole z resztkami interfejsu
    gryzie sie z bootstrapem? z jQuery?

  5. rozzi pisze:

    Jak z wyświetlić zaznaczenie miejsca, w którym dokładnie znajduje się firma?

  6. Paweł pisze:

    Hej. Odkopię trochę :) Mam problem jak kolega DakiDollar powyżej. Otóż jak wkleiłem mapę z formularzem na swoją stronę to też mam szare tło. Gdzie mogę odnaleźć ten ukryty element przy ładowaniu strony ?
    W firefoxie w „zbadaj element” to mi pokazuje hidden ale gdzie to znajdę żebym mógł to zmienić ?

  7. Freja Draco pisze:

    Może i efektownie to wygląda, ale pytania są dwa:
    – po grzyba śmiecić tonami kodu na coś, co ma robić po prostu za grafikę tła (bo używać się tej mapy zasłoniętej formularzem i tak sensownie nie da),
    – po grzyba używać kodu, który może zachowywać się nieprzewidywalnie i zniknąć nam to piękne tło (zwłaszcza po ostatnich reformach w Google Maps, które obcięły limit darmowych wyświetleń bodaj do 27 tysięcy).

Dodaj komentarz

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