Добавляем метку на карту, используя API Яндекс.Карт версии 2.х

Продолжаем изучать особенности API Яндекс.Карт версии 2.х начатый в предидущей заметке «Начинаем изучать API Яндекс.Карт 2.0».

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

Рассмотрим простейший пример добавления метки.

Код примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример добавления метки на карту - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
 
			// Создание метки 
			var myPlacemark = new ymaps.Placemark(
			// Координаты метки
			[56.326944, 44.0075]        
			);
 
		// Добавление метки на карту
		myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

После определения параметров карты, мы создаем нашу метку myPlacemark.

А в качестве параметров передаем координаты метки.

Добавляем метку на карту строкой

myMap.geoObjects.add(myPlacemark);

При просмотре карты мы наблюдаем стандартную метку со стилем по умолчанию.

Существует второй способ добавления метки на карту

Код примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример добавления метки на карту вариант 2 - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
 
				// Создание метки 
				var myGeoObject = new ymaps.GeoObject({
                    // Геометрия.
                    geometry: {
                        // Тип геометрии - точка
                        type: "Point",
                        // Координаты точки.
                        coordinates: [56.326944, 44.0075]
                    }
                });
 
			// Добавление метки на карту
			myMap.geoObjects.add(myGeoObject);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

В этом примере мы определяем геообъект и задаем параметры: тип геометрии Point и координаты точки.

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

Пример кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример добавления метки с текстом - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
 
				// Создание метки 
				var myPlacemark = new ymaps.Placemark(
				// Координаты метки
				[56.326944, 44.0075] , {
                    // Свойства
                    // Текст метки
                    iconContent: 'Нижний Новгород'
                }, {
                    // Опции
                    // Иконка метки будет растягиваться под ее контент
                    preset: 'twirl#blueStretchyIcon'
                });     
 
 
			// Добавление метки на карту
			myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

В этом примере мы задаем параметр iconContent: ‘Нижний Новгород’, а также в опциях метки устанавливаем параметр preset: ‘twirl#blueStretchyIcon’ — иконка синего цвета будет растягиваться, под размещенный в ней контент.

Мы можем вывести подсказку с названием метки при наведении мыши на метку.

Пример кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример добавления метки с подсказкой - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
 
				// Создание метки 
				var myPlacemark = new ymaps.Placemark(
				// Координаты метки
				[56.326944, 44.0075] , {
                    // Свойства
                    // Текст метки
                    hintContent: 'Нижний Новгород'
                });     
 
 
			// Добавление метки на карту
			myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

Следующая возможность — это задание стандартного стиля метки.

Пример кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример добавления метки со стандартной иконкой - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
 
				// Создание метки 
				var myPlacemark = new ymaps.Placemark(
				// Координаты метки
				[56.326944, 44.0075] , {
                    // Свойства
                    // Текст метки
                    hintContent: 'Нижний Новгород'
                }, {
                        preset: 'twirl#redIcon'
                    });     
 
 
				// Добавление метки на карту
				myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

В этом примере стиль для метки задается параметром preset: ‘twirl#redIcon’.

Теперь рассмотрим пример задание собственного значка для метки.

Код примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример добавления метки с собстенным значком - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.315695,44.017063], // Нижний Новгород
                    zoom: 15
                });
 
				// Создание метки 
				var myPlacemark = new ymaps.Placemark(
				// Координаты метки
				[56.315695,44.017063] , {
                    // Свойства
                    // Текст метки
                    hintContent: 'Оперный театр'
                }, {
                    iconImageHref: 'http://webmap-blog.ru/files/gmap/gicon/mm_20_red.png', // картинка иконки
                    iconImageSize: [12, 20], // размеры картинки
                    iconImageOffset: [-6, -10] // смещение картинки
                    });     
 
 
				// Добавление метки на карту
				myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

Здесь параметры нашего значка задаются в опциях метки.

Картинка для иконки, размеры картинки и смещение картинки относительно точки с координатами.

Если Вы хотите использовать тень, то нужно добавить еще несколько параметров:

iconShadow — флаг наличия тени у иконки, значение по умолчанию false;
iconShadowImageHref — URL графического файла тени иконки;
IconShadowImageOffset — Отступ тени иконки;
iconShadowImageSize — Размер тени иконки.

Метку можно сделать перемещаемой по карте, если задать параметр draggable: true.

Пример кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример добавления метки с возможностью перемещения - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
 
				// Создание метки 
				var myPlacemark = new ymaps.Placemark(
				// Координаты метки
				[56.326944, 44.0075] , {
                    hintContent: 'Подвинь меня!'
                }, {
                    draggable: true // Метку можно перетаскивать, зажав левую кнопку мыши.
                });
				// Добавление метки на карту
				myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

Загрузить архив с файлами примеров

  • Гость: Спасибо большое! Очень интересная и полная статья.
  • Гость: А как можно добавить в метку ссылку на сайт?
  • Гость: Да, в балун можно добавлять любой html-код, в том числе и код ссылки: <pre lang="html"> myPlacemark = new ymaps.Placemark([55.7, 37.6], { // Свойства iconContent: 'Щелкни по мне', balloonContentHeader: 'Яндекс', balloonContentBody: '<a href="http://yandex.ru" target="_blank" rel="nofollow">Перейти на сайт</a>' }, { // Опции preset: 'twirl#blueStretchyIcon' // иконка растягивается под контент }); </pre>
  • Гость: Подскажите, можно ли сделать так, чтобы иконка метки формировалась скриптом, как кластер вот в этом примере? http://dimik.github.io/ymaps/examples/piechart-clusterer/index.html
  • Гость: Спасибо! Очень полезная стать. Сколько не смотрел документацию то одно не так, то другое. У вас все четко. Все работает и понятно, куда идти дальше. Спасибо!
  • Виталий Стасюк: А сделать что бы метка менялась при наведении на неё мышкой?
  • Банана: Спасибо за статью! Вот только один вопрос: как можно поменять стиль текста внутри именно метки? Например, цвет текста с черного на белый?
  • Сергей Угольников: Цвет текста в метке поменять нельзя, можно использовать свои иконки для меток.
  • Гость: Здравствуйте. Не подскажете, возможно ли сделать так чтобы клиенты регистрирующиеся на моем сайте при введении адреса автоматически помечались на карте или сами ставили метку, с возможностью корректировки, а потом на общей карте было видно где они все находятся (редактировать точки размещения здесь уже нельзя) но в личном кабинете свое положени на карте надо иметь возможность менять при необходимости. А также на одного регистранта ставить не одну а множество меток с местами их дислокации. Т.Е метки на карте должны быть интерактивные для зарегистрировавшихся пользователей.
  • Гость: а как добавить стандартный blue stretchy icon со смещением?
  • Гость: Пробовал ставить свою метку на карту, по данному примеру не работает. { iconImageHref: 'http://webmap-blog.ru/files/gmap/gicon/mm_20_red.png', // картинка иконки iconImageSize: [12, 20], // размеры картинки iconImageOffset: [-6, -10] // смещение картинки } что бы заработало, необходимо доавать еще один параметр iconLayout: 'default#image',
  • Гость: Спасибо за Ваш комментарий!