JSFiddle - React, Tailwind, and code Playground
HTML
<div id="map"></div>
CSS
</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<style>
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.76, 37.64],
zoom: 10
}, {
searchControlProvider: 'yandex#search'
}),
// Создаем геообъект с типом геометрии "Точка".
myGeoObject = new ymaps.GeoObject({
// Описание геометрии.
geometry: {
type: "Point",
coordinates: [55.8, 37.8]
},
// Свойства.
properties: {
// Контент метки.
iconContent: 'Я тащусь',
hintContent: 'Ну давай уже тащи'
}
}, {
// Опции.
// Иконка метки будет растягиваться под размер ее содержимого.
preset: 'islands#blackStretchyIcon',
// Метку можно перемещать.
draggable: true,
zIndex: 10
});
myMap.geoObjects
.add(myGeoObject)
.add(new ymaps.Placemark([55.684758, 37.738521], {
balloonContent: 'цвет <strong>воды пляжа бонди</strong>'
}, {
preset: 'islands#icon',
iconColor: '#0095b6'
}))
.add(new ymaps.Placemark([55.833436, 37.715175], {
balloonContent: '<strong>серобуромалиновый</strong> цвет'
}, {
preset: 'islands#dotIcon',
iconColor: '#735184'
}))
.add(new ymaps.Placemark([55.687086, 37.529789], {
balloonContent: 'цвет <strong>влюбленной жабы</strong>'
}, {
preset: 'islands#circleIcon',
iconColor: '#3caa3c'
}))
.add(new ymaps.Placemark([55.782392, 37.614924], {
balloonContent: 'цвет <strong>детской неожиданности</strong>'
}, {
preset: 'islands#circleDotIcon',
iconColor: 'yellow'
}))
.add(new ymaps.Placemark([55.642063, 37.656123], {
balloonContent: 'цвет <strong>бисмарк-фуриозо</strong>'
...