Яндекс Карты – метки и балуны

24.07.2018
117139
2 комментария

Сборник примеров установки меток на карту по координатам и адресу, изменение их вида и вывод балунов.

Подробнее по JS API 2.1 можно посмотреть на Яндексе:

В начале подключение скрипта и инициализация:

<div id="map" style="width: 100%; height: 400px;"></div>	

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);		
function init() {
	var myMap = new ymaps.Map("map", {
		center: [55.76, 37.64],
		zoom: 10
	}, {
		searchControlProvider: 'yandex#search'
	});

	// Вывод меток...
}
</script>
HTML
1

Яндекс Карты – Метки с точкой

По координатам

var myPlacemark = new ymaps.Placemark([55.85,37.45], null, {
	preset: 'islands#blueDotIcon'
});
myMap.geoObjects.add(myPlacemark);
JS

По адресу

ymaps.geocode("г.Москва, Химкинский бульвар, д.5").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	var myPlacemark = new ymaps.Placemark(coord, null, {
		preset: 'islands#blueDotIcon'
	});
	myMap.geoObjects.add(myPlacemark);
});
JS

Цвета меток

islands#blueDotIcon islands#darkGreenDotIcon
islands#redDotIcon islands#violetDotIcon
islands#darkOrangeDotIcon islands#blackDotIcon
islands#nightDotIcon islands#yellowDotIcon
islands#darkBlueDotIcon islands#greenDotIcon
islands#pinkDotIcon islands#orangeDotIcon
islands#grayDotIcon islands#lightBlueDotIcon
islands#brownDotIcon islands#oliveDotIcon
2

Яндекс Карты – Круглые метки с точкой

По координатам

var myPlacemark = new ymaps.Placemark([55.86,37.59], null, {
	preset: 'islands#greenCircleDotIcon'
});
myMap.geoObjects.add(myPlacemark);
JS

По адресу

ymaps.geocode("г.Москва, Каргопольская, д.18").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	var myPlacemark = new ymaps.Placemark(coord, null, {
		preset: 'islands#greenCircleDotIcon'
	});
	myMap.geoObjects.add(myPlacemark);
});
JS

Цвета меток

islands#blueCircleDotIcon islands#darkGreenCircleDotIcon
islands#redCircleDotIcon islands#violetCircleDotIcon
islands#darkOrangeCircleDotIcon islands#blackCircleDotIcon
islands#nightCircleDotIcon islands#yellowCircleDotIcon
islands#darkBlueCircleDotIcon islands#greenCircleDotIcon
islands#pinkCircleDotIcon islands#orangeCircleDotIcon
islands#grayCircleDotIcon islands#lightBlueCircleDotIcon
islands#brownCircleDotIcon islands#oliveCircleDotIcon
3

Яндекс Карты – Метки с нумерацией

По координатам

var myPlacemark = new ymaps.Placemark([55.85,37.7], {
	iconContent: '1'
}, {
	preset: 'islands#redIcon'
});
myMap.geoObjects.add(myPlacemark);
JS

По адресу

ymaps.geocode("г.Москва, Большой Лосиноостровский пруд").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	var myPlacemark = new ymaps.Placemark(coord, {
		iconContent: '1'
	}, {
		preset: 'islands#redIcon'
	});
	myMap.geoObjects.add(myPlacemark);    
});
JS

Цвета меток:

islands#blueIcon islands#darkGreenIcon
islands#redIcon islands#violetIcon
islands#darkOrangeIcon islands#blackIcon
islands#nightIcon islands#yellowIcon
islands#darkBlueIcon islands#greenIcon
islands#pinkIcon islands#orangeIcon
islands#grayIcon islands#lightBlueIcon
islands#brownIcon islands#oliveIcon

Круглые метки с нумерацией:

islands#blueCircleIcon islands#darkGreenCircleIcon
islands#redCircleIcon islands#violetCircleIcon
islands#darkOrangeCircleIcon islands#blackCircleIcon
islands#nightCircleIcon islands#yellowCircleIcon
islands#darkBlueCircleIcon islands#greenCircleIcon
islands#pinkCircleIcon islands#orangeCircleIcon
islands#grayCircleIcon islands#lightBlueCircleIcon
islands#brownCircleIcon islands#oliveCircleIcon
4

Яндекс Карты – Метки с текстом

В данном варианте метка тянется по длине текста, переносы строк не поддерживаются.

По координатам

var myPlacemark = new ymaps.Placemark([55.75,37.45], {
	iconContent: 'текст'
}, {
	preset: 'islands#darkOrangeStretchyIcon'
});
myMap.geoObjects.add(myPlacemark);
JS

По адресу

