{"id":23,"date":"2025-04-22T14:24:35","date_gmt":"2025-04-22T12:24:35","guid":{"rendered":"https:\/\/wordpress.mykissing.de\/?page_id=23"},"modified":"2025-09-18T05:51:59","modified_gmt":"2025-09-18T03:51:59","slug":"map","status":"publish","type":"page","link":"https:\/\/wordpress.mykissing.de\/index.php\/map\/","title":{"rendered":"Betreuungsstellen &#8211; suchen und finden!"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"23\" class=\"elementor elementor-23\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9754e2b e-flex e-con-boxed e-con e-parent\" data-id=\"9754e2b\" 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-38e6764 elementor-widget elementor-widget-heading\" data-id=\"38e6764\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Wo ist wer?!<\/h2>\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<div class=\"elementor-element elementor-element-2055282 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"2055282\" 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-5f0fec4 elementor-widget elementor-widget-shortcode\" data-id=\"5f0fec4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"leaflet-map WPLeafletMap\" style=\"height:480px; width:100%;\"><\/div><script>\nwindow.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];\nwindow.WPLeafletMapPlugin.push(function WPLeafletMapShortcode() {\/*<script>*\/\nvar baseUrl = atob('aHR0cHM6Ly90aWxlLm9wZW5zdHJlZXRtYXAub3JnL3t6fS97eH0ve3l9LnBuZw==');\nvar base = (!baseUrl && window.MQ) ?\n    window.MQ.mapLayer() : L.tileLayer(baseUrl,\n        L.Util.extend({}, {\n            detectRetina: 0,\n        },\n        {\"subdomains\":\"abc\",\"noWrap\":false,\"maxZoom\":19}        )\n    );\n    var options = L.Util.extend({}, {\n        layers: [base],\n        attributionControl: false\n    },\n    {\"zoomControl\":false,\"scrollWheelZoom\":false,\"doubleClickZoom\":false,\"fitBounds\":false,\"minZoom\":0,\"maxZoom\":19,\"maxBounds\":null,\"attribution\":\"<a href=\\\"http:\\\/\\\/leafletjs.com\\\" title=\\\"Eine Javascript-Bibliothek f\\u00fcr interaktive Karten\\\">Leaflet<\\\/a>; \\u00a9 <a href=\\\"http:\\\/\\\/www.openstreetmap.org\\\/copyright\\\">OpenStreetMap<\\\/a> Mitwirkende\"},\n    {});\nwindow.WPLeafletMapPlugin.createMap(options).setView([51.6185,7.6372],14);});<\/script>\n<script>\nwindow.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];\nwindow.WPLeafletMapPlugin.push(function WPLeafletMarkerShortcode() {\/*<script>*\/\nvar map = window.WPLeafletMapPlugin.getCurrentMap();\nvar group = window.WPLeafletMapPlugin.getCurrentGroup();\nvar marker_options = window.WPLeafletMapPlugin.getIconOptions({});\nvar marker = L.marker(\n    [51.619223,7.651311],\n    marker_options\n);\nvar is_image = map.is_image_map;\nif (marker_options.draggable) {\n    marker.on('dragend', function () {\n        var latlng = this.getLatLng();\n        var lat = latlng.lat;\n        var lng = latlng.lng;\n        if (is_image) {\n            console.log('leaflet-marker y=' + lat + ' x=' + lng);\n        } else {\n            console.log('leaflet-marker lat=' + lat + ' lng=' + lng);\n        }\n    });\n}\nmarker.addTo( group );\nmarker.bindPopup(window.WPLeafletMapPlugin.unescape('&lt;br&gt;&lt;div style=&quot;line-height:0.75&quot;&gt;&lt;br&gt;  &lt;strong&gt;GTP \u2013 \u201edie kleinen Entdecker\u201c&lt;\/strong&gt;&lt;br&gt;&lt;br&gt;  &lt;strong&gt;Daniela Ki\u00dfing &amp; Maria Duksch&lt;\/strong&gt;&lt;br&gt;&lt;br&gt;  \ud83d\udccd In der Aue 1&lt;br&gt;&lt;br&gt;  \ud83d\udccd 59192 Bergkamen&lt;br&gt;&lt;br&gt;  \ud83d\udcde &lt;a href=&quot;tel:023075024904&quot;&gt;02307 50 24 904&lt;\/a&gt;&lt;br&gt;&lt;br&gt;  \u2709\ufe0f &lt;a href=&quot;mailto:info@entdecker-bergkamen.de&quot;&gt;info@entdecker-bergkamen.de&lt;\/a&gt;&lt;br&gt;&lt;br&gt;  \ud83c\udf10 &lt;a href=&quot;https:\/\/www.entdecker-bergkamen.de&quot; target=&quot;_blank&quot;&gt;www.entdecker-bergkamen.de&lt;\/a&gt;&lt;br&gt;&lt;\/div&gt;&lt;br&gt;'));window.WPLeafletMapPlugin.markers.push( marker );\n        });<\/script>\n\n<script>\nwindow.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];\nwindow.WPLeafletMapPlugin.push(function WPLeafletMarkerShortcode() {\/*<script>*\/\nvar map = window.WPLeafletMapPlugin.getCurrentMap();\nvar group = window.WPLeafletMapPlugin.getCurrentGroup();\nvar marker_options = window.WPLeafletMapPlugin.getIconOptions({});\nvar marker = L.marker(\n    [51.617647,7.623135],\n    marker_options\n);\nvar is_image = map.is_image_map;\nif (marker_options.draggable) {\n    marker.on('dragend', function () {\n        var latlng = this.getLatLng();\n        var lat = latlng.lat;\n        var lng = latlng.lng;\n        if (is_image) {\n            console.log('leaflet-marker y=' + lat + ' x=' + lng);\n        } else {\n            console.log('leaflet-marker lat=' + lat + ' lng=' + lng);\n        }\n    });\n}\nmarker.addTo( group );\nmarker.bindPopup(window.WPLeafletMapPlugin.unescape('&lt;br&gt;&lt;div style=&quot;line-height:1.0&quot;&gt;&lt;br&gt;  &lt;strong&gt;Famili\u00e4re Kinder-Tagesbetreuung e.V.&lt;\/strong&gt;&lt;br&gt;&lt;br&gt;  &lt;strong&gt;Beratung \u2013 Vermittlung \u2013 Begleitung&lt;\/strong&gt;&lt;br&gt;&lt;br&gt;  \ud83d\udccd Erich-Ollenhauer Str. 34&lt;br&gt;&lt;br&gt;  \ud83d\udccd 59192 Bergkamen&lt;br&gt;&lt;br&gt;  \ud83d\udcde &lt;a href=&quot;tel:02307280633&quot;&gt;02307 28 06 33&lt;\/a&gt;&lt;br&gt;&lt;br&gt;  \u2709\ufe0f &lt;a href=&quot;mailto:buero@famkitabe.de&quot;&gt;buero@famkitabe.de&lt;\/a&gt;&lt;br&gt;&lt;br&gt;  \ud83c\udf10 &lt;a href=&quot;https:\/\/www.famkitabe.de&quot; target=&quot;_blank&quot;&gt;www.famkitabe.de&lt;\/a&gt;&lt;br&gt;&lt;\/div&gt;&lt;br&gt;'));window.WPLeafletMapPlugin.markers.push( marker );\n        });<\/script><\/div>\n\t\t\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<div class=\"elementor-element elementor-element-8c77849 e-flex e-con-boxed e-con e-parent\" data-id=\"8c77849\" 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-a2322f9 elementor-widget elementor-widget-html\" data-id=\"a2322f9\" 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<!-- Leaflet CSS -->\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\"\r\n  integrity=\"sha256-sA+e2At\/3f39gM\/9z8Wka1uDAeA2GiU4\/bV+UoL0A+0=\"\r\n  crossorigin=\"\"\r\n\/>\r\n\r\n<style>\r\n  \/* Karte *\/\r\n  #map {\r\n    width: 100%;\r\n    height: 500px;\r\n  }\r\n\r\n  \/* Controls *\/\r\n  .controls {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 0.5rem;\r\n    margin-bottom: 1rem;\r\n  }\r\n  .controls input,\r\n  .controls select,\r\n  .controls button {\r\n    flex: 1 1 100%;\r\n    padding: 0.5rem;\r\n    font-size: 1rem;\r\n  }\r\n  @media (min-width: 600px) {\r\n    .controls input,\r\n    .controls select,\r\n    .controls button {\r\n      flex: 1;\r\n    }\r\n  }\r\n\r\n  \/* Tabelle *\/\r\n  .table-container {\r\n    overflow-x: auto;\r\n  }\r\n  table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin-top: 1rem;\r\n  }\r\n  th,\r\n  td {\r\n    border: 1px solid #ccc;\r\n    padding: 0.5rem;\r\n    text-align: left;\r\n    vertical-align: top;\r\n  }\r\n  th {\r\n    background-color: #f5f5f5;\r\n  }\r\n<\/style>\r\n\r\n<div class=\"controls\">\r\n  <input type=\"text\" id=\"address\" placeholder=\"Adresse eingeben\" \/>\r\n  <select id=\"radius\">\r\n    <option value=\"500\">500 m<\/option>\r\n    <option value=\"1000\">1 km<\/option>\r\n    <option value=\"2000\">2 km<\/option>\r\n    <option value=\"5000\">5 km<\/option>\r\n  <\/select>\r\n  <button id=\"searchBtn\">Suchen<\/button>\r\n<\/div>\r\n\r\n<div id=\"map\"><\/div>\r\n\r\n<div class=\"table-container\">\r\n  <table id=\"resultTable\" style=\"display:none\">\r\n    <thead>\r\n      <tr>\r\n        <th>Pflegestelle<\/th>\r\n        <th>Adresse<\/th>\r\n        <th>Telefon<\/th>\r\n        <th>E-Mail<\/th>\r\n        <th>Website<\/th>\r\n        <th>Entfernung<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody><\/tbody>\r\n  <\/table>\r\n<\/div>\r\n\r\n<!-- Leaflet JS -->\r\n<script\r\n  src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"\r\n  crossorigin=\"\"\r\n><\/script>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    \/\/ 1) Karte initialisieren\r\n    const map = L.map('map').setView([51.618, 7.64], 13);\r\n    L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n      attribution: '&copy; OpenStreetMap-Mitwirkende'\r\n    }).addTo(map);\r\n\r\n    \/\/ 2) Kindertagespflege-Standorte\r\n    const locations = [\r\n      {\r\n        name: 'GTP \u2013 \u201edie kleinen Entdecker\"',\r\n        owner: 'Daniela Ki\u00dfing',\r\n        street: 'In der Aue 1',\r\n        city: '59192 Bergkamen',\r\n        tel: '02307 50 24 904',\r\n        email: 'info@entdecker-bergkamen.de',\r\n        website: 'https:\/\/www.entdecker-bergkamen.de',\r\n        lat: 51.619223,\r\n        lon: 7.651311\r\n      },\r\n      {\r\n        name: 'Famili\u00e4re Kinder-Tagesbetreuung e.V.',\r\n        owner: 'Beratung - Vermittlung - Begleitung',\r\n        street: 'Erich-Ollenhauer Str. 34',\r\n        city: '59192 Bergkamen',\r\n        tel: '02307 28 06 33',\r\n        email: 'buero@famkitabe.de',\r\n        website: 'https:\/\/www.famkitabe.de',\r\n        lat: 51.617647,\r\n        lon: 7.623135\r\n      }\r\n      \/\/ weitere Standorte hier \u2026\r\n    ];\r\n\r\n    \/\/ 3) Statische Marker\r\n    L.layerGroup(\r\n      locations.map(loc =>\r\n        L.marker([loc.lat, loc.lon]).bindPopup(\r\n          `<strong>${loc.name}<\/strong><br>` +\r\n          `<em>${loc.owner}<\/em><br>` +\r\n          `${loc.street}<br>${loc.city}<br>` +\r\n          `\ud83d\udcde ${loc.tel}<br>` +\r\n          `\u2709\ufe0f <a href=\"mailto:${loc.email}\">${loc.email}<\/a><br>` +\r\n          `\ud83c\udf10 <a href=\"${loc.website}\" target=\"_blank\">Webseite<\/a>`\r\n        )\r\n      )\r\n    ).addTo(map);\r\n\r\n    let radiusCircle;\r\n\r\n    \/\/ 4) Such-Button Handler\r\n    document.getElementById('searchBtn').addEventListener('click', () => {\r\n      const address = document.getElementById('address').value.trim();\r\n      const radius = parseInt(document.getElementById('radius').value, 10);\r\n      if (!address) {\r\n        alert('Bitte gib eine Adresse ein.');\r\n        return;\r\n      }\r\n\r\n      \/\/ Geocoding\r\n      fetch(\r\n        `https:\/\/nominatim.openstreetmap.org\/search?format=json&q=${encodeURIComponent(\r\n          address\r\n        )}`\r\n      )\r\n        .then(res => res.json())\r\n        .then(data => {\r\n          if (!data.length) {\r\n            alert('Keine Adresse gefunden.');\r\n            return;\r\n          }\r\n          const lat = parseFloat(data[0].lat);\r\n          const lon = parseFloat(data[0].lon);\r\n          const origin = L.latLng(lat, lon);\r\n\r\n          \/\/ Karte zentrieren & Kreis zeichnen\r\n          map.setView(origin, 14);\r\n          if (radiusCircle) map.removeLayer(radiusCircle);\r\n          radiusCircle = L.circle(origin, {\r\n            color: '#007bff',\r\n            fillColor: '#cce5ff',\r\n            fillOpacity: 0.2,\r\n            radius: radius\r\n          }).addTo(map);\r\n\r\n          \/\/ Ergebnisse filtern & sortieren\r\n          const results = locations\r\n            .map(loc => ({\r\n              loc,\r\n              dist: origin.distanceTo(L.latLng(loc.lat, loc.lon))\r\n            }))\r\n            .filter(item => item.dist <= radius)\r\n            .sort((a, b) => a.dist - b.dist);\r\n\r\n          const tbody = document.querySelector('#resultTable tbody');\r\n          tbody.innerHTML = '';\r\n\r\n          if (!results.length) {\r\n            alert('Keine Betreuungsstelle im Umkreis. Bitte Sucheinstellungen anpassen.');\r\n            document.getElementById('resultTable').style.display = 'none';\r\n            return;\r\n          }\r\n\r\n          \/\/ Tabelle f\u00fcllen\r\n          results.forEach(({ loc, dist }) => {\r\n            const tr = document.createElement('tr');\r\n            tr.innerHTML = `\r\n              <td>${loc.name}<\/td>\r\n              <td>${loc.street}<br>${loc.city}<\/td>\r\n              <td>${loc.tel}<\/td>\r\n              <td><a href=\"mailto:${loc.email}\">${loc.email}<\/a><\/td>\r\n              <td><a href=\"${loc.website}\" target=\"_blank\">Webseite<\/a><\/td>\r\n              <td>${Math.round(dist)} m<\/td>\r\n            `;\r\n            tbody.appendChild(tr);\r\n          });\r\n\r\n          document.getElementById('resultTable').style.display = '';\r\n        })\r\n        .catch(() => {\r\n          alert('Fehler beim Geocoding.');\r\n        });\r\n    });\r\n  });\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<div class=\"elementor-element elementor-element-7a57c92 e-flex e-con-boxed e-con e-parent\" data-id=\"7a57c92\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-aec8355 e-flex e-con-boxed e-con e-parent\" data-id=\"aec8355\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\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>Wo ist wer?! 500 m1 km2 km5 km Suchen Pflegestelle Adresse Telefon E-Mail Website Entfernung<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-23","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wordpress.mykissing.de\/index.php\/wp-json\/wp\/v2\/pages\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mykissing.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wordpress.mykissing.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mykissing.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mykissing.de\/index.php\/wp-json\/wp\/v2\/comments?post=23"}],"version-history":[{"count":105,"href":"https:\/\/wordpress.mykissing.de\/index.php\/wp-json\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":135,"href":"https:\/\/wordpress.mykissing.de\/index.php\/wp-json\/wp\/v2\/pages\/23\/revisions\/135"}],"wp:attachment":[{"href":"https:\/\/wordpress.mykissing.de\/index.php\/wp-json\/wp\/v2\/media?parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}