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

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

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

Для начала пишем 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 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Добавить комментарий

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