HTML5 & CSS3

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

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.

<body>
	<div id="mapa" class="mapa"></div>
	<div class="formularz">
		<a class="logo" href="http://webroad.pl">
			<img src="img/logo.png" alt="WEBroad.pl - logo">
		</a>
		<form>
			<label for="imie">Imię</label>
			<input type="text" id="imie" placeholder="Podaj swoje imię" autofocus>
			<label for="mail">E-mail</label>
			<input type="email"id="mail" placeholder="Wpisz e-mail zwrotny">
			<label for="tresc">Treść</label>
			<textarea id="tresc"rows="6" cols="50" placeholder="Co chcesz nam powiedzieć?"></textarea>
			<button>Wyślij wiadomość</button>
		</form>
	</div>
</body>

Google Maps API

Załaduj plik JavaScript z Google Maps API.

<script src="https://maps.googleapis.com/maps/api/js"></script>

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

<script>
function initialize() {
	var mapCanvas = document.getElementById('mapa');
	var mapOptions = {
	center: new google.maps.LatLng(53.1256871,18.0362071),
	disableDefaultUI: true,
	zoom: 13,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

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:

disableDefaultUI: true

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

disableDefaultUI: false

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.

map.set('styles', [
{
	"featureType": "water",
	"elementType": "geometry",
	"stylers": [
		{
			"color": "#e9e9e9"
		},
		{
			"lightness": 17
		}
	]
},
{
	"featureType": "landscape",
	"elementType": "geometry",
	"stylers": [
		{
			"color": "#f5f5f5"
		},
		{
			"lightness": 20
		}
	]
},
{
	"featureType": "road.highway",
	"elementType": "geometry.fill",
	"stylers": [
		{
			"color": "#ffffff"
		},
		{
			"lightness": 17
		}
	]
},
{
	"featureType": "road.highway",
	"elementType": "geometry.stroke",
	"stylers": [
		{
			"color": "#ffffff"
		},
		{
			"lightness": 29
		},
		{
			"weight": 0.2
		}
	]
},
{
	"featureType": "road.arterial",
	"elementType": "geometry",
	"stylers": [
		{
			"color": "#ffffff"
		},
		{
			"lightness": 18
		}
	]
},
{
	"featureType": "road.local",
	"elementType": "geometry",
	"stylers": [
		{
			"color": "#ffffff"
		},
		{
			"lightness": 16
		}
	]
},
{
	"featureType": "poi",
	"elementType": "geometry",
	"stylers": [
		{
			"color": "#f5f5f5"
		},
		{
			"lightness": 21
		}
	]
},
{
	"featureType": "poi.park",
	"elementType": "geometry",
	"stylers": [
		{
			"color": "#dedede"
		},
		{
			"lightness": 21
		}
	]
},
{
	"elementType": "labels.text.stroke",
	"stylers": [
		{
			"visibility": "on"
		},
		{
			"color": "#ffffff"
		},
		{
			"lightness": 16
		}
	]
},
{
	"elementType": "labels.text.fill",
	"stylers": [
		{
			"saturation": 36
		},
		{
			"color": "#333333"
		},
		{
			"lightness": 40
		}
	]
},
{
	"elementType": "labels.icon",
	"stylers": [
		{
			"visibility": "off"
		}
	]
},
{
	"featureType": "transit",
	"elementType": "geometry",
	"stylers": [
		{
			"color": "#f2f2f2"
		},
		{
			"lightness": 19
		}
	]
},
{
	"featureType": "administrative",
	"elementType": "geometry.fill",
	"stylers": [
		{
			"color": "#fefefe"
		},
		{
			"lightness": 20
		}
	]
},
{
	"featureType": "administrative",
	"elementType": "geometry.stroke",
	"stylers": [
		{
			"color": "#fefefe"
		},
		{
			"lightness": 17
		},
		{
			"weight": 1.2
		}
	]
}
]);

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.

.mapa {
	height: 100%; 
  	width: 100%; 
  	position: absolute; 
  	top: 0; left: 0; 
  	z-index: 0; 
}

Przygotuj też warstwę formularza wraz z logiem.

.formularz {
	box-sizing: border-box;
	padding: 30px 15px 30px;
	max-width: 300px;
	height: 420px;
	margin: auto;
  	position: absolute;
  	top: 0; left: 0; bottom: 0; right: 0;
	border-radius: 2px;
	background: #fff;
	box-shadow: 0 0 8px rgba(0,0,0,0.1);
	z-index: 1;
}
.logo {
	display: block;
	text-align: center;
	margin-bottom: 20px;
}
.logo img {
	max-width: 60%;
}

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

form label {
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px;
	width: 1px; 
	margin: -1px; 
	overflow: hidden; 
	padding: 0; 
	position: absolute; 
}

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

form input, form textarea, form button {
	box-sizing: border-box;
	clear: both;
	width: 100%;
	padding: 12px;
	margin: 5px 0 5px;
	border: 1px solid #eee;
	border-radius: 2px;
	color: #aaa;
	text-align: center;
	font-family: 'Roboto', sans-serif !important;
	font-size: 0.9em;
}

form button {
	background: #eee;
	cursor: pointer;
	transition: 0.2s;
}

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

form button:hover, form button:focus {
	background: #333;
	color: #eee;
	outline: #555 solid 1px;
}
form input:hover, form textarea:hover, form input:focus, form textarea:focus, a:focus {
	outline: #555 solid 1px;
}

Przydatne odnośniki

Demo Pliki źródłowe

Tagi:formularzGoogle MapsGoogle Maps APIkontakt

komentarzy 10

  • Awatar
    Adam M.

    21 sierpnia 2015 13:59

    Świetne ;)

    Odpowiedz
  • Awatar
    Janusz Kamiński

    21 sierpnia 2015 15:36

    Dzięki! Bardzo użyteczny materiał

    Odpowiedz
  • Awatar
    Maciej

    4 czerwca 2016 09:04

    dzięki :)

    Odpowiedz
  • Awatar
    DakiDollar

    9 lutego 2017 01:51

    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?

    Odpowiedz
    • Awatar
      DakiDollar

      9 lutego 2017 01:59

      sam sobie odpowiedziałem ;P
      przez to że umieszczona jest w ukrytym elemencie przy ładowaniu strony

      Odpowiedz
  • Awatar
    rozzi

    4 marca 2017 15:33

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

    Odpowiedz

Zostaw odpowiedź