JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<title>read-excel-file-geocoding</title>
<meta charset="utf-8">
<script src="read-excel-file.min.js"></script>
<script src="jquery-2.1.0.min.js"></script>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body{
margin : 20px;
font-family : Arial, Helvetica;
}
#input{
margin-top : 20px;
margin-bottom : 10px;
}
#main-link{
display : block;
font-size : 24px;
color : #0093C4;
font-family : monospace;
text-decoration : none;
}
</style>
</head>
<body>
<a id="main-link" href="">
read excel - geocoding - gmaps v2
</a>
<input type="file" id="input" />
<div style="font-size: 12px">
</div>
<div id="result-table"></div>
<div id="result"></div>
<textarea id="address" type="textarea" placeholder="Enter address here" style="width: 847px; height: 81px;"/>
</textarea>
<button id="btn">Get LatLong</button>
<div>
<p>Latitude:
<textarea type="text" id="latitude" readonly style="width: 196px; height: 130px;"/></textarea>
</p>
<p>Longitude:
<textarea type="text" id="longitude" readonly style="width: 196px; height: 130px;"/></textarea>
</p>
<div id="datall"></div>
</div>
<div id="map"></div>
<script>
function filter(array, key){
var i, j, hash = [], item;
for(i = 0, j = array.length; i<j; i++){
item = array[i];
if( item[10] != null && i != 0){
hash.push(item[10]);
}
}
return hash;
}
var input = document.getElementById('input')
input.addEventListener('change', function() {
readXlsxFile(input.files[0], { dateFormat: 'MM/DD/YY' }).then(function(data) {
var wat = filter(data, "alamat");
res = JSON.stringify(wat)
$("#address").val(res);
}, (error) => {
console.error(error)
alert("Error while...