JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru-RU"></script>
<div id="all">
<div id="map" style="width:100%; height:300px"></div>
    <div id="mapper">
        <div id="new_map"></div>
    </div>
</div>

</div>
<div class="as">
<a href="javascript:void(0);" class="goto too-map" data-goto="one">Один</a>
<a href="javascript:void(0);" class="goto too-map" data-goto="two">Два</a>
<a href="javascript:void(0);" class="goto too-map" data-goto="three">Три</a>
</div>

CSS

#all{
    position: relative;
}
.goto{
    float:left;
    margin: 15px;
}
#new_map{
    width:250px;
    height:250px;
}

#mapper {
    border-radius: 50%;
    box-shadow: 0 0 0 1px #bbbbbb, 0 0 0 11px #fff, 0 0 0 12px #bbbbbb;
    height: 250px;
    left: 50%;
    margin-left: -125px;
    margin-top: -125px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    width: 250px;
}
#results{
    display:none;
}

JavaScript

ymaps.ready(initk);
function initk() {
  newMap = new ymaps.Map('new_map', {
    center: [
      55.684758,
      37.738521
    ], //one
    zoom: 15,
    controls: [
    ]
  });
  myGeoObjects = new ymaps.GeoObject();
  newMap.geoObjects.add(myGeoObjects).add(new ymaps.Placemark([55.684758,
  37.738521], {
    balloonContent: 'цвет <strong>воды пляжа бонди</strong>'
  }, {
    preset: 'islands#icon',
    iconColor: '#0095b6'
  }))
  //var result = document.getElementById('result'), // для отладки
  destinations = {
    'one': [
      55.684758,
      37.738521
    ],
    'two': [
      55.642063,
      37.656123
    ],
    'three': [
      55.826479,
      37.4872
    ],
  },
  myMap = new ymaps.Map('map', {
    center: destinations['one'],
    zoom: 10,
    controls: [
        ]
  });
  myGeoObject = new ymaps.GeoObject();
  myMap.geoObjects.add(myGeoObject).add(new ymaps.Placemark([55.684758,
  37.738521], {
  }, {
    preset: 'islands#icon',
    iconColor: '#0095b6'
  })).add(new ymaps.Placemark([55.642063,
  37.656123], {
  }, {
    preset: 'islands#icon',
    iconColor: '#a5260a'
  })).add(new ymaps.Placemark([55.826479,
  37.4872], {
  }, {
    preset: 'islands#dotIcon',
    iconColor: '#3b5998'
  }));
  function clickGoto() {
    var pos = this.getAttribute('data-goto');
    myMap.panTo(destinations[pos], {
      flying: 1
    });
    return false;
  }
  var col = document.getElementsByClassName('goto');
  for (var i = 0, n = col.length; i < n; ++i) {
    col[i].onclick = clickGoto;
  }
  $('.too-map').bind({
    click: function () {
      var pos = this.getAttribute('data-goto');
      $('#new_map').empty();
      mytMap = new ymaps.Map('new_map', {
        center: destinations[pos], //one
        zoom: 15,
        controls: [
        ]
      });
      myGeoObjects = new ymaps.GeoObject();
      mytMap.geoObjects.add(myGeoObjects).add(new ymaps.Placemark(destinations[pos], {
      }, {
        preset: 'islands#icon',
        iconColor: '#0095b6'
     ...