Fiz muita coisa aqui!

_includes/maps.html

@@ -0,0 +1,58 @@
+<table id="temporary-table" style="display: none;">
+    {% for person in site.people %}
+        <tr>
+            <td>{{ person.nome }}</td>
+            <td>{{ person.latitude }}</td>
+            <td>{{ person.longitude }}</td>
+        </tr>
+    {% endfor %}
+</table>
+
+<div id="map"></div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+      // Selecionar a tabela oculta
+      var table = document.getElementById('temporary-table');
+      var rows = table.getElementsByTagName('tr');
+    
+      var totalLatitude = 0;
+      var totalLongitude = 0;
+      var count = rows.length;
+    
+      // Iterar sobre as linhas da tabela para pegar os dados
+      for (var i = 0; i < count; i++) {
+        var cells = rows[i].getElementsByTagName('td');
+        var latitude = parseFloat(cells[1].innerText); // Latitude
+        var longitude = parseFloat(cells[2].innerText); // Longitude
+    
+        totalLatitude += latitude;
+        totalLongitude += longitude;
+      }
+    
+      // Calcular a média
+      var averageLatitude = totalLatitude / count;
+      var averageLongitude = totalLongitude / count;
+    
+      // Inicializar o mapa com a média das coordenadas
+      var map = L.map('map').setView([averageLatitude, averageLongitude], 13);
+    
+      // Adicionar a camada de tile do OpenStreetMap
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      }).addTo(map);
+    
+      // Adicionar marcadores para todas as pessoas
+      for (var i = 0; i < count; i++) {
+        var cells = rows[i].getElementsByTagName('td');
+        var nome = cells[0].innerText; // Nome da pessoa
+        var latitude = parseFloat(cells[1].innerText); // Latitude
+        var longitude = parseFloat(cells[2].innerText); // Longitude
+    
+        L.marker([latitude, longitude]).addTo(map)
+          .bindPopup(nome);
+      }
+    });
+    </script>
+    
+