How to get or displaying address and geocode Geolocation in Spreadsheets using web app google script editor?

Viewed 123

I want to make my spreadsheets able to displaying data from web app - spreadsheet script editor (geolocation). I want to get my siblings current location. I don't want use Google Form by the way.

How to fix this?

Code.gs

function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function getLoc(value) {
var destId = FormApp.getActiveForm().getDestinationId() ;
var ss = SpreadsheetApp.openById(destId) ;
var respSheet = ss.getSheets()[0] ;
var data = respSheet.getDataRange().getValues() ;
var headers = data[0] ;
var numColumns = headers.length ;
var numResponses = data.length;
var c=value[0];
var d=value[1];
var e=c + "," + d ;
  
  if (respSheet.getRange(1,numColumns).getValue()=="GeoAddress") {
    if (respSheet.getRange(numResponses,numColumns-2).getValue()=="" && respSheet.getRange(numResponses-1,numColumns-2).getValue()!="" ){
respSheet.getRange(numResponses,numColumns-2).setValue(Utilities.formatDate(new Date(), "GMT+7", "MM/dd/yyyy HH:mm:ss"));
respSheet.getRange(numResponses,numColumns-1).setValue(e);
var response = Maps.newGeocoder().reverseGeocode(value[0], value[1]);
f= response.results[0].formatted_address;
respSheet.getRange(numResponses,numColumns).setValue(f);
}

    else if (respSheet.getRange(numResponses,numColumns-2).getValue()=="" && respSheet.getRange(numResponses-1,numColumns-2).getValue()=="" ){
respSheet.getRange(numResponses,numColumns-2).setValue(Utilities.formatDate(new Date(), "GMT+7", "MM/dd/yyyy HH:mm:ss")).setFontColor("red");
respSheet.getRange(numResponses,numColumns-1).setValue(e).setFontColor("red");
var response = Maps.newGeocoder().reverseGeocode(value[0], value[1]);
f= response.results[0].formatted_address;
respSheet.getRange(numResponses,numColumns).setValue(f).setFontColor("red");
}

    else if (respSheet.getRange(numResponses,numColumns-2).getValue()!=""){

      for (i = 0; i < numResponses; i++) {
if (respSheet.getRange(numResponses-i,numColumns-2).getValue()=="") {
respSheet.getRange(numResponses-i,numColumns-2).setValue(Utilities.formatDate(new Date(), "GMT+7", "MM/dd/yyyy HH:mm:ss")).setFontColor("red");
respSheet.getRange(numResponses-i,numColumns-1).setValue(e).setFontColor("red");
var response = Maps.newGeocoder().reverseGeocode(value[0], value[1]);
f= response.results[0].formatted_address;
respSheet.getRange(numResponses-i,numColumns).setValue(f).setFontColor("red");
break; }
}
}
}

 
  else if (respSheet.getRange(1,numColumns).getValue()!="GeoAddress") {
respSheet.getRange(1,numColumns+1).setValue("GeoStamp");
respSheet.getRange(1,numColumns+2).setValue("GeoCode");
respSheet.getRange(1,numColumns+3).setValue("GeoAddress");

    if (numResponses==2) {
respSheet.getRange(numResponses,numColumns+1).setValue(Utilities.formatDate(new Date(), "GMT+7", "MM/dd/yyyy HH:mm:ss"));
respSheet.getRange(numResponses,numColumns+2).setValue(e);
var response = Maps.newGeocoder().reverseGeocode(value[0], value[1]);
f= response.results[0].formatted_address;
respSheet.getRange(numResponses,numColumns+3).setValue(f);
}

    else if (numResponses > 2){
respSheet.getRange(numResponses,numColumns+1).setValue(Utilities.formatDate(new Date(), "GMT+7", "MM/dd/yyyy HH:mm:ss")).setFontColor("red");
respSheet.getRange(numResponses,numColumns+2).setValue(e).setFontColor("red");
var response = Maps.newGeocoder().reverseGeocode(value[0], value[1]);
f= response.results[0].formatted_address;
respSheet.getRange(numResponses,numColumns+3).setValue(f).setFontColor("red");
}
}
  
}

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Absensi Lokasi Online</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"   integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <script>
        (function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            }
            })()
            function showPosition(position) {
            var a= position.coords.latitude;
            var b= position.coords.longitude;
            var c=[a,b]
            getPos(c)
            function getPos(value) {
            google.script.run.getLoc(value);
            }
        }
    </script>
</head>
<body>
    


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.min.js"></script>
    
    <script>
    
    swal({
        title: "Absensi Berhasil",
        text: "Jika anda pertama kali absen, silahkan izinkan aplikasi ini mengakses lokasi anda. Terimakasih",
        type: "success"
    }).then(function() {
        window.location.href = "https://forms.gle/JG1oWKvyBRW4bF4V8";
    });
    
    </script>
</body>
</html>

The code I get is aim using google form, and I don't want asking location permission through Google form. I want asking for location permission on google script link tho. and when someone agree to allow his location, I want it to displaying data such as geostamp, geocode, geoaddress in spreadsheet.

0 Answers
Related