Использование Google-карты в качестве фоновой

Данная демонстрация контактной формы размещена поверх Google карты, которая является фоном для сайта. Тут не используется скриншот с карт Google и с картой можно работать в интерактивном режиме – можно увеличивать и уменьшать масштаб, перетаскивать ее и даже переключаться между режимами "Карта" и "Спутник".

Вся html-структура представлена двумя слоями – картой и формой. Для обоих слоев используется css свойство z-index, причем форма имеет более высокий z-index, чем карта и таким образом карта располагается в фоне.

HTML-код

<div id="googlemaps"></div>
<div id="contactform">
	<!-- Тут размещается код формы или что-то другое -->
</div>

Тут располагаются 2 элемента div. Слою с картой присвоен идентификатор #googlemaps, а форме – #contactform  – все, что будет располагаться внутри #contactform, будет отображено в самой форме. Также можно вставить код Google-форм.

CSS-код

#googlemaps {
	height: 100%;
	width: 100%;
	position:absolute;
	top: 0;
	left: 0;
	z-index: 0; /* Set z-index to 0 as it will be on a layer below the contact form */
}
 
#contactform {
	position: relative;
	z-index: 1; /* z-index должен быть больше, чем у Google Maps */
	width: 300px;
	margin: 60px auto 0;
	padding: 10px;
	background: black;
	height: auto;
	opacity: .45; /* Устанавливаем прозрачность у Google Form */
	color: white;
}

Блок #googlemaps занимает всю ширину и высоту, а у блока #contactform фиксированая ширина. Также можно изменить уровень прозрачности с помощью css-свойства opacity для элемента #contactform тем самым немного изменить прозрачность формы.

Javascript

<!-- Подключаем Google Maps API library  -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 
<script type="text/javascript">
	 
	// Latitude and longitude вашего места
	var position = [48.48679432791985, 35.0393165449218];
	 
	function showGoogleMaps() {
	 
	var latLng = new google.maps.LatLng(position[0], position[1]);
	 
	var mapOptions = {
		zoom: 16, // initialize zoom level - the max value is 21
		streetViewControl: false, // hide the yellow Street View pegman
		scaleControl: true, // allow users to zoom the Google Map
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: latLng
	};
	 
	map = new google.maps.Map(document.getElementById('googlemaps'),
	mapOptions);
	 
	// Show the default red marker at the location
	marker = new google.maps.Marker({
	position: latLng,
	map: map,
	draggable: false,
	animation: google.maps.Animation.DROP
	});
	}
 
	google.maps.event.addDomListener(window, 'load', showGoogleMaps);
</script>

С помощью этого сервиса необходимо найти ширину Latitude и долготу Longitude и заменить координаты в строке 7 (там, где var position = [48.48679432791985, 35.0393165449218];).

Данный код в действии можно посмотреть на jsFiddle.net