JSFiddle - React, Tailwind, and code Playground

by amirali roshanaei

HTML

<script src="http://maps.google.com/maps/api/js?sensor=true&amp;libraries=drawing,geometry&amp;.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
<div class="map" id="map_in"></div>
<div style="text-align:center">
  <a href="http://jsfiddle.net/doktormolle/EdZk4/">[source]</a>
  <input id="clear_shapes" value="clear shapes" type="button" />
  <input id="save_encoded" value="save encoded(IO.IN(shapes,true))" type="button" />
  <input id="save_raw" value="save raw(IO.IN(shapes,false))" type="button" />
  <input id="data" value="" style="width:100%" readonly/>
  <input id="restore" value="restore(IO.OUT(array,map))" type="button" />
</div>
<div class="map" id="map_out"></div>

CSS

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.map {
  height: 40%;
}

JavaScript

function initialize() {
  var goo = google.maps,
    map_in = new goo.Map(document.getElementById('map_in'), {
      zoom: 12,
      center: new goo.LatLng(32.344, 51.048)
    }),
    map_out = new goo.Map(document.getElementById('map_out'), {
      zoom: 12,
      center: new goo.LatLng(32.344, 51.048)
    }),
    shapes = [],
    selected_shape = null,
    drawman = new goo.drawing.DrawingManager({
      map: map_in
    }),
    byId = function(s) {
      return document.getElementById(s)
    },
    clearSelection = function() {
      if (selected_shape) {
        selected_shape.set((selected_shape.type ===
          google.maps.drawing.OverlayType.MARKER
        ) ? 'draggable' : 'editable', false);
        selected_shape = null;
      }
    },
    setSelection = function(shape) {
      clearSelection();
      selected_shape = shape;

      selected_shape.set((selected_shape.type ===
        google.maps.drawing.OverlayType.MARKER
      ) ? 'draggable' : 'editable', true);

    },
    clearShapes = function() {
      for (var i = 0; i < shapes.length; ++i) {
        shapes[i].setMap(null);
      }
      shapes = [];
    };
  map_in.bindTo('center', map_out, 'center');
  map_in.bindTo('zoom', map_out, 'zoom');

  goo.event.addListener(drawman, 'overlaycomplete', function(e) {
    var shape = e.overlay;
    shape.type = e.type;
    goo.event.addListener(shape, 'click', function() {
      setSelection(this);
    });
    setSelection(shape);
    shapes.push(shape);
  });

  goo.event.addListener(map_in, 'click', clearSelection);
  goo.event.addDomListener(byId('clear_shapes'), 'click', clearShapes);
  goo.event.addDomListener(byId('save_encoded'), 'click', function() {
    var data = IO.IN(shapes, true);
    byId('data').value = JSON.stringify(data);
  });
  goo.event.addDomListener(byId('save_raw'), 'click', function() {
    var data = IO.IN(shapes, false);
    byId('data').value = JSON.stringify(data);
  });
  goo.event.addDomListener(byId('restore'), 'click',...