From 7b14a46e8406921a1cef3a26c628cad7cc26b535 Mon Sep 17 00:00:00 2001
From: lilith_daugther <kaithlyn.mendez@gmail.com>
Date: Fri, 7 Jun 2024 18:51:58 -0600
Subject: [PATCH] cambio de api de mapa

---
 .../parque_quantum/templates/base2.html       |  3 ++
 .../parque_quantum/templates/inicio.html      | 29 +++++++------------
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/sitio_quantum/parque_quantum/templates/base2.html b/sitio_quantum/parque_quantum/templates/base2.html
index b9d5918..314fbbb 100644
--- a/sitio_quantum/parque_quantum/templates/base2.html
+++ b/sitio_quantum/parque_quantum/templates/base2.html
@@ -9,6 +9,9 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css" />
+    <script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"></script>
+
 
 
     <title>Parque Quantum</title>
diff --git a/sitio_quantum/parque_quantum/templates/inicio.html b/sitio_quantum/parque_quantum/templates/inicio.html
index a3a1409..44fb3bf 100644
--- a/sitio_quantum/parque_quantum/templates/inicio.html
+++ b/sitio_quantum/parque_quantum/templates/inicio.html
@@ -102,26 +102,19 @@ Parque Etnobiológico
   <div class="container">
     <div class="row align-items-start">
       <div class="col-md-6 order-md-2">
-        <div id="map">
-
-        </div>
-    <script>
-      function initMap() {
-        var location = {lat: 22.784534, lng: -102.612045}; // Coordinates to center the map
-        var map = new google.maps.Map(document.getElementById('map'), {
-          zoom: 14,
-          center: location
-        });
-        var marker = new google.maps.Marker({
-          position: location,
-          map: map,
-          title: 'My location'
-        });
-      }
-    </script>
-    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjRmm_aX1EVjvMyWphbwcybhEz-gYzqWk&callback=initMap"></script>
+       <div id="mapid" style="width: 500px; height: 400px;">
+        <script>
+          var myMap = L.map('mapid').setView([22.78385, -102.61206], 13); // Coordenadas y zoom inicial
 
+          L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+            maxZoom: 18,
+          }).addTo(myMap);
+          var marker = L.marker([22.78385, -102.61206]).addTo(myMap);
+          marker.bindPopup("<b>Hola!</b><br>Estoy aquí.").openPopup();
 
+        </script>
+        </div>
       </div>
       <div class="col-md-6 order-md-2">
         <br>
-- 
GitLab