Markers in leaflet map using tabletop.js Why its not working?

Question

I'm noob to javascript... I tried to find a solution to a problem on a similar thread, but I don't know why it doesn't work in my case. I can't comment there so I add new question.

All my code is here: Link to Fiddle

When I changed code with example, the map stopped showing. Where have I done the mistake? Thank You for helping me.

Main part of js is like this:

function myFunction() {

// Add MAP
var map = L.map('map').setView([54.151, 17.823], 9);
var basemap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    minZoom: 5,
    maxZoom: 19
});
basemap.addTo(map);

/* ----------------------------------------------- */
// ZOOMING TO DETECT LOCATION
// map.locate({setView: true, maxZoom: 16});
/* ----------------------------------------------- */
// INFO ABOUT DETECT LOCATION      
function onLocationFound(e) {
    var radius = e.accuracy;

    L.marker(e.latlng).addTo(map)
        .bindPopup("Jesteśw odległości " + radius + " [m] od tego punktu.").openPopup();

    L.circle(e.latlng, radius).addTo(map);
}

map.on('locationfound', onLocationFound);

// ERROR DETECT LOCATION
function onLocationError(e) {
    alert(e.message);
}

// MOUSE CLICK POSITION
var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("" + e.latlng.toString())
        .openOn(map);
}

map.on('click', onMapClick);

/* ----------------------------------------------- */
// MARKERS
//  var pkt = L.marker([54.46791, 17.0288]).addTo(map).bindPopup("CIO");
/* ----------------------------------------------- */

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].Info + '</strong>');
    }
}

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

Answer 1

The code in JSFiddle doesn't work because the default JSFiddle javascript Load Type setting is On Load. This means that it will load everything that you have in JavaScript tab without you needing to load anything manually.

But your whole thing initializes with onload callback to myFunction() and it will never fire with that setting enabled. You have two possible solutions:

• if you don't want to change anything in Fiddle configuration, than you need to remove onload from the body tag and change myFunction() into self-invoking function:

  (function () { **body of the function** }())

• or just edit the Fiddle settings (change Load type to No wrap - Bottom of ):