Kelola Data Google Maps Menggunakan Apps Script (GIS)
1. Buatlah Spreadsheet pada Google Drive
2. Buatlah lembar kerja Apps Script dengan cara klik menu Extension lalu pilih Apps Script.
3. Buatlah 3 file pada lembar kerja Apps Script.
- Code.gs
- index.html
- visit.html
4. Copy dan pastekan script di bawah ini ke Code.gs
Masukkan Password Untuk Melihat Script (Password ada di dalam video)
// Code.gs
// Source Code by www.javabitpro.com
function doGet(e) {
var template = HtmlService.createTemplateFromFile('index')
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
.addMetaTag('viewport', 'width=device-width , initial-scale=1')
}
function getMapData() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = sheet.getDataRange().getValues();
return data;
}
function saveMapData(name, address, kunjungan, latitude, longitude) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sheet.appendRow([name, address, kunjungan, latitude, longitude]);
}
function editMapData(oldName, oldAddress, oldKunjungan, newName, newAddress, newKunjungan, latitude, longitude) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = sheet.getDataRange().getValues();
for (var i = 0; i < data.length; i++) {
if (data[i][0] === oldName && data[i][1] === oldAddress && data[i][2] === oldKunjungan && data[i][3] === latitude && data[i][4] === longitude) {
// Update data in the spreadsheet
sheet.getRange(i + 1, 1).setValue(newName);
sheet.getRange(i + 1, 2).setValue(newAddress);
sheet.getRange(i + 1, 3).setValue(newKunjungan);
break;
}
}
}
function deleteMapData(name, address, kunjungan, latitude, longitude) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = sheet.getDataRange().getValues();
for (var i = 0; i < data.length; i++) {
if (data[i][0] === name && data[i][1] === address && data[i][2] === kunjungan && data[i][3] === latitude && data[i][4] === longitude) {
// Delete row from the spreadsheet
sheet.deleteRow(i + 1);
break;
}
}
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function getURL(){
return ScriptApp.getService().getUrl()
}
// Code.gs
// Source Code by www.javabitpro.com
function doGet(e) {
var template = HtmlService.createTemplateFromFile('index')
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
.addMetaTag('viewport', 'width=device-width , initial-scale=1')
}
function getMapData() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = sheet.getDataRange().getValues();
return data;
}
function saveMapData(name, address, kunjungan, latitude, longitude) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sheet.appendRow([name, address, kunjungan, latitude, longitude]);
}
function editMapData(oldName, oldAddress, oldKunjungan, newName, newAddress, newKunjungan, latitude, longitude) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = sheet.getDataRange().getValues();
for (var i = 0; i < data.length; i++) {
if (data[i][0] === oldName && data[i][1] === oldAddress && data[i][2] === oldKunjungan && data[i][3] === latitude && data[i][4] === longitude) {
// Update data in the spreadsheet
sheet.getRange(i + 1, 1).setValue(newName);
sheet.getRange(i + 1, 2).setValue(newAddress);
sheet.getRange(i + 1, 3).setValue(newKunjungan);
break;
}
}
}
function deleteMapData(name, address, kunjungan, latitude, longitude) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = sheet.getDataRange().getValues();
for (var i = 0; i < data.length; i++) {
if (data[i][0] === name && data[i][1] === address && data[i][2] === kunjungan && data[i][3] === latitude && data[i][4] === longitude) {
// Delete row from the spreadsheet
sheet.deleteRow(i + 1);
break;
}
}
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function getURL(){
return ScriptApp.getService().getUrl()
}
5. Copy dan pastekan script di bawah ini ke index.html
Masukkan Password Untuk Melihat Script (Password sama dengan di atas)
<!-- index.html -->
<!-- Source Code by www.javabitpro.com -->
<!DOCTYPE html>
<html>
<head>
<!-- font-awesome@6.2.0 icon Visit -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<?!= include('visit')?>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GIS Web App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
#map {
height: 400px;
width: 100%;
}
#data-table {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="mt-4 mb-4">Kelola Data Google Maps Menggunakan Apps Script by Javabitpro</h2>
<!-- Maps Container -->
<div id="map" class="mb-4"></div>
<!-- Data Table -->
<table id="data-table" class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>Name</th>
<th>Address</th>
<th>Kunjungan</th>
<th>Latitude</th>
<th>Longitude</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="data-body"></tbody>
</table>
</div>
<script>
var map;
var markers = [];
var infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -8.179343323993091, lng: 113.6962948618509},
zoom: 13
});
infoWindow = new google.maps.InfoWindow();
// Add click event listener to the map
map.addListener('click', function(event) {
addMarker(event.latLng);
});
// Load existing markers from the sheet
google.script.run.withSuccessHandler(loadMarkers).getMapData();
}
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: true
});
// Add click event listener to the marker
marker.addListener('click', function() {
var name = prompt('Masukkan Nama:');
var address = prompt('Masukkan Alamat:');
var kunjungan = prompt('Masukkan Kunjungan:');
saveDataToSheet(name, address, kunjungan, marker.getPosition().lat(), marker.getPosition().lng());
});
// Save the marker reference
markers.push(marker);
}
function loadMarkers(data) {
// Clear existing markers and reload from the sheet
clearMarkers();
markers = [];
// Update the table with data from the spreadsheet
var dataTable = document.getElementById('data-body');
dataTable.innerHTML = '';
for (var i = 0; i < data.length; i++) {
var latLng = new google.maps.LatLng(data[i][3], data[i][4]);
addMarkerWithInfo(latLng, data[i][0], data[i][1], data[i][2], data[i][3], data[i][4]);
addRowToTable(data[i]);
}
}
function addMarkerWithInfo(location, name, address, kunjungan, latitude, longitude) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: true
});
// Add click event listener to the marker
marker.addListener('click', function() {
showInfoWindow(marker, name, address, kunjungan, latitude, longitude);
});
// Save the marker reference
markers.push(marker);
}
function showInfoWindow(marker, name, address, kunjungan, latitude, longitude) {
var content =
'<strong>Name:</strong> ' + name +
'<br><strong>Address:</strong> ' + address +
'<br><strong>Kunjungan:</strong> ' + kunjungan +
'<br><strong>Latitude:</strong> ' + latitude +
'<br><strong>Longitude:</strong> ' + longitude;
infoWindow.setContent(content);
infoWindow.open(map, marker);
}
function saveDataToSheet(name, address, kunjungan, latitude, longitude) {
google.script.run.withSuccessHandler(function() {
alert('Data has been saved.');
// Reload the map and table after saving data
google.script.run.withSuccessHandler(loadMarkers).getMapData();
}).saveMapData(name, address, kunjungan, latitude, longitude);
}
function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
}
function addRowToTable(data) {
var dataTable = document.getElementById('data-body');
var row = dataTable.insertRow(-1);
for (var i = 0; i < data.length; i++) {
var cell = row.insertCell(i);
cell.textContent = data[i];
}
// Add action buttons
var actionCell = row.insertCell(data.length);
actionCell.className = 'action-buttons';
var editButton = document.createElement('button');
editButton.textContent = 'Edit';
editButton.addEventListener('click', function() {
editData(data);
});
actionCell.appendChild(editButton);
var deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', function() {
deleteData(data);
});
actionCell.appendChild(deleteButton);
}
function editData(data) {
// Implement the edit functionality here
var newName = prompt('Edit Name:', data[0]);
var newAddress = prompt('Edit Address:', data[1]);
var newKunjungan = prompt('Edit Kunjungan:', data[2]);
if (newName !== null && newAddress !== null && newKunjungan !== null) {
google.script.run.withSuccessHandler(function() {
alert('Data has been edited.');
// Reload the map and table after editing data
google.script.run.withSuccessHandler(loadMarkers).getMapData();
}).editMapData(data[0], data[1], data[2], newName, newAddress, newKunjungan, data[3], data[4]);
}
}
function deleteData(data) {
// Implement the delete functionality here
var confirmDelete = confirm('Are you sure you want to delete this data?');
if (confirmDelete) {
google.script.run.withSuccessHandler(function() {
alert('Data has been deleted.');
// Reload the map and table after deleting data
google.script.run.withSuccessHandler(loadMarkers).getMapData();
}).deleteMapData(data[0], data[1], data[2], data[3], data[4]);
}
}
function saveData() {
var data = google.script.run.getMapData();
console.log(data); // You can customize this part to save or display the data as needed
}
</script>
<script src="https://raw.githack.com/javabitpro/maps/main/mapsJavaScriptAPI.js"
async defer></script>
</body>
</html>
<!-- index.html -->
<!-- Source Code by www.javabitpro.com -->
<!DOCTYPE html>
<html>
<head>
<!-- font-awesome@6.2.0 icon Visit -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<?!= include('visit')?>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GIS Web App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
#map {
height: 400px;
width: 100%;
}
#data-table {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="mt-4 mb-4">Kelola Data Google Maps Menggunakan Apps Script by Javabitpro</h2>
<!-- Maps Container -->
<div id="map" class="mb-4"></div>
<!-- Data Table -->
<table id="data-table" class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>Name</th>
<th>Address</th>
<th>Kunjungan</th>
<th>Latitude</th>
<th>Longitude</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="data-body"></tbody>
</table>
</div>
<script>
var map;
var markers = [];
var infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -8.179343323993091, lng: 113.6962948618509},
zoom: 13
});
infoWindow = new google.maps.InfoWindow();
// Add click event listener to the map
map.addListener('click', function(event) {
addMarker(event.latLng);
});
// Load existing markers from the sheet
google.script.run.withSuccessHandler(loadMarkers).getMapData();
}
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: true
});
// Add click event listener to the marker
marker.addListener('click', function() {
var name = prompt('Masukkan Nama:');
var address = prompt('Masukkan Alamat:');
var kunjungan = prompt('Masukkan Kunjungan:');
saveDataToSheet(name, address, kunjungan, marker.getPosition().lat(), marker.getPosition().lng());
});
// Save the marker reference
markers.push(marker);
}
function loadMarkers(data) {
// Clear existing markers and reload from the sheet
clearMarkers();
markers = [];
// Update the table with data from the spreadsheet
var dataTable = document.getElementById('data-body');
dataTable.innerHTML = '';
for (var i = 0; i < data.length; i++) {
var latLng = new google.maps.LatLng(data[i][3], data[i][4]);
addMarkerWithInfo(latLng, data[i][0], data[i][1], data[i][2], data[i][3], data[i][4]);
addRowToTable(data[i]);
}
}
function addMarkerWithInfo(location, name, address, kunjungan, latitude, longitude) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: true
});
// Add click event listener to the marker
marker.addListener('click', function() {
showInfoWindow(marker, name, address, kunjungan, latitude, longitude);
});
// Save the marker reference
markers.push(marker);
}
function showInfoWindow(marker, name, address, kunjungan, latitude, longitude) {
var content =
'<strong>Name:</strong> ' + name +
'<br><strong>Address:</strong> ' + address +
'<br><strong>Kunjungan:</strong> ' + kunjungan +
'<br><strong>Latitude:</strong> ' + latitude +
'<br><strong>Longitude:</strong> ' + longitude;
infoWindow.setContent(content);
infoWindow.open(map, marker);
}
function saveDataToSheet(name, address, kunjungan, latitude, longitude) {
google.script.run.withSuccessHandler(function() {
alert('Data has been saved.');
// Reload the map and table after saving data
google.script.run.withSuccessHandler(loadMarkers).getMapData();
}).saveMapData(name, address, kunjungan, latitude, longitude);
}
function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
}
function addRowToTable(data) {
var dataTable = document.getElementById('data-body');
var row = dataTable.insertRow(-1);
for (var i = 0; i < data.length; i++) {
var cell = row.insertCell(i);
cell.textContent = data[i];
}
// Add action buttons
var actionCell = row.insertCell(data.length);
actionCell.className = 'action-buttons';
var editButton = document.createElement('button');
editButton.textContent = 'Edit';
editButton.addEventListener('click', function() {
editData(data);
});
actionCell.appendChild(editButton);
var deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', function() {
deleteData(data);
});
actionCell.appendChild(deleteButton);
}
function editData(data) {
// Implement the edit functionality here
var newName = prompt('Edit Name:', data[0]);
var newAddress = prompt('Edit Address:', data[1]);
var newKunjungan = prompt('Edit Kunjungan:', data[2]);
if (newName !== null && newAddress !== null && newKunjungan !== null) {
google.script.run.withSuccessHandler(function() {
alert('Data has been edited.');
// Reload the map and table after editing data
google.script.run.withSuccessHandler(loadMarkers).getMapData();
}).editMapData(data[0], data[1], data[2], newName, newAddress, newKunjungan, data[3], data[4]);
}
}
function deleteData(data) {
// Implement the delete functionality here
var confirmDelete = confirm('Are you sure you want to delete this data?');
if (confirmDelete) {
google.script.run.withSuccessHandler(function() {
alert('Data has been deleted.');
// Reload the map and table after deleting data
google.script.run.withSuccessHandler(loadMarkers).getMapData();
}).deleteMapData(data[0], data[1], data[2], data[3], data[4]);
}
}
function saveData() {
var data = google.script.run.getMapData();
console.log(data); // You can customize this part to save or display the data as needed
}
</script>
<script src="https://raw.githack.com/javabitpro/maps/main/mapsJavaScriptAPI.js"
async defer></script>
</body>
</html>
Masukkan Password Untuk Melihat Script (Password sama dengan di atas)
<style>
.fab-container2 {
position: fixed;
bottom: 80px;
right: 1px;
z-index: 999;
cursor: pointer;
}
.fab-label2 {
padding: 2px 5px;
align-self: center;
user-select: none;
white-space: nowrap;
border-radius: 3px;
font-size: 16px;
background: #666666;
color: #ffffff;
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
/* margin-right: 10px; */
}
.fab-container {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 999;
cursor: pointer;
}
.fab-icon-holder {
width: 50px;
height: 50px;
border-radius: 100%;
background: #6dd4fc;
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.fab-icon-holder:hover{
opacity: 0.8;
}
.fab-icon-holder i {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 25px;
color: #000000;
}
.fab {
width: 56px;
height: 56px;
background: #6dd4fc;
}
.fab-options {
list-style-type: none;
margin: 0;
position: absolute;
bottom: 70px;
right: 0;
opacity: 0;
transition: all 0.3s ease;
transform: scale(0);
transform-origin: 85% bottom;
}
.fab:hover + .fab-options, .fab-options:hover {
opacity: 1;
transform: scale(1);
}
.fab-options li {
display: flex;
justify-content: flex-end;
padding: 5px;
}
.fab-label {
padding: 2px 5px;
align-self: center;
user-select: none;
white-space: nowrap;
border-radius: 3px;
font-size: 16px;
background: #666666;
color: #ffffff;
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
margin-right: 10px;
}
a {
color: inherit;
text-decoration: none;
}
</style>
<!-- ------------------------------ Visit ------------------------------- -->
<div class="fab-container2">
<p class="fab-label2">Visit</p>
</div>
<div class="fab-container">
<div class="fab fab-icon-holder">
<i><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC7hb7GJ4v4IwapVwZJJyvGsG5WF4RxsmEb0va1X0t-6urm1PGPDA2IEsETeLCuiyfJkUWhOOIUg9FN_Dr3gJJQmQUe2-AnYI3-R05TC6PbMRSnaljamNC9lQMOeE2q4Dr29jkfEaYwpadAjraVGgIgC_wGGp596Uh6tLX_ClrfbqK3wdhz4jE7i16/s1600/PNG%20JP.png" style="width: 75px;"></i>
</div>
<ul class="fab-options">
<li>
<span class="fab-label">Youtube</span>
<div class="fab-icon-holder">
<a target="_blank" href="https://www.youtube.com/@javabitpro-editor/videos"><i class="fa-brands fa-youtube"></i></i></a>
</div>
</li>
<li style="margin-bottom: 60px;">
<span class="fab-label">Website</span>
<div class="fab-icon-holder">
<a target="_blank" href="https://www.javabitpro.com/"><i class="fa-solid fa-globe"></i></a>
</div>
</li>
</ul>
</div>
<style>
.fab-container2 {
position: fixed;
bottom: 80px;
right: 1px;
z-index: 999;
cursor: pointer;
}
.fab-label2 {
padding: 2px 5px;
align-self: center;
user-select: none;
white-space: nowrap;
border-radius: 3px;
font-size: 16px;
background: #666666;
color: #ffffff;
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
/* margin-right: 10px; */
}
.fab-container {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 999;
cursor: pointer;
}
.fab-icon-holder {
width: 50px;
height: 50px;
border-radius: 100%;
background: #6dd4fc;
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.fab-icon-holder:hover{
opacity: 0.8;
}
.fab-icon-holder i {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 25px;
color: #000000;
}
.fab {
width: 56px;
height: 56px;
background: #6dd4fc;
}
.fab-options {
list-style-type: none;
margin: 0;
position: absolute;
bottom: 70px;
right: 0;
opacity: 0;
transition: all 0.3s ease;
transform: scale(0);
transform-origin: 85% bottom;
}
.fab:hover + .fab-options, .fab-options:hover {
opacity: 1;
transform: scale(1);
}
.fab-options li {
display: flex;
justify-content: flex-end;
padding: 5px;
}
.fab-label {
padding: 2px 5px;
align-self: center;
user-select: none;
white-space: nowrap;
border-radius: 3px;
font-size: 16px;
background: #666666;
color: #ffffff;
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
margin-right: 10px;
}
a {
color: inherit;
text-decoration: none;
}
</style>
<!-- ------------------------------ Visit ------------------------------- -->
<div class="fab-container2">
<p class="fab-label2">Visit</p>
</div>
<div class="fab-container">
<div class="fab fab-icon-holder">
<i><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC7hb7GJ4v4IwapVwZJJyvGsG5WF4RxsmEb0va1X0t-6urm1PGPDA2IEsETeLCuiyfJkUWhOOIUg9FN_Dr3gJJQmQUe2-AnYI3-R05TC6PbMRSnaljamNC9lQMOeE2q4Dr29jkfEaYwpadAjraVGgIgC_wGGp596Uh6tLX_ClrfbqK3wdhz4jE7i16/s1600/PNG%20JP.png" style="width: 75px;"></i>
</div>
<ul class="fab-options">
<li>
<span class="fab-label">Youtube</span>
<div class="fab-icon-holder">
<a target="_blank" href="https://www.youtube.com/@javabitpro-editor/videos"><i class="fa-brands fa-youtube"></i></i></a>
</div>
</li>
<li style="margin-bottom: 60px;">
<span class="fab-label">Website</span>
<div class="fab-icon-holder">
<a target="_blank" href="https://www.javabitpro.com/"><i class="fa-solid fa-globe"></i></a>
</div>
</li>
</ul>
</div>
7. Klik Terapkan/Deploy lalu pilih Deployment baru/New deployment.
8. Pastikan typenya adalah Web app dan hak aksesnya adalah Siapa saja/Anyone lalu pilih Terapkan/Deploy.
9. Klik atau salin Url yang sudah di Deploy.
SELESAI !!!
