JSFiddle - React, Tailwind, and code Playground

by Nechifor Vasile

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
<script src="https://maps.google.com/maps/api/js??v=3&amp;amp;sensor=false&amp;amp;language=ro&amp;libraries=drawing,geometry"></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;
    
    var    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);
                            }
                  ...