Делаем черно-белую карту Яндекс для сайта и маркер любой картинкой
Привет! Как сделать карту Яндекса монохромной (черно-белой), а картинки поставить свои и цветные? Небольшим кодом и следуя пункт за пунктом в описании. Поехали! НО! Сначала скажу, что сервис Яндекс.Карты не одобряет модификации своих карт (прописано в соглашении) и для UX такое решение не самое правильное. Такое решение больше для тех, кто за визуальную часть сайта (топим за дизайн).
Эта инструкция написана для работы в платформе Tilda Publishing, но код универсален для любого сайта.
Погнали.
1. Создаем в любой подходящей программе свой маркер на карту. Лично я использую Figma почти для всех задач, связанных с дизайном. Сохраняем его в SVG формате.
2. Открываем Тильду. Добавлен новый блок IM01 (изображение). Вставляем в него наш маркер. Кликаем на текст ссылки и копируем ссылку в буфер (или копипастим куда удобно). Прячем отображение блока, нажав иконку HIDE справа сверху. Она посередине.
4. Добавляем Zero Block. Задаем ему необходимую высоту в настройках. После этого слева сверху нажимаем плюс и добавляем html блок.
5. В настройках этого блока делаем отображение по window — center — center, ширину и высоту блока меняем на 100%. 6. Нажимаем кнопку EDIT CODE и добавляем туда наш код.
<script src="//api-maps.yandex.ru/2.0/?load=package.standard,package.geoObjects&lang=ru-RU" type="text/javascript"></script>
<div id="map" style="width:100%; height:100%;"></div>
<script>ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [55.751979, 37.617499],
zoom: 15
}),
// Создаем метку с помощью вспомогательного класса.
myPlacemark1 = new ymaps.Placemark([55.751979, 37.617499], {
// Свойства.
// Содержимое хинта.
hintContent: 'Надпись, которая всплаывет при наведении на метку'
}, {
// Опции
// Своё изображение иконки метки.
iconImageHref: 'https://static.tildacdn.com/tild3061-3235-4537-b066-616662373363/Group_783.svg',
// Размеры метки.
iconImageSize: [130, 130],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-65, -110]
})
// Добавляем все метки на карту.
myMap.geoObjects
.add(myPlacemark1)
}
</script>
<style>.ymaps-layers-pane {
-webkit-filter: grayscale(100%);
}</style>
7. Правим код под свой маркер. Для начала пропишем путь к картинке маркеру. Если забыли ссылку, откройте скрытый блок IM01 и скопируйте путь к картинке оттуда. Если делаете так, не забудьте потом опять спрятать этот блок.
8. Теперь временно создадим любой блок с картой, чтобы найти навигационные точки. Например блок CN402. Нажимаем на кнопку «контент« этого блока, заходим ниже в меню ТОЧКА НА КАРТЕ 1 и кликаете на ссылку «Найти на карте»
9. В поле поиска на карте вводите нужный адрес и нажимаете ОК. После этого открываете еще раз настройки точки и копируете широту и долготу вашего адреса.
10. Возвращаемся к блоку с кодом и во все места с цифрами широты и долготы вставляете свои значения.
11. Для тото, чтобы всплывал нужный вам текст при наведении на иконку на карте — добавьте текст в строку с hint.
12. Поправляем иконку на карте. Внизу кода есть значения, изменив которые можно изменить размер иконки и подвинуть отображение вашего маркера на карте, если это необходимо.
Итог:
Сохраняем блок. Публикуем страницу и наслаждаемся ЧБ картой со своим цветным маркером.
И последнее. Код взят из сети и немного поправлен под свои нужды. Если вы хотите экспериментировать с цветом карты, дерзайте и выкладывайте свои результаты в комментариях к этому посту! Удачи.
Спасибо Андрею Балыбердину за помощь в правке кода.
Меня можно найти здесь: https://manon.design
Я в Телеграм: @TaoTrip Андрей в Телеграм: @Andrey041
7. Правим код под свой маркер. Для начала пропишем путь к картинке маркеру. Если забыли ссылку, откройте скрытый блок IM01 и скопируйте путь к картинке оттуда. Если делаете так, не забудьте потом опять спрятать этот блок.
8. Теперь временно создадим любой блок с картой, чтобы найти навигационные точки. Например блок CN402. Нажимаем на кнопку «контент« этого блока, заходим ниже в меню ТОЧКА НА КАРТЕ 1 и кликаете на ссылку «Найти на карте»
9. В поле поиска на карте вводите нужный адрес и нажимаете ОК. После этого открываете еще раз настройки точки и копируете широту и долготу вашего адреса.
12. Поправляем иконку на карте. Внизу кода есть значения, изменив которые можно изменить размер иконки и подвинуть отображение вашего маркера на карте, если это необходимо.
И последнее. Код взят из сети и немного поправлен под свои нужды. Если вы хотите экспериментировать с цветом карты, дерзайте и выкладывайте свои результаты в комментариях к этому посту! Удачи.
Я в Телеграм: @TaoTrip Андрей в Телеграм: @Andrey041
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":16,"favorites":103,"reposts":0,"views":48,"hits":38785,"reads":null,"online":0},"dateFavorite":0,"hitsCount":38785,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/design/117708-delaem-cherno-beluyu-kartu-yandeks-dlya-saita-i-marker-lyuboi-kartinkoi","author":{"id":439175,"name":"Александр Киршин","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"0f91f7d2-619e-97be-4711-1f472d670c2d","width":200,"height":200,"size":20152,"type":"jpg","color":"dcd2d1","hash":"","external_service":[]}},"cover":null,"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4988945,"userId":439175,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4988945"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1364858,"userId":439175,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1364858"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":138150,"userId":439175,"count":0,"shareImage":"https://api.vc.ru/achievements/share/138150"}],"lastModificationDate":1764980091,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":199114,"name":"Дизайн","description":"Материалы о красивых вещах, логотипах, веб-дизайне.","uri":"/design","avatar":{"type":"image","data":{"uuid":"81132c2d-ddb6-0127-19d6-e1d1293194b1","width":0,"height":0,"size":1,"type":"jpg","color":"","hash":"","external_service":[]}},"cover":{"type":"image","data":{"uuid":"b8bf3924-2ba4-571c-a7b6-4be86417c6b9","width":960,"height":280,"size":21376,"type":"png","color":"dd6a8c","hash":"","external_service":[]}},"lastModificationDate":1620994027,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"design","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[{"id":1,"count":14}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null,"keywords":[],"media":{"type":"image","data":{"uuid":"ca6e61f7-c874-d7a8-6ad8-fa1cbac13829","width":686,"height":300,"size":421143,"type":"png","color":"e9e9e9","hash":"","external_service":[]}},"customCover":null,"robotsTag":null,"categories":[],"isAnonymized":true}};