Melacak Lokasi Seseorang, Mobil, atau Motor Hilang dengan Google Script
Google Apps Script yang bisa dipakai untuk tracking lokasi kendaraan atau akun sosial media ini cukup mudah. Pada sistem ini terdiri dari 2 bagian:
- Server (Apps Script) — menerima POST dari perangkat (GPS/Android/IoT) dan menyimpan data ke Google Sheets; juga menyediakan endpoint JSON untuk mengambil data.
- Frontend (HTML + Google Maps JS) — menampilkan posisi kendaraan di peta dan melakukan refresh otomatis.
Catatan penting sebelum pakai:
- Jika Anda memakai script standalone (script.google.com) dan bukan bound ke Spreadsheet, Anda perlu mengisi SHEET_ID (ID spreadsheet). Kalau script di-bound ke spreadsheet, Anda bisa gunakan SpreadsheetApp.getActiveSpreadsheet().
- Untuk peta, butuh Google Maps JavaScript API Key (aktifkan Maps JavaScript API di Google Cloud dan masukkan API key di file HTML).
- Saat deploy Web App untuk menerima POST dari perangkat, pilih "Anyone, even anonymous" (atau sesuai kebutuhan keamanan) agar perangkat bisa mengirim data tanpa login.
Langkah - Langkah Membuat script.google.com untuk tracking lokasi
Buat spreadsheet
Buat Google Sheet baru dan beri nama (contoh: lacaklokasi) lalu buat sheet/tab bernama lokasi dengan header di baris 1:
Timestamp | KodeId| Latitude | Longitude | Speed | Heading
Ambil SHEET_ID dari URL spreadsheet (bagian antara /d/ dan /edit) yang nanti akan digunakan pada code.gs.
Code Apps Script (Code.gs)
Buat project Apps Script baru (script.google.com), tambahkan file Code.gs tapi secara default sudah terbuat isi berikut. Ganti SHEET_ID jika script standalone, atau kosongkan untuk pakai active spreadsheet.
// ---------- CONFIG ----------
var SHEET_ID = 'PASTE_SPREADSHEET_ID_HERE_IF_STANDALONE'; // kosongkan '' jika script bound ke sheet
var SHEET_NAME = 'Locations';
// ----------------------------
function getSheet() {
var ss = SHEET_ID && SHEET_ID.length ? SpreadsheetApp.openById(SHEET_ID) : SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName(SHEET_NAME);
if (!sheet) {
sheet = ss.insertSheet(SHEET_NAME);
sheet.appendRow(['Timestamp','VehicleId','Latitude','Longitude','Speed','Heading','RawData']); // header
}
return sheet;
}
/**
* Endpoint untuk menerima POST dari device (application/json atau form data)
* Contoh JSON body:
* { "vehicle_id":"V001", "lat":-6.200000, "lng":106.816666, "speed":45, "heading":120, "ts":"2025-09-17T07:00:00Z" }
*/
function doPost(e) {
try {
var payload;
if (e.postData && e.postData.type && e.postData.type.indexOf('application/json') !== -1) {
payload = JSON.parse(e.postData.contents);
} else {
// fallback: form data
payload = {};
for (var p in e.parameter) payload[p] = e.parameter[p];
}
var sheet = getSheet();
var timestamp = payload.ts ? new Date(payload.ts) : new Date();
var vehicleId = payload.vehicle_id || payload.vehicleId || payload.id || '';
var lat = payload.lat || payload.latitude || payload.lat_deg || '';
var lng = payload.lng || payload.lon || payload.longitude || payload.lng_deg || '';
var speed = payload.speed || '';
var heading = payload.heading || '';
sheet.appendRow([timestamp, vehicleId, lat, lng, speed, heading, JSON.stringify(payload)]);
return ContentService.createTextOutput(JSON.stringify({status:'ok'})).setMimeType(ContentService.MimeType.JSON);
} catch (err) {
return ContentService.createTextOutput(JSON.stringify({status:'error', message: err.toString()})).setMimeType(ContentService.MimeType.JSON);
}
}
/**
* doGet: jika ?action=data -> kembalikan JSON semua lokasi
* jika tanpa parameter -> serve frontend HTML
*/
function doGet(e) {
if (e && e.parameter && e.parameter.action === 'data') {
var sheet = getSheet();
var rows = sheet.getDataRange().getValues();
var result = [];
for (var i = 1; i < rows.length; i++) {
result.push({
timestamp: rows[i][0],
vehicleId: rows[i][1],
lat: parseFloat(rows[i][2]),
lng: parseFloat(rows[i][3]),
speed: rows[i][4],
heading: rows[i][5]
});
}
return ContentService.createTextOutput(JSON.stringify(result)).setMimeType(ContentService.MimeType.JSON);
} else {
return HtmlService.createHtmlOutputFromFile('Index').setTitle('Vehicle Tracker');
}
}
Frontend (Index.html)
Tambahkan file Index.html tanpa html di project Apps Script yang digunakan untuk load pertama kali yang ketika diakses penggunakan mengirim signal lokasi dengan isi:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vehicle Tracker</title>
<style>
html,body,#map { height:100%; margin:0; padding:0; }
#map { height: 90vh; }
#controls { padding:8px; }
</style>
</head>
<body>
<div id="controls">
<label>Refresh (detik): <input id="interval" type="number" value="10" min="2" style="width:60px"></label>
<button onclick="refreshNow()">Refresh</button>
</div>
<div id="map"></div>
<script>
var map;
var markers = {};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: { lat: -6.200000, lng: 106.816666 } // default Jakarta
});
fetchAndUpdate();
setInterval(function(){
var s = parseInt(document.getElementById('interval').value) || 10;
// ensure our interval respects value by clearing and re-setting
}, 1000);
}
function fetchAndUpdate() {
fetch('?action=data')
.then(r => r.json())
.then(data => {
if (!data || !data.length) return;
// center to latest overall
var last = data[data.length-1];
if (last && !isNaN(last.lat) && !isNaN(last.lng)) {
map.setCenter({lat: last.lat, lng: last.lng});
}
// create or update markers per vehicleId
data.forEach(function(rec){
if (!rec.vehicleId) return;
var key = rec.vehicleId;
var pos = { lat: Number(rec.lat), lng: Number(rec.lng) };
if (markers[key]) {
markers[key].setPosition(pos);
markers[key].info.setContent(markerContent(rec));
} else {
var m = new google.maps.Marker({
position: pos,
map: map,
label: { text: key + '', color: 'white' }
});
var inf = new google.maps.InfoWindow({ content: markerContent(rec) });
m.addListener('click', function(){ inf.open(map, m); });
m.info = inf;
markers[key] = m;
}
});
})
.catch(err => console.error(err));
}
function markerContent(rec) {
return '<div><strong>' + rec.vehicleId + '</strong><br>'
+ 'Time: ' + (new Date(rec.timestamp)).toLocaleString() + '<br>'
+ 'Lat,Lng: ' + rec.lat + ',' + rec.lng + '<br>'
+ 'Speed: ' + (rec.speed || '-') + '</div>';
}
var autoTimer;
function startAutoRefresh() {
if (autoTimer) clearInterval(autoTimer);
var sec = parseInt(document.getElementById('interval').value) || 10;
autoTimer = setInterval(fetchAndUpdate, sec*1000);
}
function refreshNow() {
fetchAndUpdate();
startAutoRefresh();
}
// start auto
document.addEventListener('DOMContentLoaded', function(){
refreshNow();
});
</script>
</body>
</html>
Cara deploy Web Apps script.google.com
Pastikan pada file project tidak terdapat icon kuning yang berati perubahan belum disimpan klik icon Save project untuk memastikan semua file sudah disimpan.
- Publish -> Deploy as web app (di editor baru: tombol Deploy → New deployment → pilih Web app).
- Pilih:
- Execute as: Me (agar script bisa mengakses spreadsheet).
- Who has access: Anyone (atau Anyone, even anonymous) jika perangkat akan POST tanpa autentikasi.
- Klik Deploy dan catat Web app URL.
- URL tersebut untuk mengakses frontend (buka di browser).
- Endpoint POST (untuk device) adalah juga URL tersebut — kirim ke https://.../exec (Apps Script mengizinkan POST ke /exec).