ymaps.geocode("г.Москва, Нижние Мневники").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	var myPlacemark = new ymaps.Placemark(coord, {
		iconContent: 'текст'
	}, {
		preset: 'islands#darkOrangeStretchyIcon'
	});
	myMap.geoObjects.add(myPlacemark);    	
});
JS

Цвета меток:

islands#blueStretchyIcon islands#darkGreenStretchyIcon
islands#redStretchyIcon islands#violetStretchyIcon
islands#darkOrangeStretchyIcon islands#blackStretchyIcon
islands#nightStretchyIcon islands#yellowStretchyIcon
islands#darkBlueStretchyIcon islands#greenStretchyIcon
islands#pinkStretchyIcon islands#orangeStretchyIcon
islands#grayStretchyIcon islands#lightBlueStretchyIcon
islands#brownStretchyIcon islands#oliveStretchyIcon
5

Яндекс Карты – Метки с подсказкой

По координатам

var myPlacemark = new ymaps.Placemark([55.75,37.59], {
	iconCaption: 'подсказка'
}, {
	preset: 'islands#pinkDotIcon'
});
myMap.geoObjects.add(myPlacemark);
JS

По адресу

ymaps.geocode("г.Москва, Большой Николаевский пер.").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	var myPlacemark = new ymaps.Placemark(coord, {
		iconCaption: 'подсказка'
	}, {
		preset: 'islands#pinkDotIcon'
	});
	myMap.geoObjects.add(myPlacemark); 
});
JS

Цвета как у меток с точкой.

6

Метки со своей картинкой

В место метки можно использовать свою картинку, для этого заполняются следующие параметры:

iconLayout Значение default#image или default#imageWithContent
iconImageHref URL файла
iconImageSize Ширина и высота изображения
iconImageOffset Сдвиг изображения
iconContentOffset Сдвиг изображения для меток с текстом

Подробнее в документации на tech.yandex.ru

По координатам

var myPlacemark = new ymaps.Placemark([55.75,37.75], null,{
	iconLayout: 'default#image',
	iconImageHref: "/map.png",
	iconImageSize: [30, 44],
	iconImageOffset: [-15, -44]
});
myMap.geoObjects.add(myPlacemark);
JS

По адресу

ymaps.geocode("г.Москва, ш.Энтузиастов").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	var myPlacemark = new ymaps.Placemark(coord, null,{
		iconLayout: 'default#image',
		iconImageHref: "/map.png",
		iconImageSize: [30, 44],
		iconImageOffset: [-15, -44]
	});
	myMap.geoObjects.add(myPlacemark);
});
JS
7

Яндекс Карты – Балуны

По координатам

var myPlacemark = new ymaps.Placemark([55.65,37.5], {
	balloonContentHeader: "Заголовок",
	balloonContentBody: "Содержимое",
	balloonContentFooter: "Подвал",
	hintContent: "Подсказка"
}, {
	preset: 'islands#yellowDotIcon'
});
myMap.geoObjects.add(myPlacemark);
JS

По адресу

ymaps.geocode("г.Москва, ул.Миклухо-Маклая").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	var myPlacemark = new ymaps.Placemark(coord, {
		balloonContentHeader: "Заголовок",
		balloonContentBody: "Содержимое",
		balloonContentFooter: "Подвал",
		hintContent: "Подсказка"
	}, {
		preset: 'islands#yellowDotIcon'
	});
	myMap.geoObjects.add(myPlacemark);
});
JS

Балун без метки

По координатам

myMap.balloon.open([55.65,37.7], "Содержимое балуна", {
	closeButton: false
});
JS

По адресу

ymaps.geocode("г.Москва, ул.Шоссейная, д.5").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	myMap.balloon.open(coord, "Содержимое балуна", {
		closeButton: false
	});
});
JS
8

1. Метка по адресу со своей иконкой и балуном, карта центрируется по метке.

<div id="map" style="width: 100%; height: 400px;"></div>

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);        
function init() {
	var myMap = new ymaps.Map("map", {
		center: [55.76, 37.64],
		zoom: 10
	}, {
		searchControlProvider: 'yandex#search'
	});

	ymaps.geocode("г. Истра, ул. 2-ая Первомайская").then(function (res) {
		var coord = res.geoObjects.get(0).geometry.getCoordinates();
		var myPlacemark = new ymaps.Placemark(coord, {
			balloonContentHeader: 'ООО "Рога и копыта"',
			balloonContentBody: "г. Истра, ул. 2-ая Первомайская",
			balloonContentFooter: "+7 (495) 777-77-77"
		},{
			iconLayout: 'default#image',
			iconImageHref: "/map.png",
			iconImageSize: [30, 44],
			iconImageOffset: [-15, -44]
		});
		myMap.geoObjects.add(myPlacemark);
		myMap.setCenter(coord, 13);
	});
}
</script>
HTML

