JSFiddle - React, Tailwind, and code Playground

by neverov12

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

<div id="map1"></div>
<div id="map2"></div>

CSS

#map1, #map2{
  width: 50%;
  display: inline-block;
  float: left;
  height: 300px;
}

JavaScript

const mapsInit = () => {
	[
  	{
    	id: "map1",
      center: [56.33155806842332,43.96801449999996],
      mark: [56.33155806842332,43.96801449999996],
      markTitle: 'Маркер'
    },
  	{
    	id: "map2",
      center: [56.33155806842332,43.96801449999996],
      mark: [56.33155806842332,43.96801449999996],
      markTitle: 'Маркер'
    },
  ].forEach((mapData) => {
    const map = new ymaps.Map(mapData.id, {
      center: mapData.center,
      zoom: 17,
      controls: ['zoomControl']
    });
    
    const placemark = new ymaps.Placemark(mapData.mark, {
      balloonContentBody: mapData.markTitle
    }, {
      iconLayout: 'default#image',
      iconImageHref: 'https://c7.uihere.com/files/670/130/334/myanimelist-nier-automata-video-game-know-your-meme-eslimi-thumb.jpg',
      iconImageSize: [77, 83],
      iconImageOffset: [-38, -83]
    })
    
    map.geoObjects.add(placemark);
  });
}
  
ymaps.ready(mapsInit);