JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://api-maps.yandex.ru/2.1/?lang=ru-RU"></script>
<script src="https://yandex.st/share/share.js"></script>
<div id="cityMap"/>
CSS
#cityMap {
width: 600px;
height: 400px;
}
JavaScript
ymaps.ready(init);
function init () {
var myPlacemark, myMap = new ymaps.Map('cityMap', {
center: [55.75, 37.62],
zoom: 12,
type: 'yandex#map'
}, {
searchControlProvider: 'yandex#search'
});
var YaShareBalloonContentLayout = ymaps.templateLayoutFactory.createClass('<div>{{ properties.balloonContent }}</div><div id="ya_share" data-yashareL10n="ru" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir" data-yashareTheme="counter"></div>', {
build: function () {
YaShareBalloonContentLayout.superclass.build.apply(this, arguments);
var yaShareElem = jQuery(this.getElement()).find('#ya_share');
var YaShareInstance = new Ya.share({
element: yaShareElem.attr('id'),
l10n: yaShareElem.data('yasharel10n'),
theme: yaShareElem.data('yasharetheme'),
elementStyle: {
quickServices: yaShareElem.data('yasharequickservices').split(','),
}
});
}
});
window.myObjects = ymaps.geoQuery({
type: "FeatureCollection",
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [55.752131, 37.601519]
},
properties: {
objectType: 'underground',
balloonContent: 'метро Арбатская, Филевская линия',
hintContent: "Метро арбатская"
},
options: {
preset: 'islands#blueDotIcon'
}},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [55.756533, 37.615309]
},
properties: {
objectType: 'underground',
balloonContent:...