JSFiddle - React, Tailwind, and code Playground

by Michael Danilov

HTML

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>

CSS

html, body, #map {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

JavaScript

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map('map', {
        center: [55.755773, 37.617761],
        zoom: 9
    }, {
        searchControlProvider: 'yandex#search'
    }),
        standartPoint = new ymaps.Placemark([55.756014, 37.394229]),
        imgPoint = new ymaps.Placemark([55.749001, 37.839547], {}, {
            iconLayout: 'default#image',
            iconImageHref: 'http://images.moschange.ru/make/pin/f2b5342fe686c04ec7a5a26a87680ba7.jpg',
            iconImageSize: [50, 46],
        });

    myMap.geoObjects.add(standartPoint);
    myMap.geoObjects.add(imgPoint);

    standartPoint.events.add('mouseenter', function (e) {
        e.get('target').options.set('preset', 'islands#greenIcon');
    })
        .add('mouseleave', function (e) {
        e.get('target').options.unset('preset');
    });

    imgPoint.events.add('mouseenter', function (e) {
        e.get('target').options.set('iconImageHref', 'http://images.moschange.ru/make/selected-pin/f2b5342fe686c04ec7a5a26a87680ba7.jpg');
    })
        .add('mouseleave', function (e) {
        e.get('target').options.set('iconImageHref', 'http://images.moschange.ru/make/pin/f2b5342fe686c04ec7a5a26a87680ba7.jpg');
    });
}