Собственная пиктограмма метки на Яндекс карте

Яндекс карты — хорошая и полезная вещь. Но при использовании стандартного конструктора карт, возможности юзернейма остаются весьма ограниченными. Сегодня, например, заказчица задала мне задачу — поместить на карту логотип ее фирмы. Сказано — сделано. Подключаем в хэдэре Yandex API и icon_customImage.js — который мы сейчас напишем.

<head>
    <script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
    <script src="адрес, куда вы складываете свои js файлы/icon_customImage.js" type="text/javascript"></script>
</head>

Создаем файлик icon_customImage.js

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [45.002054009562, 41.922407977798], //указываем координаты
            zoom: 18 //указываем приближение карты
        }, {
            searchControlProvider: 'yandex#search'
        }),
        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            hintContent: 'Пивная У Леонидыча',
            balloonContent: 'Пивко'
        }, {
            // Опции.
            // Необходимо указать данный тип макета.
            iconLayout: 'default#image',
            // Своё изображение иконки метки.
            iconImageHref: 'путь к картинке/images/beer.png',
            // Размеры метки.
            iconImageSize: [50, 50],
            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-3, -42]
        });
    myMap.geoObjects.add(myPlacemark);
});

в style.css пишем стили для вашей карты

html, body, #map {
width: 100%;
height: 400px;
padding: 5px;
margin-top: 20px;
border: solid 1px gray;
border-radius: 5px;
}

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

<div id="map">
</div>

Вы великолепны!

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

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