{"id":8241,"date":"2025-08-17T00:48:45","date_gmt":"2025-08-16T23:48:45","guid":{"rendered":"https:\/\/lifeforall-europe.org\/?page_id=8241"},"modified":"2026-10-21T12:30:52","modified_gmt":"2026-10-21T11:30:52","slug":"churches","status":"publish","type":"page","link":"https:\/\/lifeforall-europe.org\/es\/churches\/","title":{"rendered":"Iglesias"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8241\" class=\"elementor elementor-8241\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5569c47 e-flex e-con-boxed e-con e-parent\" data-id=\"5569c47\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-765c066 elementor-widget elementor-widget-html\" data-id=\"765c066\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"mapContainer\">\r\n  <div id=\"listPanel\">\r\n    <div id=\"dragHandle\">\r\n      <div id=\"dragBar\"><\/div>\r\n    <\/div>\r\n    <div id=\"listContainer\"><\/div>\r\n    <button id=\"resetListBotton\">\r\n      <svg\r\n        width=\"1rem\"\r\n        height=\"1rem\"\r\n        viewBox=\"0 0 16 16\"\r\n        xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n        fill=\"none\"\r\n      >\r\n        <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"><\/g>\r\n        <g\r\n          id=\"SVGRepo_tracerCarrier\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        ><\/g>\r\n        <g id=\"SVGRepo_iconCarrier\">\r\n          <path\r\n            fill=\"currentColor\"\r\n            d=\"M7.248 1.307A.75.75 0 118.252.193l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 01-1.004-1.114l1.29-1.161a4.5 4.5 0 103.655 2.832.75.75 0 111.398-.546A6 6 0 118.018 2l-.77-.693z\"\r\n          ><\/path>\r\n        <\/g>\r\n      <\/svg>\r\n      Reset map\r\n    <\/button>\r\n  <\/div>\r\n  <button id=\"resetMapBotton\">\r\n    <svg\r\n      width=\"1rem\"\r\n      height=\"1rem\"\r\n      viewBox=\"0 0 16 16\"\r\n      xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n      fill=\"none\"\r\n    >\r\n      <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"><\/g>\r\n      <g\r\n        id=\"SVGRepo_tracerCarrier\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      ><\/g>\r\n      <g id=\"SVGRepo_iconCarrier\">\r\n        <path\r\n          fill=\"currentColor\"\r\n          d=\"M7.248 1.307A.75.75 0 118.252.193l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 01-1.004-1.114l1.29-1.161a4.5 4.5 0 103.655 2.832.75.75 0 111.398-.546A6 6 0 118.018 2l-.77-.693z\"\r\n        ><\/path>\r\n      <\/g>\r\n    <\/svg>\r\n  <\/button>\r\n  <div id=\"mapaEuropa\"><\/div>\r\n<\/div>\r\n<style>\r\n  #mapContainer {\r\n    display: flex;\r\n    width: 100%;\r\n    height: 88vh;\r\n  }\r\n\r\n  #mapaEuropa {\r\n    flex-grow: 1;\r\n    z-index: 0;\r\n  }\r\n\r\n  #listPanel {\r\n    background-color: #f4f4f4;\r\n    position: relative;\r\n    width: 35vw;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    font-family: 'Helixa' Arial, Helvetica, sans-serif;\r\n  }\r\n\r\n  #listContainer {\r\n    box-sizing: border-box;\r\n    flex: 1;\r\n    overflow-y: auto;\r\n    padding: 0.5rem;\r\n    padding-bottom: 4rem;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 1rem;\r\n    scroll-behavior: smooth;\r\n    -webkit-overflow-scrolling: touch;\r\n  }\r\n\r\n  .church-item {\r\n    background: white;\r\n    border: 1px solid #dbdbdb;\r\n    width: 100%;\r\n    padding: 1rem;\r\n    border-radius: 25px;\r\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);\r\n  }\r\n\r\n  .church-item a {\r\n    color: #37779a;\r\n  }\r\n  .church-item a:hover {\r\n    color: #4897c2;\r\n  }\r\n\r\n  .church-item.active {\r\n    background: rgba(185, 232, 255, 0.1);\r\n    border-left: 1.5px solid #153240;\r\n    border-top: 1.5px solid #153240;\r\n    border-right: 2px solid #153240;\r\n    border-bottom: 2px solid #153240;\r\n    box-shadow: 0 6px 14px rgba(21, 50, 64, 0.35);\r\n  }\r\n\r\n  .church-item.coe {\r\n    background: #153240;\r\n    color: white;\r\n    border: 2px solid #0d242e;\r\n  }\r\n  .church-item.coe a {\r\n    color: #8dcdec;\r\n  }\r\n  .church-item.coe a:hover {\r\n    color: #c6ebfe;\r\n  }\r\n\r\n  .church-item.coe.active {\r\n    background: rgba(21, 50, 64, 0.97);\r\n    border-left: 2px solid #37779a;\r\n    border-top: 2px solid #37779a;\r\n    border-right: 2.5px solid #37779a;\r\n    border-bottom: 2.5px solid #37779a;\r\n    box-shadow: 0 6px 14px rgba(28, 69, 90, 0.45);\r\n  }\r\n\r\n  #resetListBotton {\r\n    display: none;\r\n    position: absolute;\r\n    bottom: 1%;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    z-index: 1000;\r\n    padding: 0.5rem 1rem;\r\n    gap: 0.5rem;\r\n    align-items: center;\r\n    background: #153240;\r\n    color: white;\r\n    border: none;\r\n    border-radius: 8px;\r\n    cursor: pointer;\r\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);\r\n    transition: all 0.3s ease;\r\n  }\r\n  #resetListBotton:hover {\r\n    background: white;\r\n    color: #153240;\r\n    box-shadow: 0 6px 14px rgba(21, 50, 64, 0.35);\r\n    transform: translateX(-50%) translateY(-2px);\r\n  }\r\n\r\n  #resetListBotton svg {\r\n    transition: transform 0.4s ease-in-out;\r\n  }\r\n\r\n  #resetListBotton:hover svg {\r\n    transform: rotate(340deg);\r\n  }\r\n\r\n  #resetMapBotton {\r\n    display: none;\r\n    position: absolute;\r\n    top: 10px;\r\n    right: 10px;\r\n    z-index: 1000;\r\n    padding: 0.8rem;\r\n    align-items: center;\r\n    background: #153240;\r\n    color: white;\r\n    border: 2px solid #112834;\r\n    border-radius: 40px;\r\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);\r\n  }\r\n\r\n  .leaflet-popup-content-wrapper {\r\n    background-color: #153240 !important;\r\n    border-radius: 8px !important;\r\n    padding: 0 !important;\r\n    overflow: hidden;\r\n  }\r\n  .leaflet-popup-tip {\r\n    background-color: #153240 !important;\r\n  }\r\n  .leaflet-popup-content {\r\n    margin: 1.25rem !important;\r\n    margin-right: 1.75rem !important;\r\n    font-family: 'Helixa', Arial, sans-serif !important;\r\n  }\r\n\r\n  .popup-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    width: 100%;\r\n    height: 100%;\r\n    gap: 0.4rem;\r\n  }\r\n\r\n  .popup-content p {\r\n    margin: 0 !important;\r\n    color: white;\r\n  }\r\n\r\n  .popup-content h4 {\r\n    font-weight: 900 !important;\r\n    margin: 0 0 0.2rem;\r\n    color: white;\r\n  }\r\n\r\n  .popup-content a {\r\n    color: #8dcdec !important;\r\n    text-decoration: none;\r\n    font-weight: 600 !important;\r\n  }\r\n  .popup-content a:hover {\r\n    color: #c6ebfe !important;\r\n  }\r\n\r\n  .leaflet-popup-close-button {\r\n    color: white !important;\r\n    font-size: 20px !important;\r\n    border-radius: 4px;\r\n    right: 5px !important;\r\n    top: 5px !important;\r\n    align-content: center !important;\r\n    transition: all 0.2s ease;\r\n  }\r\n  .leaflet-popup-close-button span {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    transform: translateY(-1px);\r\n  }\r\n\r\n  .leaflet-popup-close-button:hover {\r\n    font-size: 22px !important;\r\n    color: #c7c6c6 !important;\r\n  }\r\n\r\n  .map-link {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 0.25rem;\r\n    margin-top: 0.25rem;\r\n  }\r\n  .map-link:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  .map-link svg {\r\n    width: 0.95rem;\r\n    height: 0.95rem;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  @media (max-width: 1024px) {\r\n    #listPanel {\r\n      width: 45%;\r\n    }\r\n  }\r\n  @media (max-width: 767px) {\r\n    #mapContainer {\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    #mapaEuropa {\r\n      height: 100%;\r\n    }\r\n\r\n    #listPanel {\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background: #f4f4f4;\r\n      border-top-left-radius: 20px;\r\n      border-top-right-radius: 20px;\r\n      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);\r\n      padding-bottom: 30%;\r\n      z-index: 1;\r\n\r\n      transform: translateY(80%);\r\n      transition: transform 0.3s ease;\r\n      touch-action: none;\r\n    }\r\n\r\n    #listPanel.open {\r\n      transform: translateY(20%);\r\n    }\r\n\r\n    #dragBar {\r\n      width: 50px;\r\n      height: 6px;\r\n      background: #bbb;\r\n      border-radius: 10px;\r\n      margin: 10px auto;\r\n      cursor: grab;\r\n    }\r\n  }\r\n<\/style>\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\"\r\n\/>\r\n\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n\r\n<script>\r\n  \/\/\/\/\/\/\/\/\/\/\/\/\/\r\n  \/\/ CLASSES \/\/\r\n  \/\/\/\/\/\/\/\/\/\/\/\/\/\r\n  class ChurchMarker {\r\n    constructor({\r\n      countryId,\r\n      country,\r\n      name,\r\n      info,\r\n      address,\r\n      schedule,\r\n      lat,\r\n      lng,\r\n      isCOE = false\r\n    }) {\r\n      this.countryId = countryId\r\n      this.country = country\r\n      this.name = name\r\n      this.info = info\r\n      this.address = address\r\n      this.schedule = schedule\r\n      this.lat = lat\r\n      this.lng = lng\r\n      this.marker = null\r\n      this.isCOE = isCOE\r\n    }\r\n  }\r\n\r\n  class CountryZone {\r\n    constructor(countryId) {\r\n      this.countryId = countryId\r\n      this.zone = null\r\n      this.layer = null\r\n    }\r\n  }\r\n\r\n  \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n  \/\/ HTMLElements \/\/\r\n  \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n  const resetListButton = document.getElementById('resetListBotton')\r\n  const resetMapBotton = document.getElementById('resetMapBotton')\r\n  const listContainer = document.getElementById('listContainer')\r\n  const listPanel = document.getElementById('listPanel')\r\n  const dragHandle = document.getElementById('dragHandle')\r\n\r\n  \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n  \/\/ MARKERS AND ZONES \/\/\r\n  \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n  let churchMarkers = []\r\n  let countryZones = []\r\n  let removedCountryZone = null\r\n\r\n  \/\/ ICONS\r\n  const customIcon = L.icon({\r\n    iconUrl:\r\n      'https:\/\/lifeforall-europe.org\/wp-content\/uploads\/2026\/03\/marker-big-white-01-scaled.png',\r\n    iconSize: [40, 40],\r\n    iconAnchor: [20, 40],\r\n    popupAnchor: [0, -40]\r\n  })\r\n  const customCoeIcon = L.icon({\r\n    iconUrl:\r\n      'https:\/\/lifeforall-europe.org\/wp-content\/uploads\/2026\/03\/marker-big-blue-01-scaled.png',\r\n    iconSize: [45, 45],\r\n    iconAnchor: [20, 40],\r\n    popupAnchor: [0, -40]\r\n  })\r\n\r\n  \/\/ MAP CONFIG\r\n  const countries = {\r\n    ESP: '#8c7722', \/\/ Spain\r\n    PRT: '#10611f', \/\/ Portugal\r\n    \/\/ ITA: '#228c35', \/\/ Italy\r\n    \/\/ FRA: '#223dba', \/\/ France\r\n    DEU: '#3b3b3b' \/\/ Germany\r\n    \/\/ GBR: '#8c2222' \/\/ Great Britain\r\n  }\r\n  const europeBounds = [\r\n    [20, -34],\r\n    [68, 45]\r\n  ]\r\n\r\n  const isMobileInit = window.matchMedia('(max-width: 767px)').matches\r\n\r\n  const initialView = isMobileInit\r\n    ? { center: [38, 3], zoom: 3.5, minZoom: 3.5 }\r\n    : { center: [48, 15], zoom: 4, minZoom: 4.4 }\r\n\r\n  const map = L.map('mapaEuropa', {\r\n    maxBounds: europeBounds,\r\n    maxBoundsViscosity: 0.6,\r\n    minZoom: initialView.minZoom,\r\n    attributionControl: false\r\n  }).setView(initialView.center, initialView.zoom)\r\n  L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png').addTo(map)\r\n\r\n  function clearMarkersMap() {\r\n    churchMarkers.forEach(churchMarker => {\r\n      if (churchMarker.marker) {\r\n        map.removeLayer(churchMarker.marker)\r\n      }\r\n    })\r\n  }\r\n\r\n  \/\/ Funci\u00f3n que se ejecuta al hacer click en un layer\r\n  function onClickedLayer(layer, zone, countryId, activeMarker = null) {\r\n    if (zone.disabled) return\r\n\r\n    if (removedCountryZone && removedCountryZone !== zone) {\r\n      removedCountryZone.setStyle({ fillOpacity: 0.7 })\r\n      removedCountryZone.disabled = false\r\n    }\r\n\r\n    removedCountryZone = zone\r\n    removedCountryZone.setStyle({ fillOpacity: 0.1 })\r\n    removedCountryZone.disabled = true\r\n\r\n    map.fitBounds(layer.getBounds())\r\n    clearMarkersMap()\r\n\r\n    const countryMarkers = churchMarkers.filter(\r\n      churchMarker => churchMarker.countryId == countryId\r\n    )\r\n    countryMarkers.forEach(churchMarker => churchMarker.marker.addTo(map))\r\n    renderList(countryMarkers, activeMarker)\r\n  }\r\n\r\n  function initializeMap() {\r\n    churchMarkers = createCountryMarkers()\r\n    renderList(churchMarkers)\r\n    Object.entries(countries).forEach(([countryId, color]) => {\r\n      fetch(\r\n        `https:\/\/raw.githubusercontent.com\/johan\/world.geo.json\/master\/countries\/${countryId}.geo.json`\r\n      )\r\n        .then(res => res.json())\r\n        .then(data => {\r\n          const countryZone = new CountryZone(countryId)\r\n          countryZone.zone = L.geoJSON(data, {\r\n            style: { color: color, weight: 2, fillOpacity: 0.7 },\r\n            onEachFeature: (feature, layer) => {\r\n              countryZone.layer = layer\r\n              countryZone.layer.on('click', () =>\r\n                onClickedLayer(countryZone.layer, countryZone.zone, countryId)\r\n              )\r\n            }\r\n          })\r\n          countryZones.push(countryZone)\r\n\r\n          \/\/ Guardamos el countryId dentro del geoJSON para usarlo al restaurar\r\n          countryZone.zone.countryId = countryId\r\n\r\n          countryZone.zone.addTo(map)\r\n        })\r\n        .catch(err => console.error('Error cargando pa\u00eds:', countryId, err))\r\n    })\r\n    \/\/ Reset\r\n    resetListButton.addEventListener('click', resetMap)\r\n    resetMapBotton.addEventListener('click', resetMap)\r\n    map.on('click', function (e) {\r\n      let clickedInsideZone = false\r\n\r\n      countryZones.forEach(cz => {\r\n        if (cz.layer && cz.layer.getBounds().contains(e.latlng)) {\r\n          clickedInsideZone = true\r\n        }\r\n      })\r\n\r\n      if (!clickedInsideZone) {\r\n        resetMap()\r\n      }\r\n    })\r\n  }\r\n\r\n  function createCountryMarkers() {\r\n    const markers = []\r\n    \/\/ CHURCH MARKERS IN SPAIN\r\n    const markerMadrid = new ChurchMarker({\r\n      countryId: 'ESP',\r\n      country: 'Spain',\r\n      name: 'Church in Madrid',\r\n      info: '',\r\n      address: 'Calle de los Algodonales 40, Madrid',\r\n      schedule: 'Sunday service at 11:00',\r\n      lat: 40.461296,\r\n      lng: -3.702508\r\n    })\r\n    markers.push(markerMadrid)\r\n\r\n    \/\/ CHURCH MARKERS IN PORTUGAL\r\n    const markerLisbon = new ChurchMarker({\r\n      countryId: 'PRT',\r\n      country: 'Portugal',\r\n      name: 'Church in Lisbon',\r\n      info: '',\r\n      address: 'Rua Cruz da Carreira, 4B, Lisbon',\r\n      schedule: 'Sunday service at 10:00',\r\n      lat: 38.724395,\r\n      lng: -9.140555\r\n    })\r\n    markers.push(markerLisbon)\r\n\r\n    const markerPorto = new ChurchMarker({\r\n      countryId: 'PRT',\r\n      country: 'Portugal',\r\n      name: 'Church in Porto',\r\n      info: '',\r\n      address: 'Rua Antero de Quental 1046',\r\n      schedule: 'Sunday service at 10:00',\r\n      lat: 41.167453,\r\n      lng: -8.610805\r\n    })\r\n    markers.push(markerPorto)\r\n\r\n    const markerCOE = new ChurchMarker({\r\n      countryId: 'PRT',\r\n      country: 'Portugal',\r\n      name: 'Centro de Obra | Life for All Europe',\r\n      info: '',\r\n      address: 'Rua Sim\u00e3o 20, Torres Vedras',\r\n      schedule: 'Sunday service at 10:30',\r\n      lat: 39.13016,\r\n      lng: -9.319465,\r\n      isCOE: true\r\n    })\r\n    markers.push(markerCOE)\r\n\r\n    \/\/ CHURCH MARKERS IN GERMANY\r\n    const markerVaihingenEnz = new ChurchMarker({\r\n      countryId: 'DEU',\r\n      country: 'Germany',\r\n      name: 'Church in Kleinglattbach',\r\n      info: '',\r\n      address: 'Adenauerstra\u00dfe 16, 71665, Kleinglattbach',\r\n      schedule: 'Sundays at 10:15',\r\n      lat: 48.953545,\r\n      lng: 8.983454\r\n    })\r\n    markers.push(markerVaihingenEnz)\r\n\r\n    markers.forEach(churchMarker => {\r\n      const popUpHtml = `\r\n        <div class=\"popup-content\">\r\n          <h4>${churchMarker.name}<\/h4>\r\n          <p>${churchMarker.address}<\/p>\r\n          <p><strong>${churchMarker.schedule}<\/strong><\/p>\r\n\r\n            <a\r\n              href=\"https:\/\/www.google.com\/maps?q=${churchMarker.lat},${churchMarker.lng}\"\r\n              target=\"_blank\"\r\n              class=\"map-link\"\r\n            >\r\n            <svg style=\"transform: translateY(-1.5px);\" viewBox=\"0 0 384 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n              <path fill=\"currentColor\"\r\n                d=\"M172.268 501.67C26.97 291.031 0 269.413 0 192\r\n                  0 85.961 85.961 0 192 0s192 85.961 192 192\r\n                  c0 77.413-26.97 99.031-172.268 309.67\r\n                  -9.535 13.774-29.93 13.773-39.464 0z\r\n                  M192 272c44.183 0 80-35.817 80-80s-35.817-80\r\n                  -80-80-80 35.817-80 80 35.817 80 80 80z\"\r\n              \/>\r\n            <\/svg>\r\n            See in Google Maps\r\n          <\/a>\r\n        <\/div>\r\n      `\r\n\r\n      churchMarker.marker = L.marker([churchMarker.lat, churchMarker.lng], {\r\n        icon: churchMarker.isCOE ? customCoeIcon : customIcon\r\n      })\r\n        .bindPopup(popUpHtml)\r\n        .on('click', () => {\r\n          highlightItem(churchMarker)\r\n          scrollToItem(churchMarker)\r\n          map.flyTo([churchMarker.lat, churchMarker.lng], 16)\r\n        })\r\n    })\r\n\r\n    return markers\r\n  }\r\n\r\n  function highlightItem(churchMarker) {\r\n    const items = document.querySelectorAll('.church-item')\r\n\r\n    items.forEach(item => {\r\n      item.classList.remove('active')\r\n\r\n      if (item.dataset.name === churchMarker.name) {\r\n        item.classList.add('active')\r\n      }\r\n    })\r\n  }\r\n\r\n  function scrollToItem(churchMarker) {\r\n    const el = document.querySelector(`[data-name=\"${churchMarker.name}\"]`)\r\n\r\n    if (el) {\r\n      \/\/ Posici\u00f3n relativa al contenedor\r\n      const offsetTop = el.offsetTop\r\n      const containerHeight = listContainer.clientHeight\r\n      const elHeight = el.offsetHeight\r\n\r\n      \/\/ Centrar el elemento dentro del contenedor\r\n      const scrollTop = offsetTop - containerHeight \/ 2 + elHeight \/ 2\r\n\r\n      listContainer.scrollTo({\r\n        top: scrollTop,\r\n        behavior: 'smooth'\r\n      })\r\n    }\r\n  }\r\n\r\n  function renderList(renderedChurchMarkers, activeMarker = null) {\r\n    listContainer.innerHTML = ''\r\n\r\n    \/\/ Mostrar u ocultar bot\u00f3n correctamente\r\n    const isMobile = window.matchMedia('(max-width: 767px)').matches\r\n    if (isMobile) {\r\n      if (renderedChurchMarkers.length === churchMarkers.length) {\r\n        resetMapBotton.style.display = 'none'\r\n      } else {\r\n        resetMapBotton.style.display = 'flex'\r\n      }\r\n    } else {\r\n      if (renderedChurchMarkers.length === churchMarkers.length) {\r\n        resetListButton.style.display = 'none'\r\n      } else {\r\n        resetListButton.style.display = 'flex'\r\n      }\r\n    }\r\n\r\n    renderedChurchMarkers.forEach(churchMarker => {\r\n      const div = document.createElement('div')\r\n      div.className = 'church-item'\r\n\r\n      div.dataset.name = churchMarker.name\r\n      div.dataset.countryId = churchMarker.countryId\r\n      div.innerHTML = `\r\n      <h2 class=\"church-name\">${churchMarker.name}<\/h2>\r\n      <div class=\"church-info\">${churchMarker.info}<\/div>\r\n      <div class=\"church-country\">${churchMarker.country}<\/div>\r\n      <div class=\"church-address\">${churchMarker.address}<\/div>\r\n      <div class=\"church-schedule\">${churchMarker.schedule}<\/div>\r\n        <a\r\n          href=\"https:\/\/www.google.com\/maps?q=${churchMarker.lat},${churchMarker.lng}\"\r\n          target=\"_blank\"\r\n          class=\"map-link\"\r\n        >\r\n          <svg viewBox=\"0 0 384 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n            <path fill=\"currentColor\"\r\n              d=\"M172.268 501.67C26.97 291.031 0 269.413 0 192\r\n              0 85.961 85.961 0 192 0s192 85.961 192 192\r\n              c0 77.413-26.97 99.031-172.268 309.67\r\n              -9.535 13.774-29.93 13.773-39.464 0z\r\n              M192 272c44.183 0 80-35.817 80-80s-35.817-80\r\n              -80-80-80 35.817-80 80 35.817 80 80 80z\"\r\n            \/>\r\n          <\/svg>\r\n          See in Google Maps\r\n        <\/a>\r\n    `\r\n      if (churchMarker.isCOE) {\r\n        div.classList.add('coe')\r\n      }\r\n      if (activeMarker && activeMarker.name === churchMarker.name) {\r\n        div.classList.add('active')\r\n      }\r\n\r\n      div.addEventListener('click', () => {\r\n        const countryZone = countryZones.find(\r\n          cz => cz.countryId == churchMarker.countryId\r\n        )\r\n        if (countryZone) {\r\n          onClickedLayer(\r\n            countryZone.layer,\r\n            countryZone.zone,\r\n            countryZone.countryId,\r\n            churchMarker\r\n          )\r\n        }\r\n\r\n        map.flyTo([churchMarker.lat, churchMarker.lng], 10)\r\n        churchMarker.marker.openPopup()\r\n\r\n        highlightItem(churchMarker)\r\n\r\n        const isMobile = window.matchMedia('(max-width: 767px)').matches\r\n        if (isMobile) {\r\n          listPanel.classList.remove('open')\r\n          listPanel.style.transform = 'translateY(80%)'\r\n        }\r\n      })\r\n\r\n      listContainer.appendChild(div)\r\n    })\r\n  }\r\n\r\n  function resetMap() {\r\n    \/\/ Restaurar vista inicial\r\n    map.setView(initialView.center, initialView.zoom)\r\n\r\n    \/\/ Restaurar opacidad de zonas\r\n    countryZones.forEach(cz => {\r\n      if (cz.zone) {\r\n        cz.zone.setStyle({ fillOpacity: 0.7 })\r\n        cz.zone.disabled = false\r\n      }\r\n    })\r\n\r\n    removedCountryZone = null\r\n\r\n    clearMarkersMap()\r\n\r\n    \/\/ Restaurar lista completa\r\n    renderList(churchMarkers)\r\n  }\r\n\r\n  \/\/ Draggable List\r\n  let startY = 0\r\n  let currentY = 0\r\n  let isDragging = false\r\n\r\n  dragHandle.addEventListener('touchstart', e => {\r\n    startY = e.touches[0].clientY\r\n    isDragging = true\r\n  })\r\n\r\n  document.addEventListener('touchmove', e => {\r\n    if (!isDragging) return\r\n\r\n    currentY = e.touches[0].clientY\r\n    const diff = currentY - startY\r\n\r\n    \/\/ mover panel din\u00e1micamente\r\n    if (diff > 0) {\r\n      listPanel.style.transform = `translateY(${Math.min(70 + diff \/ 3, 80)}%)`\r\n    } else {\r\n      listPanel.style.transform = `translateY(${Math.max(\r\n        0,\r\n        70 + diff \/ 3,\r\n        20\r\n      )}%)`\r\n    }\r\n  })\r\n\r\n  document.addEventListener('touchend', () => {\r\n    if (!isDragging) return\r\n\r\n    isDragging = false\r\n\r\n    const moved = currentY - startY\r\n\r\n    \/\/ l\u00f3gica snap (abrir\/cerrar)\r\n    if (moved < -50) {\r\n      listPanel.classList.add('open')\r\n      listPanel.style.transform = 'translateY(20%)'\r\n    } else if (moved > 50) {\r\n      listPanel.classList.remove('open')\r\n      listPanel.style.transform = 'translateY(80%)'\r\n    } else {\r\n      \/\/ volver al estado anterior\r\n      if (listPanel.classList.contains('open')) {\r\n        listPanel.style.transform = 'translateY(20%)'\r\n      } else {\r\n        listPanel.style.transform = 'translateY(80%)'\r\n      }\r\n    }\r\n  })\r\n\r\n  initializeMap()\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Restablecer el mapa<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8241","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lifeforall-europe.org\/es\/wp-json\/wp\/v2\/pages\/8241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lifeforall-europe.org\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lifeforall-europe.org\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lifeforall-europe.org\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lifeforall-europe.org\/es\/wp-json\/wp\/v2\/comments?post=8241"}],"version-history":[{"count":1138,"href":"https:\/\/lifeforall-europe.org\/es\/wp-json\/wp\/v2\/pages\/8241\/revisions"}],"predecessor-version":[{"id":10751,"href":"https:\/\/lifeforall-europe.org\/es\/wp-json\/wp\/v2\/pages\/8241\/revisions\/10751"}],"wp:attachment":[{"href":"https:\/\/lifeforall-europe.org\/es\/wp-json\/wp\/v2\/media?parent=8241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}