JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<input type="text" id="coords" value="">
<button class='toggle'>Показать/скрыть карту</button>
    <span class="delivery-price"></span>
<div id="map"></div>

CSS

.toggle {
    margin-bottom: 10px;
}
#map {
    width: 100%;
    height: 400px;
    display: none;
}

JavaScript

var mapShow = false;

$('.toggle').click(function(){
    $('#map').toggle(function(e){
        mapShow = !mapShow;
        
        if(mapShow){
            delivery_coord = $('#coords').val();
            if(delivery_coord.length){
                mapInit(delivery_coord.split(','));
            } else {
                mapInit();
            }   
        } else {
            mapDestroy();  
        }
    });
});

var myMap; // карта
var calculator; // калькулятор
var mapCenter = [58.013889, 56.248889]; // центр карты
var startPoint = [58.01135907607139,56.269633820388776]; // начальная точка построения маршрута

function mapInit(endPoint) {
    myMap = new ymaps.Map('map', {
        center: mapCenter,
        zoom: 12,
        type: 'yandex#map',
        behaviors: ['scrollZoom', 'drag'],
        controls: ['zoomControl']
    }),

    calculator = new DeliveryCalculator(myMap, startPoint, endPoint);
}
function mapDestroy(){
	if(myMap){
		myMap.destroy();
		myMap = calculator = null;
	}
}

/**
 * Калькулятор
 */
function DeliveryCalculator(map, start, end) {
    this._map = map;
    this._start = null;
    this._route = null;
    this._startBalloon;
    this._finishBalloon;

    map.events.add('click', this._onClick, this);

	this.setStartPoint(start);

    // если задана конечная точка то ставим её сразу
    if(end){
	    this.setFinishPoint(end);
    }
}
var ptp = DeliveryCalculator.prototype;

ptp._onClick= function (e) {
	this.setFinishPoint(e.get('coords'));
};
ptp._onFinishDragEnd = function (e) {
    var coords = this._finish.geometry.getCoordinates();
    this.geocode("finish", coords);
}
ptp.getDirection = function () {
    if(this._route) {
        this._map.geoObjects.remove(this._route);
    }

    if (this._start && this._finish) {
        var self = this,
        start = this._start.geometry.getCoordinates(),
        finish = this._finish.geometry.getCoordinates(),
        startBalloon = this._startBalloon,
        finishBalloon =...