Embed Map with a Marker on Web App on Google Sheets using Google Apps Script

[@CodeWithCurt]

HTML and Javascript Code in Video:





function loadAddresses()
{

google.script.run.withSuccessHandler(function(ar)
{
var addressesSelect = document.getElementById("addresses");
console.log(ar);

let option = document.createElement("option");
option.value = "";
option.text = "";
addressesSelect.appendChild(option);

ar.forEach(function(item, index)
{
let option = document.createElement("option");
var location = item[0];
var streetAddress = item[1];
var city = item[2];
var state = item[3];
var zip = item[4];
option.value = streetAddress + ' ' + city + ', ' + state + ' ' + zip;
option.text = location;
addressesSelect.appendChild(option);
});

}).getList();

};

function onSelect()
{

var address = document.getElementById("addresses").value;
google.script.run.withSuccessHandler(function(ar)
{

console.log(ar);
ar.forEach(function(item, index)
{

document.getElementById('locationMap').innerHTML = "";

var map = L.map('map',{
center: [item[0], item[1]],
zoom: 15
});
L.tileLayer('{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);

var marker = L.marker([item[0], item[1]]).addTo(map);

});

}).getAddress(address);

}



Pick Location:  

loadAddresses();

[@VinodKumar-cy2di]

Hi

[@carlosmolina3144]

hOLA Curt, estoy muy agradecido por compartirme tus conocimientos!

Hello, congratulations for your excellent work, one question, how can I show all the points, and use filters with some data from the google sheets sheet, greetings always...

[@FrancescoCotroneo1]

Hi. Very useful video, thanks. You said you would post the code here in the comments. Will you?

[@CodeWithCurt]

The code is posted in one of the comments below the video.

[@Maxneo44]

Hello, I'm not very good with google api and leafletjs: /
I just want to get my addresses with a name and all of them displayed on the map at the same time.
could you help me? or a track to follow?
thank you in advance

[@shalomg8871]

Same ⬆

[@shalomg8871]

Did you ever figure out a solution to this?

[@Maxneo44]

@@shalomg8871 I switched to the Google maps api...

[@jhicinternational]

thanks !

[@kamalrajm1598]

Hello ... It would be very helpful if you could let us know how to save a range as PDF and send via whatsapp