2. Вывод меток в разных стилях.

<div id="map" style="width: 100%; height: 400px;"></div>	

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);		
function init() {
	var myMap = new ymaps.Map("map", {
		center: [55.76, 37.64],
		zoom: 10
	}, {
		searchControlProvider: 'yandex#search'
	});
	
	// 1. Метка с точкой.
	var myPlacemark = new ymaps.Placemark([55.85,37.45], null, {
		preset: 'islands#blueDotIcon'
	});
	myMap.geoObjects.add(myPlacemark);
	
	// 2. Круглая метка с точкой.
	var myPlacemark = new ymaps.Placemark([55.86,37.59], null, {
		preset: 'islands#greenCircleDotIcon'
	});
	myMap.geoObjects.add(myPlacemark);
	
	// 3. Метка с нумерацией.
	var myPlacemark = new ymaps.Placemark([55.85,37.7], {
		iconContent: '1'
	}, {
		preset: 'islands#redIcon'
	});
	myMap.geoObjects.add(myPlacemark);    
		
	// 4. Метка с текстом.
	var myPlacemark = new ymaps.Placemark([55.75,37.45], {
		iconContent: 'текст'
	}, {
		preset: 'islands#darkOrangeStretchyIcon'
	});
	myMap.geoObjects.add(myPlacemark);    	
	
	
	// 5. Метка с подсказкой.
	var myPlacemark = new ymaps.Placemark([55.75,37.59], {
		iconCaption: 'подсказка'
	}, {
		preset: 'islands#pinkDotIcon'
	});
	myMap.geoObjects.add(myPlacemark); 
		
	// 6. Метка со своей картинкой.
	var myPlacemark = new ymaps.Placemark([55.75,37.75], null,{
		iconLayout: 'default#image',
		iconImageHref: "/map.png",
		iconImageSize: [30, 44],
		iconImageOffset: [-15, -44]
	});
	myMap.geoObjects.add(myPlacemark);
		
	// 7. Балун.
	var myPlacemark = new ymaps.Placemark([55.65,37.5], {
		balloonContentHeader: "Заголовок",
		balloonContentBody: "Содержимое",
		balloonContentFooter: "Подвал",
		hintContent: "Подсказка"
	}, {
		preset: 'islands#yellowDotIcon'
	});
	myMap.geoObjects.add(myPlacemark);
		
	// 8. Балун без метки.
	myMap.balloon.open([55.65,37.7], "Содержимое балуна", {
		closeButton: false
	});
}
</script>
HTML
24.07.2018, обновлено 08.12.2022
117139
#HTML #JS #Карты #Яндекс
Предыдущая запись Яндекс карты не прямоугольной формы
Следующая запись Яндекс Карты: перетаскивание метки по карте

Комментарии 2

Кирилл Костин Кирилл Костин
15 апреля 2022 в 15:39
Здравствуйте. Подскажите , пожалуйста как интегрировать круглые метки с балунами в я.карту с выпадающим списком городов https://yandex.ru/dev/maps/jsbox/2.1/list_box_layout.
Ответить
Никита Святкин Никита Святкин
27 июля 2023 в 14:10
Здравствуйте, меня интересует иная вещь, как интегрировать в описание фото, картинку или др. изображение
Ответить

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

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

Ускорение загрузки Яндекс Карт
Ускорение загрузки Яндекс Карт
Несколько рекомендаций как увеличить скорость загрузки API Яндекс.Карт 2.0.
28348
+12
Как вывести метки на Яндекс.Картах из MySQL+PHP
Как вывести метки на Яндекс.Картах из MySQL+PHP
В статье рассмотрены примеры как вывести метку на карту из БД и вывод других объектов, которые находятся рядом.
22678
+12
Поиск ближайших объектов в БД по координатам
Поиск ближайших объектов в БД по координатам
Рассмотрим пример как найти в базе данных соседние объекты по координатам и вывести их на карте Яндекс.
10983
+1
База городов, регионов и федеральных округов РФ в MySQL
База городов, регионов и федеральных округов РФ в MySQL
База состоит из трех связанных таблиц, версия от 2016 года.
37142
+5
Список станций Московского метрополитена в PHP-массиве и SQL
Список станций Московского метрополитена в PHP-массиве и SQL
Всего 300 станций включая монорельс и МЦК.
11646
+6
Список городов РФ
Список городов РФ
Города РФ на 2019 год - список, массив, SQL.
8479
+12