JSFiddle - React, Tailwind, and code Playground

by atach

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css">
<script src="//api-maps.yandex.ru/2.0/?load=package.standard&amp;lang=ru-RU"></script>
<p><a class="fancymap" href="#inmap" id="object_adress" data-adr="Москва, просп. Мира, 111">Показать на карте</a></p>
<div id="map" style="width:100%; height:300px"></div>
    <input type="button" id="destroyButton" value="Удалить карту"/>

JavaScript

var myMap;
var adrline = $("#object_adress").attr("data-adr");
// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);

function init () {
    // Создание экземпляра карты и его привязка к контейнеру с
    // заданным id ("map").
    myMap = new ymaps.Map('map', {
        // При инициализации карты обязательно нужно указать
        // её центр и коэффициент масштабирования.
        center:[55.76, 37.64], // Москва
        zoom:10
    });


document.getElementById('object_adress').onclick = function () {
       ymaps.geocode(adrline, {
							        results: 1
							    }).then(function (res) {
							            var firstGeoObject = res.geoObjects.get(0),
							                coords = firstGeoObject.geometry.getCoordinates(),
							                bounds = firstGeoObject.properties.get('boundedBy');
							            myMap.geoObjects.add(firstGeoObject);
							            myMap.setBounds(bounds, {
							                checkZoomRange: true
							            });       
							    });		
    };
									
								


    document.getElementById('destroyButton').onclick = function () {
        // Для уничтожения используется метод destroy.
        myMap.destroy();
    };

}