JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="container"><p>wait loading...</p></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=true"></script>

CSS

*{
  margin: 0px;
  border: none;
  padding :0px;
  color :#000000;
}

body{
  background-color :#999999;
  width :100%;
  height :100%;
}

/******************
  buttons
 ******************/
.btn_sys{
  padding-left :3px;
  padding-right :3px;
  height :18px;
  vertical-align: middle;
  text-shadow: #FFCCCC 0px 1px;
  
  border :1px solid #CC6666;
  -moz-border-radius :2px;
  -webkit-border-radius :2px;
  border-radius :2px;
  
  background-color :#FFFF66;
  background: -moz-linear-gradient(top,
    #FFCC99,
    #FFFF99 20%,
    #FF9966
  );
  background: -webkit-gradient(linear, left top, left bottom,
    from(#FFCC99),
    color-stop(0.2, #FFFF99),
    to(#FF9966)
  );
}
.btn_sys:hover{
  border :1px solid #FFFF66;
}
.btn_sys:active{
  color: #339999;
  border :1px solid #990000;
}


/******************
  Main
 ******************/

/*container**********/
#container{
  text-align :center;
  width :465px;
  height :465px;
  
  background-color :#FF9999;
  background: -moz-linear-gradient(top,
    #FF8888,
    #FFCCCC 20%,
    #FF8888
  );
  background: -webkit-gradient(linear, left top, left bottom,
    from(#FF8888),
    color-stop(0.2, #FFCCCC),
    to(#FF8888)
  );
}

/*map_field*************/
#map_field{
  margin-left :auto;
  margin-right :auto;
  width :440px;
  height :420px;
}

/*ui_info***************/
#ui_info{
  height :20px;
}
#info_total{
  margin-right :10px;
}
#info_here{
  font-weight :bold;
}
.info_name{
  padding: 0px 3px;
  text-shadow: #FFCCCC 0px 1px;
}
.info_data{
  padding: 0px 5px;
  
  background-color: #FFFFFF;
  background: -moz-linear-gradient(top,
    #EEEEEE,
    #FFFFFF 20%,
    #EEEEEE
  );
  background: -webkit-gradient(linear, left top, left bottom,
    from(#EEEEEE),
    color-stop(0.2, #FFFFFF),
    to(#EEEEEE)
  );

}

/*ui_pop***************/
#ui_pop{
  height :0px;
  text-align: center;
}
#pop_win{
  width :300px;
  z-index :10;
  
  margin-left :auto;
  margin-right :auto;
  position: relative;
  top :250px;
  
 ...

JavaScript

/**
 * 人がだいたい12時間で歩ける周回ルートを生成し、
 * 盤面に見立てて時計とします。
 * 針の動きは、人の動きを基準にしているので不正確です。
 * 
 * 道があればどこでも作れます（失敗もします）。
 * 色んな場所で試してください！
 * 
 * ※ Google より：：
 * 徒歩ルートの表示は Beta 版です。
 * 注意 – このルートには歩道のない道が
 * 含まれている可能性があります。
 * 
 * 
 * ※ 操作方法
 * MAKE CLOCK   -- 現在位置に時計を作る
 * GEO LOCATION -- ユーザの位置情報の場所に移動(取れれば)
 * BACK         -- 時計位置に戻る
 * CANCEL       -- 時計生成中断
 * 文字盤中心をクリック -- 緯度経度入力・表示ウインドウ
 * 
 * 他、Google Maps に準ずる
 * 
 * 
 * --------------------------
 * ClockwiseWalker
 * 
 * version:  1.1.02    2010/07/26
 * author:  Moriwaki Yuuya (yprops)
 * 
 * libraries required:
 *   jquery-1.4.2.js
 *   http://maps.google.com/maps/api/js?v=3.1&sensor=true
 * 
 * checked with:
 *   Firefox 3.6
 *   Chrome 5.0
 *   Safari 5.0
 * 
 *
 * ※ 下記に同じもの。(JAM 投稿用)
 *    http://jsdo.it/yprops/mPaC/
 *
 * 
 * ※履歴
 * 20100719 1.0.01 bugfix　人か中心のアイコンが画面外に出ると操作不能になるエラーを修正。
 * 20100724 1.1.00 中心点の現在地をテキストで取得できる機能、及び指定できる機能を追加
 * 20100724 1.1.01 座標入力処理を更新
 * 20100726 1.1.02 経度計算の不具合を修正
 *
 *
 */

/*************** 初期化＆ＵＩ設定 *******************/
(function(){
$(window).load(initGWalkClock);
var  gm = google.maps,gg = google.gears,gev = gm.event,gdst = gm.DirectionsStatus;
var  APPNAME = 'ClockwiseWalker',ICONSRC = 'http://yprops.com/images/clockwisewalker_res.png',ICONSIZE = new gm.Size(24,24),ICONPT = new gm.Point(12, 12),SEC12H = 43200, SEC1H = 3600,PI = Math.PI, PI2 = Math.PI * 2,KWCLICK = 'click', KWSHARP = '#', KWID = 'id', KWNBSP = '&nbsp;',KWIDLE = 'idle', KWVALUE = 'value',FRAMEWORK = '<div id="ui_info"></div><div id="ui_pop"></div><div id="map_field"></div><div id="ui_msg"></div><div id="ui_btn"></div><div id="ui_deb"></div>',MISSSTR = ['sorry, no response.','plz try other pt!','check your connections.','plz try other pt!!','plz try other pt!!!','check your connections..','during path drawing.','ClockwiseWolker initialization failed.','invalid location.'];
var  UIBTNSRCS = [null,'<button class="btn_sys" id="uibtn_cancel">CANCEL</button>','<button class="btn_sys" id="uibtn_make">MAKE...