JSFiddle - React, Tailwind, and code Playground

by vollossy

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Список</a></li>
        <li><a href="#tabs-2">Карта</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-2">
        <div id="ymap"></div>
    </div>
</div>

CSS

body{
    font-size: 12px;
}

#ymap{
    width: 450px;
    height: 300px;
}

JavaScript

var map, map_dirty;

$(function() {
    $('#tabs').tabs({
        show: function(event, ui) {
            if (ui.index == 1) {
                showMap();
            }
        }
    });
    if (!map) {
        loadMap();
    }
    //alert(window.location);
});


loadMap = function() {
    var api_key = 'ACFtQ04BAAAAbzYZTwMAvb-k6q7FR7EZB0gUV3HHvd4VOGAAAAAAAAAAAAC0qBpoyLC48dtdt1dgQ9F4UTpfKQ==';
    $.getScript("http://api-maps.yandex.ru/1.1/index.xml?loadByRequire=1&oncerror=apiFault&key="+api_key,
      function() {
          console.log(arguments);
        YMaps.load(function() {
          map = new YMaps.Map($('#ymap'));
          map.addControl(new YMaps.Zoom());

          map_dirty = true; // mark for update
          // set events
          YMaps.Events.observe(map, map.Events.Update, function () {
              alert('Update event!');
          });
        });
      });
}

showMap = function() {
    if (!map_dirty) return; // skip if not changed

    alert('Set map');
    map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
    map_dirty = false;
}

apiFault = function() {}