Как добавить свой логотип на Яндекс карту
Разработка сайтов на 1С-Битрикс
+7 (391) 234-64-80

Как добавить свой логотип на Яндекс карту

Свой логотип на Яндекс картах

Обязательная разметка

Вам потребуется в обязательном порядке весь код Яндекс карты разместить в диве с id=map. Так же не забывайте указать размеры этого дива, иначе карта может не отобразится.

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

Подключение к API Яндекс карт

Второй шаг - это подключение к API Яндекс карт. Очень важный момент - на других ресурсах отправляют получать API ключ, делать этого не нужно, достаточно просто подключить скрипт так, как указано ниже.

  
    <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
  

Выводим Яндекс карту со своим логотипом

  
<script>
ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map("map", {
        // Координаты центра карты
        center:[55.72418355036728,37.50472259430868],
        // Масштаб карты
        zoom: 16,
        // Выключаем все управление картой
        controls: []
    }); 
            
    var myGeoObjects = [];
    
    // Указываем координаты метки
    myGeoObjects = new ymaps.Placemark([55.72418355036728,37.50472259430868],{
                    balloonContentBody: 'БЦ \'Минская Плаза\'',
                    },{
                    iconLayout: 'default#image',
                    // Путь до нашей картинки
                    iconImageHref: '/assets/adress.png', 
                    // Размеры иконки
                    iconImageSize: [70, 70],
                    // Смещение верхнего угла относительно основания иконки
                    iconImageOffset: [-35, -35]
    });
                
    var clusterer = new ymaps.Clusterer({
        clusterDisableClickZoom: false,
        clusterOpenBalloonOnClick: false,
    });
    
    clusterer.add(myGeoObjects);
    myMap.geoObjects.add(clusterer);
    // Отключим zoom
    myMap.behaviors.disable('scrollZoom');

}
</script>

Что должно получится в итоге

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

  

<div id="map" style="width: 100%; height: 400px">
	<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
	<script>
	ymaps.ready(init);

	function init () {
	    var myMap = new ymaps.Map("map", {
	        // Координаты центра карты
	        center:[55.72418355036728,37.50472259430868],
	        // Масштаб карты
	        zoom: 16,
	        // Выключаем все управление картой
	        controls: []
	    }); 
	            
	    var myGeoObjects = [];
	    
	    // Указываем координаты метки
	    myGeoObjects = new ymaps.Placemark([55.72418355036728,37.50472259430868],{
	                    balloonContentBody: 'БЦ \'Минская Плаза\'',
	                    },{
	                    iconLayout: 'default#image',
	                    // Путь до нашей картинки
	                    iconImageHref: '/assets/adress.png', 
	                    // Размеры иконки
	                    iconImageSize: [70, 70],
	                    // Смещение верхнего угла относительно основания иконки
	                    iconImageOffset: [-35, -35]
	    });
	                
	    var clusterer = new ymaps.Clusterer({
	        clusterDisableClickZoom: false,
	        clusterOpenBalloonOnClick: false,
	    });
	    
	    clusterer.add(myGeoObjects);
	    myMap.geoObjects.add(clusterer);
	    // Отключим zoom
	    myMap.behaviors.disable('scrollZoom');

	}
	</script>
</div>

  


Возврат к списку


Перезвоните мне
Оставьте Ваши контактные данные, мы свяжемся с Вами в ближайшее время
Я согласен на обработку персональных данных
Личный кабинет
Запомнить меня
Забыли свой пароль?
Я согласен на обработку персональных данных.