JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="main">
<form onsubmit="submitTime();return false;">
<input type="text" id="timerText" maxlength="2048" class="lst" value="" />
<input type="submit" id="timerBtn" class="lsb" value="検索"/>
</form>
<div id="timebase">
<div id="maph2" class="timenum"></div>
<div id="maph1" class="timenum"></div>
<div id="mapc1" class="timepi"></div>
<div id="mapn2" class="timenum"></div>
<div id="mapn1" class="timenum"></div>
<div id="mapc2" class="timepi"></div>
<div id="maps2" class="timenum"></div>
<div id="maps1" class="timenum"></div>
</div>
<div id="mapbig"></div>
</div>

CSS

body {
font-family:arial,sans-serif;
}
.lsb {
background-position:center bottom;
background-color:#EEE;
color:#000000;
cursor:pointer;
font:15px arial,sans-serif;
height:30px;
margin:0 0 0 0;
vertical-align:top;
border-style:solid;
border-color:#ccc #ccc #aaa #999;
border-style:solid solid;
border-width:2px 2px 2px 1px;
padding:0;
width:50px;
}

.lst {
-moz-box-sizing:content-box;
background:none repeat scroll 0 0 #FFFFFF;
color:#000000;
float:left;
font:18px arial,sans-serif;
padding-left:6px;
padding-right:10px;
vertical-align:top;
width:380px;
height:24px;
margin:0;
}

form{
margin:10px 0 10px 0;
padding:0;
}

#main{
margin:5px auto;
width:450px;
}

#mapbig{
width:440px;
height:200px;
clear:both;
margin:10px 0 0 0;
border:5px solid #aaa;
}

.timenum{
width:60px;
height:100px;
float:left;
}

.timepi{
width:30px;
height:100px;
float:left;
margin:0 5px;
}

#timebase{
padding:5px;
background-color:#aaa;
height:100px;
margin:0 0 0 0;
clear:both;
}

JavaScript

var timer;

var nums=[
[[-6.21858,106.802537,15],[-36.408727,145.22482,15]], //0
[[45.476594,-122.560301,16],[-35.973721,145.153111,17]], //1
[[44.957631,-93.27252,17],[-37.79201,142.698933,15]], //2
[[44.956259,-93.298023,17],[-38.416708,143.446891,16]], //3
[[41.708904,-87.794409,16],[-38.229466,142.829261,15],[-38.123931,145.351825,15]], //4
[[44.958755,-93.272381,17]], //5
[[32.220281,-110.855548,17]], //6
[[4.815662,7.02706,18]], //7
[[55.656466,12.297587,17],[-38.052397,142.844066,16]], //8
[[32.228186,-110.95597,17]], //9
[[51.913064,4.546884,17]] //:
];
var btime=[0,0,0,0,0,0];
var tobj={};
var linemap;
var linepoly;

var wCount;

var hh,nn,ss;

window.onload = function(){
  var geo=timelatlng(0);
  for(var i=1;i<=2;i++){
    var ci=["h","n","s"];
    for(var j=0;j<ci.length;j++){
      var idname=ci[j]+i;
      tobj[idname]=createMap('map'+idname,geo);
    }
    createMap('mapc'+i,timelatlng(10));
  }
  linemap = new google.maps.Map(document.getElementById('mapbig'), {
    zoom:1,
    center: new google.maps.LatLng(5,155),
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    navigationControl: true,
    mapTypeControl: false,
    scaleControl: false
  });
  wCount=0;
  callTimerEvent();
}

function createMap(id,geo){
  var mapdiv = document.getElementById(id);
  var opt = {
    zoom:geo[2],
    center: new google.maps.LatLng(geo[0],geo[1]),
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false
  };
  return new google.maps.Map(mapdiv, opt);
}

function moveMap(id,num,key){
  if(btime[key]!=num){
    btime[key]=num;
    var geo=timelatlng(num);
    var opt = {
      zoom:geo[2],
      center: new google.maps.LatLng(geo[0],geo[1]),
    };
    tobj[id].setOptions(opt);  
  }
  return tobj[id].getCenter();
}

function callTimerEvent(){
  clearTimeout(timer);
  
  if(wCount==0){
    $('#timerText').val("");
    $('#timerText').focus();
    var now = new Date();
   ...