JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <style>
    	#map-div { height: 100%; width: 100%; }
    </style>
</head>
<body>
    <div id="map-div"></div>
    <script type="text/javascript" src="tabletop-example.js"></script>
</body>
</html>

JavaScript

function init() {
    Tabletop.init({
        key: 'https://docs.google.com/spreadsheets/d/11Yg9_3Ttoh-_dvMWB5jhPirkx1Pi3oVxyf7tmm7FG9Q/edit?usp=sharing',
        callback: myFunction,
        simpleSheet: true
    })
}

window.addEventListener('DOMContentLoaded', init)

function myFunction(data, tabletop) {
    console.log(data);
}


var map = L.map('map-div').setView([64.6220498,25.5689638], 5);
var basemap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Basemap (c) <a href="http://openstreetmap.org">OpenStreetMap</a>',
        minZoom: 5,
        maxZoom: 18
    });
basemap.addTo(map);

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>');
    }
}