Верстка блока контактов с картой

Пример, как вывести Яндекс карту на всю ширину сайта + плавающий блок с контактной информацией.

Комментарии по коду:

  • Блок с текстом расположен абсолютно и не выходит за границы сайта благодаря <div> с классом wrp, у которого задана максимальная ширина 900px.
  • В качестве метки используется внешняя картинка.
  • Метка на карте выводится через геокодирование по адресу.
  • Центр карты немного сдвинут.
<div class="map">	
	<div class="wrp">
		<div class="map-box">
			<h2>Наши контакты</h2>
			<p>г. Москва, Тверская 7</p>
			<p><a href="tel:+7 (495) 123-45-67">+7 (495) 123-45-67</a></p>
			<p><a href="mailto:info@site.com">info@site.com</a></p>
		</div>
	</div>
	<div id="map"></div>
</div>

<script src="//api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script>
<script>
ymaps.ready(init); 
function init(){
	var myMap = new ymaps.Map("map",{center: [55.85,37.45],zoom: 13});
	
	// Элементы управления картой
	//myMap.controls.add("zoomControl").add("typeSelector").add("mapTools");
	
	ymaps.geocode("г. Москва, Тверская 7").then(function (res) {
		var coord = res.geoObjects.get(0).geometry.getCoordinates();
		var myPlacemark = new ymaps.Placemark(coord, {}, {
			iconImageHref: "/img/map.png",
			iconImageSize: [54, 74],
			iconImageOffset: [-27, -74]
		});
		myMap.geoObjects.add(myPlacemark);
		myMap.setCenter(coord);	
			
		// Сдвиг центра карты вправо
		var newcoord = myMap.getGlobalPixelCenter();
		newcoord[0] -= 150;
		myMap.setGlobalPixelCenter(newcoord);				
	});
}
</script>
HTML
.wrp {
	max-width: 900px;
	margin: 0 auto;
	position: relative;
}
.map-box { 
	position: absolute;
	top: 70px;
	left: 20px; 
	padding: 20px;
	background: #fff;
	border: 1px solid #ddd;
	z-index: 100;
	width: 250px;
	box-shadow: -1px -1px 24px 0px rgba(50, 50, 50, 0.5);
}
.map-box p {
	font-size: 18px;
}
#map {
	width: 100%; 
	height: 350px;
}
CSS

Правое расположение

Изменяются только положение у блока .map-box и смещение центра карты влево.

<div class="map">	
	<div class="wrp">
		<div class="map-box">
			<h2>Наши контакты</h2>
			<p>г. Москва, Тверская 7</p>
			<p><a href="tel:+7 (495) 123-45-67">+7 (495) 123-45-67</a></p>
			<p><a href="mailto:info@site.com">info@site.com</a></p>
		</div>
	</div>
	<div id="map"></div>
</div>

<script src="//api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script>
<script>
ymaps.ready(init); 
function init(){
	var myMap = new ymaps.Map("map",{center: [55.85,37.45],zoom: 13});
	
	// Элементы управления картой
	//myMap.controls.add("zoomControl").add("typeSelector").add("mapTools");
	
	ymaps.geocode("г. Москва, Тверская 7").then(function (res) {
		var coord = res.geoObjects.get(0).geometry.getCoordinates();
		var myPlacemark = new ymaps.Placemark(coord, {}, {
			iconImageHref: "/img/map.png",
			iconImageSize: [54, 74],
			iconImageOffset: [-27, -74]
		});
		myMap.geoObjects.add(myPlacemark);
		myMap.setCenter(coord);	
			
		// Сдвиг центра карты влево
		var newcoord = myMap.getGlobalPixelCenter();
		newcoord[0] += 150;
		myMap.setGlobalPixelCenter(newcoord);				
	});
}
</script>
HTML
.wrp {
	max-width: 900px;
	margin: 0 auto;
	position: relative;
}
.map-box { 
	position: absolute;
	top: 70px;
	right: 20px; 
	padding: 20px;
	background: #fff;
	border: 1px solid #ddd;
	z-index: 100;
	width: 250px;
	box-shadow: -1px -1px 24px 0px rgba(50, 50, 50, 0.5);
}
.map-box p {
	font-size: 18px;
}
#map {
	width: 100%; 
	height: 350px;
}
CSS
12.01.2019 , обновлено 17.03.2020

Комментарии

, чтобы добавить комментарий.

Другие публикации

Яндекс Карты: перетаскивание метки по карте
Функция перетаскивания метки по карте и получение адреса и координат будет весьма удобна на сайтах недвижимости,...
28.09.2018
2248
0
Ускорение загрузки Яндекс Карт
Несколько рекомендаций как увеличить скорость загрузки API Яндекс.Карт 2.0.
26.01.2019
6891
+2
Поиск ближайших объектов в БД по координатам
Рассмотрим пример как найти в базе данных соседние объекты по координатам и вывести их на карте Яндекс.
17.09.2019
1100
+1
Как вывести метки на Яндекс.Картах из MySQL+PHP
В статье рассмотрены примеры как вывести метку на карту из БД и вывод других объектов, которые находятся рядом.
07.02.2018
5367
+3
Таблица символов ASCII
Список из 256 символов и их коды в ASCII.
26.11.2019
12706
+3
Таблица символов эмодзи
Полная таблица символов эмоджи и их HTML коды.
12.01.2019
6212
+2