Все для создания и продвижения сайтов

Верстка, программирование, SEO

Создание карты со своим изображением метки через API Яндекса

10623

Рассмотрим, как добавить метку на картах яндекса, при этом в качестве метки мы будем выводить своё изображение. Данный скрипт построен на API 2.1 Яндекс Карт.

Пример результата:

Создаём свою метку

Подключаем скрипт API Яндекс Карт 2.1 и выводим наш скрипт.

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

<script src="http://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.752161956105276,37.61949517968746],
        // Масштаб, тут все просто
        zoom: 9,
        // Отключаем все элементы управления
        controls: []
    }); 
            
    var myGeoObjects = [];
    
    // Наша метка, указываем коордианты
    myGeoObjects = new ymaps.Placemark([55.800151390638646,37.61400201562497],{
                    balloonContentBody: 'Текст в балуне',
                    },{
                    iconLayout: 'default#image',
                    // Путь до нашей картинки
                    iconImageHref: 'assets/img/address.png', 
                    // Размер по ширине и высоте
                    iconImageSize: [70, 70],
                    // Смещение левого верхнего угла иконки относительно
                    // её «ножки» (точки привязки).
                    iconImageOffset: [-35, -35]
    });
                
    var clusterer = new ymaps.Clusterer({
        clusterDisableClickZoom: false,
        clusterOpenBalloonOnClick: false,
    });
    
    clusterer.add(myGeoObjects);
    myMap.geoObjects.add(clusterer);
    // Отлючаем возможность изменения масштаба
    myMap.behaviors.disable('scrollZoom');

}
</script>    

Добавление нескольких меток

Тут все почти аналогично, рассмотрите на примере:

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

<script src="http://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.752161956105276,37.61949517968746],
        zoom: 7,
        controls: []
    }); 
            
    var myGeoObjects = [];
    
    // Метка 1
    myGeoObjects[0] = new ymaps.Placemark([55.800151390638646,37.61400201562497],{
                    balloonContentBody: 'Текст в балуне',
                    },{
                    iconLayout: 'default#image',
                    iconImageHref: 'assets/img/address.png', 
                    iconImageSize: [70, 70],
                    iconImageOffset: [-35, -35]
    });
    
    // Метка 2
    myGeoObjects[1] = new ymaps.Placemark([56.800151390638646,38.61400201562497],{
                    balloonContentBody: 'Текст в балуне',
                    },{
                    iconLayout: 'default#image',
                    iconImageHref: 'assets/img/address.png', 
                    iconImageSize: [70, 70],
                    iconImageOffset: [-35, -35]
    });
                
    var clusterer = new ymaps.Clusterer({
        clusterDisableClickZoom: false,
        clusterOpenBalloonOnClick: false,
    });
    
    clusterer.add(myGeoObjects);
    myMap.geoObjects.add(clusterer);
    myMap.behaviors.disable('scrollZoom');

}
</script>    

Тут всё просто, пример работает на ура. Если есть вопросы, задавайте.

Широту и долготу можно посмотреть на официальном сайте Яндекса, перейти .

Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.