Коды всех смайликов «ВКонтакте» с обозначениями   •   Online-инструменты
416 просм
0 комм
Поделиться:

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

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

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

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

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

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

<script src="http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>

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], {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], {preset: 'twirl#redDotIcon'}); 
myMap.geoObjects.add(myPlacemark); 
myPlacemark.balloon.open(); 

замените на:

myPlacemark = new ymaps.Placemark([43.238253,76.945465], {}, { 
	iconImageHref: '/images/artem_malcov_ru.png', // Ссылка на изображение 
	iconImageSize: [122, 59], // Размер изображения 
	iconImageOffset: [-3, -42] // Положение изображения 
});
myMap.geoObjects.add(myPlacemark); 

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

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

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

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

0
комментарий
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария