JS/jQuery

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

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

Подробнее по 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>
1

Метка с точкой

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

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

По адресу:

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);
});

Цвета меток:

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);

По адресу:

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);
});

Цвета меток:

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); 

По адресу:

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);    
});    

Цвета меток::

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);   

По адресу:

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);        
});

Цвета меток::

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); 

По адресу:

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); 
});    

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

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);

По адресу:

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);
});    
7

Балуны

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

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

По адресу:

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);
});    

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

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

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

По адресу:

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

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>
24 июля 2018