Это демонстрация контактной формы, которая встраивает карту Google в фоновом режиме. Он не использует статический снимок экрана Google Maps в фоновом режиме, но карта является интерактивной — вы можете увеличивать и уменьшать масштаб, перетаскивать человечка, чтобы включить просмотр улиц, или даже переключаться между режимами просмотра со спутника и карт.

На странице в основном есть два слоя — одна карта, а другая — это форма — и мы используем свойство Z-индекса CSS для определения порядка стека. Форма имеет более высокий Z-индекс, чем Google Maps, и поэтому последний появляется на заднем плане. Давайте посмотрим на реальный код сейчас.
HTML . Есть два элемента DIV — карта будет отображаться внутри элемента с идентификатором #googlemaps, а все, что вы добавляете внутри #contactform, будет отображаться в вашей форме. Вы даже можете встроить сюда форму Google.

<Сильные> CSS — элемент #gOOGLEMAPS занимает всю высоту и ширину страницы, когда #contactform имеет фиксированную ширину. Вы также можете изменить уровень непрозрачности #contactform, чтобы сделать ваши формы слегка прозрачными.
#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; /* The z-index should be higher than Google Maps */
width: 300px;
margin: 60px auto 0;
padding: 10px;
background: black;
height: auto;
opacity:.45; /* Set the opacity for a slightly transparent Google Form */
color: white;
}
JavaScript . Найдите широту и долготу своего места и замените координаты в строке № 7. Затем вы можете скопировать и вставить измененный код JavaScript в нижний колонтитул своей HTML-страницы.



Вы можете обратиться к источнику HTML этой контактной формы для получения полного примера.