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

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

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

Вам потребуется в обязательном порядке весь код Яндекс карты разместить в диве с 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>

Заказать звонок