Сама карта вот -
<style> iframe { filter: grayscale(100%); } </style> <script src="https://api-maps.yandex.ru/2.0/?load=package.standard,package.geoObjects&lang=ru-RU" type="text/javascript"></script> <script type="text/javascript"> // Инициализация карты ymaps.ready(init); function init () { //Центрирование и выбор масштаба карты var myMap = new ymaps.Map('map', { center: [55.795472262250385,49.12206202645815], zoom: 18 }); // Создание своей метки var myPlacemark = new ymaps.Placemark( // Координаты метки [55.795472262250385,49.12206202645815] , { // Свойства метки hintContent: 'ООО "Клиника ' //Подсказка при наведении на маркер }, { iconImageHref: '/templates/boxed/images/metka.png', // картинка иконки iconImageSize: [65, 75], // размеры картинки iconImageOffset: [-50, -50] // смещение картинки }); // Добавление метки на карту myMap.geoObjects.add(myPlacemark); //Элементы управления myMap.controls // Кнопка изменения масштаба .add('zoomControl') // Список типов карты .add('typeSelector') // Кнопка изменения масштаба - справа .add('smallZoomControl', { right: 5, top: 75 }) // Стандартный набор кнопок .add('mapTools') //Линейка масштаба .add(new ymaps.control.ScaleLine()); } </script> <style> /*Размер карты*/ #map { width:100%;height:500px } /*Отображение карты в черно-белом цвете */ .ymaps-glass-pane, .ymaps-layers-pane {filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale") !important; /* Firefox 3.5+ Chrome 19+ & Safari 6+ */ -webkit-filter: grayscale(100%) !important; } </style> <div id="map"></div>