Яндекс карта – как добавить несколько точек

Создаем несколько точек на карте, выбираем центр, зумирование и добавляем цвет выбранным точкам.

Как создать метки на яндекс карте

Для начала пишем HTML:

<div id="maps"></div>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

После подключения скрипта и создания контейнера для карты дадим ей стили:

#maps {
	width: 100%;
	min-height: 500px;
	overflow: hidden;
}

Пишем нашу функцию и выравниваем карту:

ymaps.ready(init);
function init() {
	var myMap = new ymaps.Map("maps", {
		center: [58.957374, 31.340168],
		zoom: 11,
		controls: []
	});
}

maps – это наш id, в котором будет выведена карта, мы его писали в HTML.
center – координаты центра карты
zoom – приближение, чем больше тем ближе.

Теперь добавим пару точек и добавим им красный цвет:

function init() {
	var myMap = new ymaps.Map("maps", {
		center: [58.957374, 31.340168],
		zoom: 11,
		controls: []
	});
	myMap.geoObjects
		.add(new ymaps.Placemark([58.95839, 31.34175], {
			balloonContent: 'Метка 1'
		}, {
			iconColor: 'red'
		}))
		.add(new ymaps.Placemark([58.92897, 31.3882], {
			balloonContent: 'Метка 2'
		}, {
			iconColor: 'red'
		}));
}

balloonContent – добавляет подпись
iconColor – добавляет цвет

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *