JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Yandex Maps : Sample 2 : WebCoding Solutions</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

  </head>

  <body>
    <div id="map-canvas"></div>
    <div id="mapUI" style="display:none">Любой HTML код</div>
  </body>

</html>

CSS

html,
      body,
      #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

JavaScript

var map;
	ymaps.ready(function() {
	  map = new ymaps.Map("map-canvas", {
	    center: [56, 37],
	    zoom: 8,
	    type: "yandex#map",
	    behaviors: ['default', 'DblClickZoom', 'Drag', 'LeftMouseButtonMagnifier', 'MultiTouch', 'RightMouseButtonMagnifier', 'RouteEditor', 'Ruler', 'ScrollZoom'],
	    controls: ['default', 'zoomControl', 'searchControl', 'routeEditor', 'fullscreenControl']
	  });
	  mapUI();
	});

	function mapUI() {
	  var UI = $("#mapUI").html();
	  $("#mapUI").remove();
	  $('#map-canvas').prepend('<div id="mapUI">' + UI + '</div>');
	  $("#map-canvas").css('position', 'relative');
	  $("#mapUI").css({
	    position: 'absolute',
	    left: '45%',
	    top: '0px',
	    padding: '10px',
	    backgroundColor: '#FFF',
	    border: 'solid 1px #000',
	    zIndex: '1',
	    margin: '8px'
	  });
	}