JSFiddle - React, Tailwind, and code Playground

by vollossy

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<a href="#" data-bind="click: changeMap">changeMap</a>

<div id="map1" data-bind="visible: visibleMap() == 'map1'"></div>
<hr>
<div id="map2" data-bind="visible: visibleMap() == 'map2'"></div>

CSS

div {
    height: 300px;
    width: 400px;
}

JavaScript

var api_key = 'ACFtQ04BAAAAbzYZTwMAvb-k6q7FR7EZB0gUV3HHvd4VOGAAAAAAAAAAAAC0qBpoyLC48dtdt1dgQ9F4UTpfKQ==';

$.getScript(
    "http://api-maps.yandex.ru/1.1/index.xml?loadByRequire=1&key=" + api_key, function(){
        YMaps.load(function(){
            var map1 = new YMaps.Map($('#map1')[0]);
            map1.setCenter(new YMaps.GeoPoint(73.36, 54.98), 10);

            var map2 = new YMaps.Map($('#map2')[0]);
            map2.setCenter(new YMaps.GeoPoint(73.36, 54.98), 10);
            
            var vm = {
                visibleMap: ko.observable('map1'),
                changeMap: function(){
                    if(vm.visibleMap() == 'map1'){
                        vm.visibleMap('map2');
                        $('#map1').height('100px');
                    }
                    else{
                        vm.visibleMap('map1');
                        $('#map2').height('100px');
                    }
                }
            };
            ko.applyBindings(vm);
        });
});