title: Add markers and polylines to a Leaflet map from destinations in a Google Sheet
body: <p>I'm trying to create a Leaflet map, that automatically adds markers and polylines between destinations from a Google sheet.</p>
  <p>I've managed to set up a map from other examples which is linked to my Google Sheet. You see the example here:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;script src='//cdn.jsdelivr.net/npm/tabletop@1.5.2/src/tabletop.min.js'&gt;&lt;/script&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.3.4/dist/leaflet.css&quot; /&gt;
      &lt;script src=&quot;//unpkg.com/leaflet@1.3.4/dist/leaflet.js&quot;&gt;&lt;/script&gt;
      &lt;style&gt;
        #map-div {
          position: absolute;
          height: 100%;
          width: 100%;
        }
  
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id=&quot;map-div&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <pre><code>var map = L.map('map-div').setView([60.1682653, 24.9422078], 5);
  var basemap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Basemap (c) &lt;a href=&quot;http://openstreetmap.org&quot;&gt;OpenStreetMap&lt;/a&gt;',
    minZoom: 5,
    maxZoom: 100
  });
  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('&lt;strong&gt;' + data[row].Info + '&lt;/strong&gt;');
    }
  }
  
  function init() {
    Tabletop.init({
      key: 'https://docs.google.com/spreadsheets/d/1Rs6xPlJ8pU4UFfmokjATaf4dArMWxQxZcyS-xRIIFuY/edit?usp=sharing',
      callback: addPoints,
      simpleSheet: true
    })
  }
  init()
  </code></pre>
  <p><a href="https://jsfiddle.net/Enounce/kwvn5e6z/12/" rel="nofollow noreferrer">https://jsfiddle.net/Enounce/kwvn5e6z/12/</a></p>
  <p>But unfortunately, I don't have the skills to make the map do what I want:</p>
  <ul>
  <li>Draw lines between markers <a href="https://stackoverflow.com/questions/33468905/draw-lines-between-markers-in-leaflet">Draw lines between markers in leaflet</a></li>
  <li>Zoom to fit all markers <a href="https://stackoverflow.com/questions/38155534/zoom-to-fit-all-markers-on-leafletjs-map">Zoom to Fit All Markers on LeafletJS Map</a></li>
  <li>If possible, add an overview of all destinations, much like the directions panel in Google Maps. I haven't been able to find examples of this though.</li>
  </ul>
  <p>I'm unsure if this is at all possible with the destinations being in an external source. Any help is appreciated!</p>