Google Sheets sync with leaflet not working

Question

I have been fighting with my GoogleSheets files in order to display them in the leaflet map.

I found quite a fev advices how to do it:

https://rdrn.me/leaflet-maps-google-sheets/ - this one is the major one

How to add markers to leaflet map with tabletop.js? - here is one of the example with working Fiddle. the same as here: Markers in leaflet map using tabletop.js Why its not working? https://jsfiddle.net/a21yb4uq/

All of them looks so simple, but once I paste my own link, nothing is populated on the map.

I tried also with File -> Publish to the web option as well as Share - share to the web.

Nothing changed.

The fetched links in these examples given look as follows:

         function init() {
       Tabletop.init({
        key: 'https://docs.google.com/spreadsheets/d/1pQOKxyrqjyzI0gGOwkXTaHCoBjg-voJ_Xh7AUbU2Z5o/edit?usp=sharing',
       callback: addPoints,
       simpleSheet: true
      })
    }
     init()

and 2nd

   function init() {
    Tabletop.init({
     key: 'https://docs.google.com/spreadsheets/d/1BTlWo-T636OCGK-tRMHRP55MQ24OwQ-ZF9yOszyppxk/edit?usp=sharing',
     callback: addPoints,
      simpleSheet: true
     })
   }
   init()

so in both of them, the link ends =sharing, which means, that the data has been shared to the web only

My links looks as follows:

   https://docs.google.com/spreadsheets/d/1pQOKxyrqjyzI0gGOwkXTaHCoBjg-voJ_Xh7AUbU2Z5o/edit?usp=sharing


   https://docs.google.com/spreadsheets/d/1yH4TpDwIJB7v2nZqS7WHl_E11_-Gcdo4fwzckXGpuDY/edit?usp=sharing

There is no issue with my columns/data, because one of the example has been literally copied from the JsFiddle one. The issue is with the sharing somewhere. Could anybody advise what to do?

Answer 1

It seems to work with one of your files on the fiddle, when i paste one of your google sheet link, points appear in Poland.

But they have "undefined" in the description. to fix this you must modify the addPoints

function addPoints(data, tabletop) {
  for (var row in data) {
    var marker = L.marker([
      data[row].Latitude,
      data[row].Longitude
    ]).addTo(map);
    marker.bindPopup('<strong>' + 
      data[row].Miasto +  // <- or anything you want
      '</strong>');
  }
}

Answer 2

It looks like we must do 2 steps after preparing our Google Sheets data:

1. File -> Publish to the web
2. Share -> from private to public - then copy link into your Tabletop function in key option.