JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script src="http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"> </script>
</head>
<body>
<div style="width: 450px; height: 450px;" data-name="БЕРГ <br/> ул. 2-я Мелитопольская, дом 4А, стр. 40" data-latitude="55.534624" data-longitude="37.573993" class="map">
</div>
</body>
</html>
JavaScript
$(function(){
ymaps.ready(function() {
$('.map').each(function() {
var latitude = $(this).attr('data-latitude');
var longitude = $(this).attr('data-longitude');
var name = $(this).attr('data-name');
if (typeof latitude == "undefined"
|| typeof longitude == "undefined") {
return true;
}
var myMap = new ymaps.Map(this, {
center: [latitude, longitude],
zoom: 15
}, {
projection: ymaps.projection.sphericalMercator,
tileTransparent: true,
maxZoom: 16,
minZoom: 10
}),
myPlacemark = new ymaps.Placemark([latitude, longitude], {
balloonContentBody: name
}, {
// Опции
preset: 'twirl#blueStretchyIcon'
});
myMap.controls
.add('zoomControl')
.add('typeSelector')
.add('mapTools');
myMap.geoObjects
.add(myPlacemark);
myMap.layers.add(new ymaps.Layer(
function(tileNumber, tileZoom) {
if (
(tileZoom == 15 && (tileNumber[0] >= 19803 && tileNumber[0] <= 19805) && (tileNumber[1] >= 10277 && tileNumber[1] <= 10279)) ||
(tileZoom == 16 && (tileNumber[0] >= 39607 && tileNumber[0] <= 39611) && (tileNumber[1] >= 20554 && tileNumber[1] <= 20558))
) {
return 'http://berg.ru/yandex1/' + tileZoom + '/' + 'tile-' + tileNumber[0] + '-' + tileNumber[1] + '.png';
}
return 'http://berg.ru/yandex1/256.png';
}, {
projection: ymaps.projection.sphericalMercator,
...