Артём Мáлков

Подробная инструкция по добавлению Яндекс.Карты на свой сайт

28 мар0 комм

Думаю, что на всех сайтах, ведущих коммерческую деятельность, существует раздел контактной информации или информации о компании. Без наличия карты, помогающей сориентироваться вашим клиентам, сайт сильно проигрывает в удобстве для пользователя.

Подробная инструкция по добавлению Яндекс.Карты на свой сайт

Сервисов, бесплатно предоставляющих карты, множество, но я бы хотел остановиться сегодня на Яндекс.Картах. Не буду рассматривать вариант создания карт через простой конструктор, а поскольку мы с вами в какой то степени вебмастера, расскажу, как внедрить карту от Яндекс.Карт с помощью API.

Добавление Яндекс.Карты на свой сайт

1. Итак, первое, что вам необходимо сделать – это перед закрывающим тегом </head> вашего сайта подключить сам API Яндекс.Карт:

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=API_KEY" type="text/javascript"></script>

Обратите внимание, что API_KEY в ссылке нужно заменить на свой, иначе карта будет серая (новые правила Яндекса). Получить его можете здесь. На момент написания статьи - получение бесплатное.

2. В нужное место на вашем сайте вставьте код, где будет отображаться карта:

<div id="map"></div>

3. В файл стилей (в самый конец) вставьте:

.ya_map {
	font-family: arial;
	font-size: 12px;
	color: #454545;
}
 
#map {
	width: 660px;
	height: 300px;
}

Здесь:

.ya_map – это стиль текста, который будет отображаться у подписи на карте, а
#map – размер карты.

4. И под конец одним из самых важных шагов будет добавление перед закрывающим тегом </body> скрипта с настройками:

<script type="text/javascript">

	ymaps.ready(init); 
	var myMap;
	
	function init() {
	
		myMap = new ymaps.Map("map", {
			center: [43.238253, 76.945465], // Координаты центра карты
			zoom: 13 // Маштаб карты
		}); 
	
		myMap.controls.add(
			new ymaps.control.ZoomControl()  // Добавление элемента управления картой
		); 
	
		myPlacemark = new ymaps.Placemark([43.238253,76.945465], { // Координаты метки объекта
			balloonContent: "<div class='ya_map'>Заезжайте в гости!</div>" // Подсказка метки
		}, {
			preset: "twirl#redDotIcon" // Тип метки
		});
		
		myMap.geoObjects.add(myPlacemark); // Добавление метки
		myPlacemark.balloon.open(); // Открытие подсказки метки
		
	};
	
</script>

С ним-то мы и будем сейчас работать.

Настройка Яндекс.Карты

Из всего этого кода нам нужно изменить пару строк, которые прокомментированы.

1. Начнем с адреса. Для того чтобы вам получить координаты нужного адреса, зайдите сюда. На открывшейся карте введите нужный вам адрес. После чего, найдя объект на карте, вы получите его координаты.

Подробная инструкция по добавлению Яндекс.Карты на свой сайт

Для настройки скрипта нам нужны координаты метки + масштаб. Копируете и вставляете их в соответствующее место в скрипте.

Обратите внимание, что сначала вам нужно определиться с масштабом, а только потом копировать координаты метки, потому что при изменении масштаба координаты метки меняются.

2. Далее приступим к настройке вида метки. Здесь есть несколько вариантов решений.

Либо вы заменяете надпись в скрипте и оставляете все как есть – в таком случае стиль у вас будет как на первом изображении.

Либо вы можете вовсе убрать надпись и оставить стандартную метку. Список всех доступных меток вы можете найти в официальной документации Яндекс.Карт.

Подробная инструкция по добавлению Яндекс.Карты на свой сайт

Для этого в скрипте вам необходимо:

myPlacemark = new ymaps.Placemark([43.238253,76.945465], { // Координаты метки объекта
	balloonContent: "<div class='ya_map'>Заезжайте в гости!</div>" // Подсказка метки
}, {
	preset: "twirl#redDotIcon" // Тип метки
});

myMap.geoObjects.add(myPlacemark);
myPlacemark.balloon.open();

заменить на:

myPlacemark = new ymaps.Placemark([43.238253, 76.945465], {}, {  // Координаты метки объекта
	preset: "twirl#skatingIcon" // Тип метки
});

myMap.geoObjects.add(myPlacemark);

Здесь twirl#skatingIcon – название стиля метки.

Либо вы можете вставить свой логотип или нужную картинку.

Подробная инструкция по добавлению Яндекс.Карты на свой сайт

Для этого

myPlacemark = new ymaps.Placemark([43.238253, 76.945465], { // Координаты метки объекта
	balloonContent: "<div class='ya_map'>Заезжайте в гости!</div>" // Подсказка метки
}, {
	preset: "twirl#redDotIcon" // Тип метки
});

myMap.geoObjects.add(myPlacemark);
myPlacemark.balloon.open();

замените на:

myPlacemark = new ymaps.Placemark([43.238253, 76.945465], { // Координаты метки объекта
	balloonContent: "<div class='ya_map'>Заезжайте в гости!</div>" // Подсказка метки
}, {
	iconLayout: "default#image",
	iconImageHref: "/images/pandoge_com.png", // Ссылка на изображение 
	iconImageSize: [122, 59], // Размер изображения 
	iconImageOffset: [-3, -42] // Положение изображения 
});

myMap.geoObjects.add(myPlacemark);
myPlacemark.balloon.open();

3. Размеры карты. Как говорилось ранее, за размер карты отвечает стиль:

#map {
	width: 660px;
	height: 300px;
} 

Здесь вы задаете нужный вам размер в пикселях, либо, если хотите сделать карту на всю ширину/высоту, указываете проценты.

На этом базовую работу с Яндекс.Картами я заканчиваю. Урока вполне хватит для того, чтобы преобразить соответствующий раздел с помощью карты. Позднее мы вернемся к этой теме и рассмотрим еще несколько возможностей Яндекс.Карт.

Рекомендуем к просмотру
Управление API-ключами Яндекс.Карт: добавление, ограничение использования, блокировка
Посты
Как поставить несколько меток на «Яндекс.Карту» через API?
Статьи и советы
Как подключить «Яндекс.Метрику» к сайту в WordPress?
Статьи и советы
0
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Подняться наверх
«Pandoge» - помощник вебмастера