JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-migrate-3.3.0.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
</head>
<body>
<div id="map" class="map"></div>
</body>
</html>
CSS
body {
margin:30px;
}
.map {
height: 300px;
border: 16px solid red;
-moz-border-image: url(http://galiy-web.ru/primorie/images/bg/map_frame_bg.png) 16 round round;
-webkit-border-image: url(http://galiy-web.ru/primorie/images/bg/map_frame_bg.png) 16 round round;
-o-border-image: url(http://galiy-web.ru/primorie/images/bg/map_frame_bg.png) 16 round round;
border-image: url(http://galiy-web.ru/primorie/images/bg/map_frame_bg.png) 16 round round;
}
JavaScript
ymaps.ready(init);
var myMap,
myPlacemark;
// Инициализация карты
function init() {
myMap = new ymaps.Map("map", {
center: [44.496141, 34.162030],
zoom: 17,
controls: []
});
// 1 метка
myPlacemark = new ymaps.Placemark(
[44.496141, 34.162030], {}, {
// Иконка кластера
iconLayout: 'default#image',
iconImageHref: 'images/icons/map_pin.svg',
clusterDisableClickZoom: true,
hideIconOnBalloonOpen: false
}
);
var myClusterer = new ymaps.Clusterer({
clusterDisableClickZoom: true
});
myMap.geoObjects.add(myPlacemark);
myMap.behaviors.disable('scrollZoom');
}