\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e40\u0e07\u0e34\u0e19\u0e17\u0e38\u0e19\u0e2b\u0e21\u0e38\u0e19\u0e40\u0e27\u0e35\u0e22\u0e19\u0e22\u0e32\u0e07\u0e1e\u0e32\u0e23\u0e32<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;600;700&display=swap');\n \n :root {\n --accent-blue: #2563eb;\n --bg-soft: #f8fafc;\n --card-bg: #ffffff;\n --text-main: #1e293b;\n --border-color: #e2e8f0;\n }\n\n .dark {\n --bg-soft: #0f172a;\n --card-bg: #1e293b;\n --text-main: #f1f5f9;\n --border-color: #334155;\n }\n\n .wp-map-embed-container { \n width: 100%;\n font-family: 'Sarabun', sans-serif; \n background-color: var(--bg-soft);\n transition: background-color 0.3s ease;\n position: relative;\n height: 600px; \n max-height: 90vh;\n border-radius: 16px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n border: 1px solid var(--border-color);\n }\n\n .main-wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n }\n\n .content-area {\n flex: 1;\n display: flex;\n overflow: hidden;\n padding: 0.75rem;\n gap: 0.75rem;\n height: calc(100% - 56px); \/* Adjust for header height *\/\n }\n\n #map { \n height: 100%; \n width: 100%; \n border-radius: 12px; \n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);\n z-index: 1;\n background: #e5e7eb;\n }\n\n .dark-map {\n filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);\n }\n \n #location-list-container::-webkit-scrollbar {\n width: 5px;\n }\n #location-list-container::-webkit-scrollbar-thumb {\n background: #cbd5e1;\n border-radius: 10px;\n }\n\n .leaflet-popup-content-wrapper {\n border-radius: 16px;\n padding: 0;\n overflow: hidden;\n background: var(--card-bg);\n color: var(--text-main);\n }\n .leaflet-popup-content { margin: 0; width: 280px !important; }\n\n .pulse-marker {\n background: var(--accent-blue);\n border-radius: 50%;\n border: 2px solid white;\n box-shadow: 0 0 8px rgba(37, 99, 235, 0.6);\n animation: pulse 2s infinite;\n }\n @keyframes pulse {\n 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }\n 70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }\n 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }\n }\n\n @media (max-width: 640px) {\n .content-area { flex-direction: column; overflow-y: auto; }\n .wp-map-embed-container { height: 850px; }\n aside { width: 100% !important; height: 400px !important; flex-shrink: 0; }\n section { height: 400px !important; flex-shrink: 0; }\n }\n <\/style>\n<\/head>\n<body class=\"antialiased p-0 m-0\">\n\n <div class=\"wp-map-embed-container\">\n <div class=\"main-wrapper\">\n <header class=\"bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 px-6 py-2.5 flex items-center justify-between shadow-sm z-10 transition-colors duration-300\">\n <div class=\"flex items-center gap-3\">\n <div class=\"bg-blue-600 p-1.5 rounded-lg shadow-inner\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\/><\/svg>\n <\/div>\n <div>\n <h1 class=\"text-lg font-bold text-slate-800 dark:text-slate-100 leading-tight\">\u0e1e\u0e34\u0e01\u0e31\u0e14\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19<\/h1>\n <p class=\"text-[11px] text-slate-400 font-semibold tracking-wide uppercase\">\u0e40\u0e07\u0e34\u0e19\u0e17\u0e38\u0e19\u0e2b\u0e21\u0e38\u0e19\u0e40\u0e27\u0e35\u0e22\u0e19\u0e22\u0e32\u0e07\u0e1e\u0e32\u0e23\u0e32<\/p>\n <\/div>\n <\/div>\n \n <div class=\"flex items-center gap-4\">\n <span id=\"loc-count\" class=\"bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 text-[10px] font-bold px-2.5 py-1 rounded-md border border-slate-200 dark:border-slate-700\"><\/span>\n <button id=\"dark-mode-toggle\" class=\"p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors border border-slate-200 dark:border-slate-700\">\n <svg id=\"sun-icon\" class=\"w-5 h-5 text-amber-500 hidden dark:block\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\"\/><\/svg>\n <svg id=\"moon-icon\" class=\"w-5 h-5 text-slate-500 dark:hidden\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"\/><\/svg>\n <\/button>\n <\/div>\n <\/header>\n\n <main class=\"content-area\">\n <aside class=\"w-72 flex-shrink-0 flex flex-col bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden transition-colors duration-300 h-full\">\n <div class=\"p-3 border-b border-slate-100 dark:border-slate-800 bg-slate-50\/50 dark:bg-slate-800\/30\">\n <input type=\"text\" id=\"search-box\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19...\" class=\"w-full px-3 py-1.5 text-sm bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-100 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 transition-all\">\n <\/div>\n <div id=\"location-list-container\" class=\"flex-1 overflow-y-auto p-2 space-y-1.5\"><\/div>\n <\/aside>\n\n <section class=\"flex-1 relative h-full\">\n <div id=\"map\"><\/div>\n <div class=\"absolute top-4 right-4 z-[1000] flex flex-col gap-2\">\n <div class=\"bg-white dark:bg-slate-900 shadow-xl rounded-xl border border-slate-200 dark:border-slate-700 p-1 flex flex-col gap-1\">\n <button onclick=\"changeMap('m')\" id=\"btn-road\" class=\"p-2.5 rounded-lg transition-all bg-blue-600 text-white shadow-md\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7\" \/><\/svg>\n <\/button>\n <button onclick=\"changeMap('s')\" id=\"btn-sat\" class=\"p-2.5 rounded-lg transition-all text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9\" \/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n <script>\n const locations = [\n { name: \"\u0e2a\u0e48\u0e27\u0e19\u0e01\u0e25\u0e32\u0e07\", lat: 13.851871, lng: 100.577297, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 50 \u0e16\u0e19\u0e19\u0e1e\u0e2b\u0e25\u0e42\u0e22\u0e18\u0e34\u0e19 \u0e41\u0e02\u0e27\u0e07\u0e25\u0e32\u0e14\u0e22\u0e32\u0e27 \u0e40\u0e02\u0e15\u0e08\u0e15\u0e38\u0e08\u0e31\u0e01\u0e23 \u0e01\u0e23\u0e38\u0e07\u0e40\u0e17\u0e1e\u0e2f 10900\" },\n { name: \"\u0e28\u0e04\u0e22.\u0e09\u0e30\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e17\u0e23\u0e32\", lat: 13.568104, lng: 101.453767, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 99 \u0e2b\u0e21\u0e39\u0e48\u0e17\u0e35\u0e48 4 \u0e15\u0e33\u0e1a\u0e25\u0e25\u0e32\u0e14\u0e01\u0e23\u0e30\u0e17\u0e34\u0e07 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2a\u0e19\u0e32\u0e21\u0e0a\u0e31\u0e22\u0e40\u0e02\u0e15 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e09\u0e30\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e17\u0e23\u0e32 24160\" },\n { name: \"\u0e28\u0e04\u0e22.\u0e40\u0e0a\u0e35\u0e22\u0e07\u0e23\u0e32\u0e22\", lat: 19.872773, lng: 99.779363, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 72 \u0e2b\u0e21\u0e39\u0e48\u0e17\u0e35\u0e48 6 \u0e15\u0e33\u0e1a\u0e25\u0e1b\u0e48\u0e32\u0e2d\u0e49\u0e2d\u0e14\u0e2d\u0e19\u0e0a\u0e31\u0e22 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e40\u0e0a\u0e35\u0e22\u0e07\u0e23\u0e32\u0e22 \u0e16\u0e19\u0e19\u0e40\u0e14\u0e48\u0e19\u0e2b\u0e49\u0e32-\u0e14\u0e07\u0e21\u0e30\u0e14\u0e30 57000\" },\n { name: \"\u0e28\u0e04\u0e22.\u0e1a\u0e38\u0e23\u0e35\u0e23\u0e31\u0e21\u0e22\u0e4c\", lat: 15.230323, lng: 103.212100, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 85 \u0e2b\u0e21\u0e39\u0e48 15 \u0e15\u0e33\u0e1a\u0e25\u0e23\u0e48\u0e2d\u0e19\u0e17\u0e2d\u0e07 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2a\u0e15\u0e36\u0e01 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e1a\u0e38\u0e23\u0e35\u0e23\u0e31\u0e21\u0e22\u0e4c 31150\" },\n { name: \"\u0e28\u0e04\u0e22.\u0e2a\u0e07\u0e02\u0e25\u0e32\", lat: 7.015504, lng: 100.501315, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 9 \u0e16.\u0e01\u0e32\u0e0d\u0e08\u0e19\u0e27\u0e19\u0e34\u0e0a\u0e22\u0e4c \u0e15.\u0e2b\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48 \u0e2d.\u0e2b\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48 \u0e08.\u0e2a\u0e07\u0e02\u0e25\u0e32 90110\" },\n { name: \"\u0e28\u0e04\u0e22.\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35\", lat: 9.146677, lng: 99.634781, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 126 \u0e2b\u0e21\u0e39\u0e48 4 \u0e15\u0e33\u0e1a\u0e25\u0e17\u0e48\u0e32\u0e2d\u0e38\u0e41\u0e17 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e01\u0e32\u0e0d\u0e08\u0e19\u0e14\u0e34\u0e29\u0e10\u0e4c \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35 84340\" },\n { name: \"\u0e28\u0e04\u0e22.\u0e2b\u0e19\u0e2d\u0e07\u0e04\u0e32\u0e22\", lat: 18.156910, lng: 103.206929, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 239 \u0e2b\u0e21\u0e39\u0e48 8 \u0e15\u0e33\u0e1a\u0e25\u0e1e\u0e23\u0e30\u0e1a\u0e32\u0e17\u0e19\u0e32\u0e2a\u0e34\u0e07\u0e2b\u0e4c \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e23\u0e31\u0e15\u0e19\u0e27\u0e32\u0e1b\u0e35 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e2b\u0e19\u0e2d\u0e07\u0e04\u0e32\u0e22 43120\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e01\u0e23\u0e30\u0e1a\u0e35\u0e48\", lat: 8.163351, lng: 98.857640, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 205 \u0e21.1 \u0e15.\u0e40\u0e02\u0e32\u0e04\u0e23\u0e32\u0e21 \u0e2d.\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08.\u0e01\u0e23\u0e30\u0e1a\u0e35\u0e48 81000\" },\n { name: \"\u0e28\u0e27\u0e1b.\u0e01\u0e23\u0e30\u0e1a\u0e35\u0e48\", lat: 7.940251, lng: 99.160167, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 68 \u0e2b\u0e21\u0e39\u0e48 1 \u0e16\u0e19\u0e19\u0e40\u0e1e\u0e0a\u0e23\u0e40\u0e01\u0e29\u0e21 \u0e15\u0e33\u0e1a\u0e25\u0e04\u0e25\u0e2d\u0e07\u0e17\u0e48\u0e2d\u0e21\u0e43\u0e15\u0e49 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e04\u0e25\u0e2d\u0e07\u0e17\u0e48\u0e2d\u0e21 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e01\u0e23\u0e30\u0e1a\u0e35\u0e48 81120\" },\n { name: \"\u0e28\u0e27\u0e28.\u0e08\u0e31\u0e19\u0e17\u0e1a\u0e38\u0e23\u0e35\", lat: 12.615843, lng: 102.179330, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 27 \u0e2b\u0e21\u0e39\u0e48 1 \u0e15\u0e33\u0e1a\u0e25\u0e1e\u0e25\u0e31\u0e1a\u0e1e\u0e25\u0e32 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e08\u0e31\u0e19\u0e17\u0e1a\u0e38\u0e23\u0e35 22000\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e08\u0e31\u0e19\u0e17\u0e1a\u0e38\u0e23\u0e35\", lat: 12.843285, lng: 102.209447, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 35 \u0e2b\u0e21\u0e39\u0e48 7 \u0e15\u0e33\u0e1a\u0e25\u0e09\u0e21\u0e31\u0e19 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e21\u0e30\u0e02\u0e32\u0e21 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e08\u0e31\u0e19\u0e17\u0e1a\u0e38\u0e23\u0e35 22150\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e0a\u0e38\u0e21\u0e1e\u0e23\", lat: 10.834103, lng: 99.217999, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 345 \u0e2b\u0e21\u0e39\u0e48 4 \u0e16\u0e19\u0e19\u0e40\u0e1e\u0e0a\u0e23\u0e40\u0e01\u0e29\u0e21 \u0e15\u0e33\u0e1a\u0e25\u0e2a\u0e25\u0e38\u0e22 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e17\u0e48\u0e32\u0e41\u0e0b\u0e30 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e0a\u0e38\u0e21\u0e1e\u0e23 86140\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e15\u0e23\u0e31\u0e07\", lat: 7.254168, lng: 99.728355, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 187 \u0e2b\u0e21\u0e39\u0e48 5 \u0e15\u0e33\u0e1a\u0e25\u0e2a\u0e38\u0e42\u0e2a\u0e30 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e1b\u0e30\u0e40\u0e2b\u0e25\u0e35\u0e22\u0e19 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e15\u0e23\u0e31\u0e07 92120\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e19\u0e23\u0e32\u0e18\u0e34\u0e27\u0e32\u0e2a\", lat: 6.067559, lng: 101.879658, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 36 \u0e2b\u0e21\u0e39\u0e48 3 \u0e15\u0e33\u0e1a\u0e25\u0e23\u0e34\u0e42\u0e01\u0e4b \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2a\u0e38\u0e44\u0e2b\u0e07\u0e1b\u0e32\u0e14\u0e35 \u0e19\u0e23\u0e32\u0e18\u0e34\u0e27\u0e32\u0e2a 96140\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e19\u0e48\u0e32\u0e19\", lat: 18.864532, lng: 100.740494, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 128 \u0e2b\u0e21\u0e39\u0e48 1 \u0e15\u0e33\u0e1a\u0e25\u0e1c\u0e32\u0e2a\u0e34\u0e07\u0e2b\u0e4c \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e19\u0e48\u0e32\u0e19 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e19\u0e48\u0e32\u0e19 55000\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35\", lat: 6.744199, lng: 101.129337, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 100 \u0e2b\u0e21\u0e39\u0e48 1 \u0e15\u0e33\u0e1a\u0e25\u0e21\u0e48\u0e27\u0e07\u0e40\u0e15\u0e35\u0e49\u0e22 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e41\u0e21\u0e48\u0e25\u0e32\u0e19 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35 94180\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e1e\u0e31\u0e07\u0e07\u0e32\", lat: 8.875239, lng: 98.315003, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 52 \u0e2b\u0e21\u0e39\u0e48 1 \u0e15\u0e33\u0e1a\u0e25\u0e1a\u0e32\u0e07\u0e21\u0e48\u0e27\u0e07 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e15\u0e30\u0e01\u0e31\u0e48\u0e27\u0e1b\u0e48\u0e32 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e1e\u0e31\u0e07\u0e07\u0e32 82110\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e1e\u0e31\u0e17\u0e25\u0e38\u0e07\", lat: 7.592505, lng: 100.117172, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 252 \u0e2b\u0e21\u0e39\u0e48 15 \u0e15\u0e33\u0e1a\u0e25\u0e04\u0e27\u0e19\u0e21\u0e30\u0e1e\u0e23\u0e49\u0e32\u0e27 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e1e\u0e31\u0e17\u0e25\u0e38\u0e07 93000\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e20\u0e39\u0e40\u0e01\u0e47\u0e15\", lat: 8.056080, lng: 98.358249, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 166 \u0e2b\u0e21\u0e39\u0e48 9 \u0e15\u0e33\u0e1a\u0e25\u0e40\u0e17\u0e1e\u0e01\u0e23\u0e30\u0e29\u0e31\u0e15\u0e23\u0e35 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e16\u0e25\u0e32\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e20\u0e39\u0e40\u0e01\u0e47\u0e15 83110\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e23\u0e30\u0e19\u0e2d\u0e07\", lat: 10.511394, lng: 98.749109, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 10 \u0e2b\u0e21\u0e39\u0e48 3 \u0e15\u0e33\u0e1a\u0e25\u0e1a\u0e32\u0e07\u0e43\u0e2b\u0e0d\u0e48 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e01\u0e23\u0e30\u0e1a\u0e38\u0e23\u0e35 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e23\u0e30\u0e19\u0e2d\u0e07 85110\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e23\u0e37\u0e2d\u0e40\u0e2a\u0e32\u0e30\", lat: 6.425178, lng: 101.523583, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 54 \u0e2b\u0e21\u0e39\u0e48 2 \u0e15\u0e33\u0e1a\u0e25\u0e23\u0e37\u0e2d\u0e40\u0e2a\u0e32\u0e30 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e23\u0e37\u0e2d\u0e40\u0e2a\u0e32\u0e30 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e19\u0e23\u0e32\u0e18\u0e34\u0e27\u0e32\u0e2a 96150\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e25\u0e33\u0e1b\u0e32\u0e07\", lat: 18.358509, lng: 99.309071, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 204 \u0e2b\u0e21\u0e39\u0e48 6 \u0e15\u0e33\u0e1a\u0e25\u0e40\u0e27\u0e35\u0e22\u0e07\u0e15\u0e32\u0e25 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2b\u0e49\u0e32\u0e07\u0e09\u0e31\u0e15\u0e23 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e25\u0e33\u0e1b\u0e32\u0e07 52190\" },\n { name: \"\u0e28\u0e27\u0e2a.\u0e22\u0e30\u0e25\u0e32\", lat: 6.136209, lng: 101.166708, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 2 \u0e2b\u0e21\u0e39\u0e48 7 \u0e15\u0e33\u0e1a\u0e25\u0e18\u0e32\u0e23\u0e42\u0e15 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e18\u0e32\u0e23\u0e42\u0e15 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e22\u0e30\u0e25\u0e32 95150\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e22\u0e30\u0e25\u0e32\", lat: 6.577242, lng: 101.275990, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 114 \u0e16\u0e19\u0e19\u0e2a\u0e38\u0e02\u0e22\u0e32\u0e07\u0e04\u0e4c \u0e15\u0e33\u0e1a\u0e25\u0e2a\u0e30\u0e40\u0e15\u0e07 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e22\u0e30\u0e25\u0e32 95000\" }\n ].sort((a, b) => a.name.localeCompare(b.name, 'th'));\n\n document.getElementById('loc-count').innerText = `${locations.length} \u0e41\u0e2b\u0e48\u0e07`;\n\n const map = L.map('map', { zoomControl: false }).setView([13.2, 101.0], 6);\n let googleLayer;\n let currentType = 'm';\n\n function changeMap(type) {\n currentType = type;\n if (googleLayer) map.removeLayer(googleLayer);\n googleLayer = L.tileLayer(`https:\/\/{s}.google.com\/vt\/lyrs=${type}&x={x}&y={y}&z={z}`, {\n maxZoom: 20,\n subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],\n attribution: '© Google Maps'\n }).addTo(map);\n\n document.getElementById('btn-road').className = type === 'm' ? \"p-2.5 rounded-lg bg-blue-600 text-white shadow-md\" : \"p-2.5 rounded-lg text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800\";\n document.getElementById('btn-sat').className = type === 's' ? \"p-2.5 rounded-lg bg-blue-600 text-white shadow-md\" : \"p-2.5 rounded-lg text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800\";\n updateThemeFilter();\n }\n\n function updateThemeFilter() {\n const isDark = document.documentElement.classList.contains('dark');\n const mapEl = document.getElementById('map');\n if (isDark && currentType === 'm') { mapEl.classList.add('dark-map'); } \n else { mapEl.classList.remove('dark-map'); }\n }\n\n document.getElementById('dark-mode-toggle').onclick = () => {\n document.documentElement.classList.toggle('dark');\n updateThemeFilter();\n };\n\n const listContainer = document.getElementById('location-list-container');\n const customIcon = L.divIcon({ html: '<div class=\"pulse-marker\" style=\"width:14px;height:14px;\"><\/div>', iconSize: [14, 14], iconAnchor: [7, 7], className: '' });\n\n locations.forEach(loc => {\n const googleMapsUrl = `https:\/\/www.google.com\/maps\/dir\/?api=1&destination=${loc.lat},${loc.lng}`;\n const marker = L.marker([loc.lat, loc.lng], { icon: customIcon }).addTo(map);\n \n marker.bindPopup(`\n <div class=\"bg-blue-600 text-white p-3 font-bold text-sm flex justify-between items-center\">\n <span>${loc.name}<\/span>\n <\/div>\n <div class=\"p-4 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-400 text-xs\">\n <p class=\"mb-3\">${loc.address}<\/p>\n <a href=\"${googleMapsUrl}\" target=\"_blank\" class=\"inline-flex items-center justify-center w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg transition-colors gap-2\">\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M21.71 11.29l-9-9a.996.996 0 00-1.41 0l-9 9a.996.996 0 000 1.41l9 9c.39.39 1.02.39 1.41 0l9-9a.996.996 0 000-1.41zM14 14.5V12h-4v3H8.5v-3.5c0-.55.45-1 1-1H14V8l3.5 3.5-3.5 3.5z\"\/><\/svg>\n \u0e19\u0e33\u0e17\u0e32\u0e07 (Google Maps)\n <\/a>\n <\/div>\n `);\n\n const btn = document.createElement('div');\n btn.className = \"group relative w-full p-3 rounded-xl border border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 transition-all hover:bg-blue-50 dark:hover:bg-blue-900\/20 cursor-pointer shadow-sm\";\n \n btn.innerHTML = `\n <div class=\"flex justify-between items-start mb-1\">\n <div class=\"font-bold text-slate-700 dark:text-slate-200\">${loc.name}<\/div>\n <a href=\"${googleMapsUrl}\" target=\"_blank\" class=\"p-1.5 text-blue-600 hover:bg-blue-100 dark:hover:bg-blue-800 rounded-md transition-colors shadow-sm bg-blue-50 dark:bg-slate-800\" onclick=\"event.stopPropagation();\">\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M21.71 11.29l-9-9a.996.996 0 00-1.41 0l-9 9a.996.996 0 000 1.41l9 9c.39.39 1.02.39 1.41 0l9-9a.996.996 0 000-1.41zM14 14.5V12h-4v3H8.5v-3.5c0-.55.45-1 1-1H14V8l3.5 3.5-3.5 3.5z\"\/><\/svg>\n <\/a>\n <\/div>\n <div class=\"text-[10px] text-slate-400 line-clamp-1\">${loc.address}<\/div>\n `;\n \n btn.onclick = () => {\n map.flyTo([loc.lat, loc.lng], 16);\n marker.openPopup();\n if (window.innerWidth <= 640) {\n document.getElementById('map').scrollIntoView({ behavior: 'smooth' });\n }\n };\n listContainer.appendChild(btn);\n });\n\n document.getElementById('search-box').addEventListener('input', (e) => {\n const term = e.target.value.toLowerCase();\n const buttons = listContainer.children;\n for (let btn of buttons) {\n const text = btn.innerText.toLowerCase();\n btn.style.display = text.includes(term) ? 'block' : 'none';\n }\n });\n\n changeMap('m');\n setTimeout(() => { map.invalidateSize(); }, 500);\n <\/script>\n<\/body>\n<\/html>\n\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e40\u0e07\u0e34\u0e19\u0e17\u0e38\u0e19\u0e2b\u0e21\u0e38\u0e19\u0e40\u0e27\u0e35\u0e22\u0e19\u0e22\u0e32\u0e07\u0e1e\u0e32\u0e23\u0e32 \u0e1e\u0e34\u0e01\u0e31\u0e14\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19 \u0e40\u0e07\u0e34 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_eb_attr":"","footnotes":""},"class_list":["post-12779","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages\/12779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/comments?post=12779"}],"version-history":[{"count":21,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages\/12779\/revisions"}],"predecessor-version":[{"id":13384,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages\/12779\/revisions\/13384"}],"wp:attachment":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/media?parent=12779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n\n\n \n \n \u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e40\u0e07\u0e34\u0e19\u0e17\u0e38\u0e19\u0e2b\u0e21\u0e38\u0e19\u0e40\u0e27\u0e35\u0e22\u0e19\u0e22\u0e32\u0e07\u0e1e\u0e32\u0e23\u0e32<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;600;700&display=swap');\n \n :root {\n --accent-blue: #2563eb;\n --bg-soft: #f8fafc;\n --card-bg: #ffffff;\n --text-main: #1e293b;\n --border-color: #e2e8f0;\n }\n\n .dark {\n --bg-soft: #0f172a;\n --card-bg: #1e293b;\n --text-main: #f1f5f9;\n --border-color: #334155;\n }\n\n .wp-map-embed-container { \n width: 100%;\n font-family: 'Sarabun', sans-serif; \n background-color: var(--bg-soft);\n transition: background-color 0.3s ease;\n position: relative;\n height: 600px; \n max-height: 90vh;\n border-radius: 16px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n border: 1px solid var(--border-color);\n }\n\n .main-wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n }\n\n .content-area {\n flex: 1;\n display: flex;\n overflow: hidden;\n padding: 0.75rem;\n gap: 0.75rem;\n height: calc(100% - 56px); \/* Adjust for header height *\/\n }\n\n #map { \n height: 100%; \n width: 100%; \n border-radius: 12px; \n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);\n z-index: 1;\n background: #e5e7eb;\n }\n\n .dark-map {\n filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);\n }\n \n #location-list-container::-webkit-scrollbar {\n width: 5px;\n }\n #location-list-container::-webkit-scrollbar-thumb {\n background: #cbd5e1;\n border-radius: 10px;\n }\n\n .leaflet-popup-content-wrapper {\n border-radius: 16px;\n padding: 0;\n overflow: hidden;\n background: var(--card-bg);\n color: var(--text-main);\n }\n .leaflet-popup-content { margin: 0; width: 280px !important; }\n\n .pulse-marker {\n background: var(--accent-blue);\n border-radius: 50%;\n border: 2px solid white;\n box-shadow: 0 0 8px rgba(37, 99, 235, 0.6);\n animation: pulse 2s infinite;\n }\n @keyframes pulse {\n 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }\n 70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }\n 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }\n }\n\n @media (max-width: 640px) {\n .content-area { flex-direction: column; overflow-y: auto; }\n .wp-map-embed-container { height: 850px; }\n aside { width: 100% !important; height: 400px !important; flex-shrink: 0; }\n section { height: 400px !important; flex-shrink: 0; }\n }\n <\/style>\n<\/head>\n<body class=\"antialiased p-0 m-0\">\n\n <div class=\"wp-map-embed-container\">\n <div class=\"main-wrapper\">\n <header class=\"bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 px-6 py-2.5 flex items-center justify-between shadow-sm z-10 transition-colors duration-300\">\n <div class=\"flex items-center gap-3\">\n <div class=\"bg-blue-600 p-1.5 rounded-lg shadow-inner\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\/><\/svg>\n <\/div>\n <div>\n <h1 class=\"text-lg font-bold text-slate-800 dark:text-slate-100 leading-tight\">\u0e1e\u0e34\u0e01\u0e31\u0e14\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19<\/h1>\n <p class=\"text-[11px] text-slate-400 font-semibold tracking-wide uppercase\">\u0e40\u0e07\u0e34\u0e19\u0e17\u0e38\u0e19\u0e2b\u0e21\u0e38\u0e19\u0e40\u0e27\u0e35\u0e22\u0e19\u0e22\u0e32\u0e07\u0e1e\u0e32\u0e23\u0e32<\/p>\n <\/div>\n <\/div>\n \n <div class=\"flex items-center gap-4\">\n <span id=\"loc-count\" class=\"bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 text-[10px] font-bold px-2.5 py-1 rounded-md border border-slate-200 dark:border-slate-700\"><\/span>\n <button id=\"dark-mode-toggle\" class=\"p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors border border-slate-200 dark:border-slate-700\">\n <svg id=\"sun-icon\" class=\"w-5 h-5 text-amber-500 hidden dark:block\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\"\/><\/svg>\n <svg id=\"moon-icon\" class=\"w-5 h-5 text-slate-500 dark:hidden\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"\/><\/svg>\n <\/button>\n <\/div>\n <\/header>\n\n <main class=\"content-area\">\n <aside class=\"w-72 flex-shrink-0 flex flex-col bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden transition-colors duration-300 h-full\">\n <div class=\"p-3 border-b border-slate-100 dark:border-slate-800 bg-slate-50\/50 dark:bg-slate-800\/30\">\n <input type=\"text\" id=\"search-box\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19...\" class=\"w-full px-3 py-1.5 text-sm bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-100 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 transition-all\">\n <\/div>\n <div id=\"location-list-container\" class=\"flex-1 overflow-y-auto p-2 space-y-1.5\"><\/div>\n <\/aside>\n\n <section class=\"flex-1 relative h-full\">\n <div id=\"map\"><\/div>\n <div class=\"absolute top-4 right-4 z-[1000] flex flex-col gap-2\">\n <div class=\"bg-white dark:bg-slate-900 shadow-xl rounded-xl border border-slate-200 dark:border-slate-700 p-1 flex flex-col gap-1\">\n <button onclick=\"changeMap('m')\" id=\"btn-road\" class=\"p-2.5 rounded-lg transition-all bg-blue-600 text-white shadow-md\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7\" \/><\/svg>\n <\/button>\n <button onclick=\"changeMap('s')\" id=\"btn-sat\" class=\"p-2.5 rounded-lg transition-all text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9\" \/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n <script>\n const locations = [\n { name: \"\u0e2a\u0e48\u0e27\u0e19\u0e01\u0e25\u0e32\u0e07\", lat: 13.851871, lng: 100.577297, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 50 \u0e16\u0e19\u0e19\u0e1e\u0e2b\u0e25\u0e42\u0e22\u0e18\u0e34\u0e19 \u0e41\u0e02\u0e27\u0e07\u0e25\u0e32\u0e14\u0e22\u0e32\u0e27 \u0e40\u0e02\u0e15\u0e08\u0e15\u0e38\u0e08\u0e31\u0e01\u0e23 \u0e01\u0e23\u0e38\u0e07\u0e40\u0e17\u0e1e\u0e2f 10900\" },\n { name: \"\u0e28\u0e04\u0e22.\u0e09\u0e30\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e17\u0e23\u0e32\", lat: 13.568104, lng: 101.453767, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 99 \u0e2b\u0e21\u0e39\u0e48\u0e17\u0e35\u0e48 4 \u0e15\u0e33\u0e1a\u0e25\u0e25\u0e32\u0e14\u0e01\u0e23\u0e30\u0e17\u0e34\u0e07 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2a\u0e19\u0e32\u0e21\u0e0a\u0e31\u0e22\u0e40\u0e02\u0e15 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e09\u0e30\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e17\u0e23\u0e32 24160\" },\n { name: \"\u0e28\u0e04\u0e22.\u0e40\u0e0a\u0e35\u0e22\u0e07\u0e23\u0e32\u0e22\", lat: 19.872773, lng: 99.779363, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 72 \u0e2b\u0e21\u0e39\u0e48\u0e17\u0e35\u0e48 6 \u0e15\u0e33\u0e1a\u0e25\u0e1b\u0e48\u0e32\u0e2d\u0e49\u0e2d\u0e14\u0e2d\u0e19\u0e0a\u0e31\u0e22 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e40\u0e0a\u0e35\u0e22\u0e07\u0e23\u0e32\u0e22 \u0e16\u0e19\u0e19\u0e40\u0e14\u0e48\u0e19\u0e2b\u0e49\u0e32-\u0e14\u0e07\u0e21\u0e30\u0e14\u0e30 57000\" },\n { name: \"\u0e28\u0e04\u0e22.\u0e1a\u0e38\u0e23\u0e35\u0e23\u0e31\u0e21\u0e22\u0e4c\", lat: 15.230323, lng: 103.212100, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 85 \u0e2b\u0e21\u0e39\u0e48 15 \u0e15\u0e33\u0e1a\u0e25\u0e23\u0e48\u0e2d\u0e19\u0e17\u0e2d\u0e07 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2a\u0e15\u0e36\u0e01 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e1a\u0e38\u0e23\u0e35\u0e23\u0e31\u0e21\u0e22\u0e4c 31150\" },\n { name: \"\u0e28\u0e04\u0e22.\u0e2a\u0e07\u0e02\u0e25\u0e32\", lat: 7.015504, lng: 100.501315, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 9 \u0e16.\u0e01\u0e32\u0e0d\u0e08\u0e19\u0e27\u0e19\u0e34\u0e0a\u0e22\u0e4c \u0e15.\u0e2b\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48 \u0e2d.\u0e2b\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48 \u0e08.\u0e2a\u0e07\u0e02\u0e25\u0e32 90110\" },\n { name: \"\u0e28\u0e04\u0e22.\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35\", lat: 9.146677, lng: 99.634781, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 126 \u0e2b\u0e21\u0e39\u0e48 4 \u0e15\u0e33\u0e1a\u0e25\u0e17\u0e48\u0e32\u0e2d\u0e38\u0e41\u0e17 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e01\u0e32\u0e0d\u0e08\u0e19\u0e14\u0e34\u0e29\u0e10\u0e4c \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35 84340\" },\n { name: \"\u0e28\u0e04\u0e22.\u0e2b\u0e19\u0e2d\u0e07\u0e04\u0e32\u0e22\", lat: 18.156910, lng: 103.206929, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 239 \u0e2b\u0e21\u0e39\u0e48 8 \u0e15\u0e33\u0e1a\u0e25\u0e1e\u0e23\u0e30\u0e1a\u0e32\u0e17\u0e19\u0e32\u0e2a\u0e34\u0e07\u0e2b\u0e4c \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e23\u0e31\u0e15\u0e19\u0e27\u0e32\u0e1b\u0e35 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e2b\u0e19\u0e2d\u0e07\u0e04\u0e32\u0e22 43120\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e01\u0e23\u0e30\u0e1a\u0e35\u0e48\", lat: 8.163351, lng: 98.857640, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 205 \u0e21.1 \u0e15.\u0e40\u0e02\u0e32\u0e04\u0e23\u0e32\u0e21 \u0e2d.\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08.\u0e01\u0e23\u0e30\u0e1a\u0e35\u0e48 81000\" },\n { name: \"\u0e28\u0e27\u0e1b.\u0e01\u0e23\u0e30\u0e1a\u0e35\u0e48\", lat: 7.940251, lng: 99.160167, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 68 \u0e2b\u0e21\u0e39\u0e48 1 \u0e16\u0e19\u0e19\u0e40\u0e1e\u0e0a\u0e23\u0e40\u0e01\u0e29\u0e21 \u0e15\u0e33\u0e1a\u0e25\u0e04\u0e25\u0e2d\u0e07\u0e17\u0e48\u0e2d\u0e21\u0e43\u0e15\u0e49 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e04\u0e25\u0e2d\u0e07\u0e17\u0e48\u0e2d\u0e21 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e01\u0e23\u0e30\u0e1a\u0e35\u0e48 81120\" },\n { name: \"\u0e28\u0e27\u0e28.\u0e08\u0e31\u0e19\u0e17\u0e1a\u0e38\u0e23\u0e35\", lat: 12.615843, lng: 102.179330, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 27 \u0e2b\u0e21\u0e39\u0e48 1 \u0e15\u0e33\u0e1a\u0e25\u0e1e\u0e25\u0e31\u0e1a\u0e1e\u0e25\u0e32 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e08\u0e31\u0e19\u0e17\u0e1a\u0e38\u0e23\u0e35 22000\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e08\u0e31\u0e19\u0e17\u0e1a\u0e38\u0e23\u0e35\", lat: 12.843285, lng: 102.209447, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 35 \u0e2b\u0e21\u0e39\u0e48 7 \u0e15\u0e33\u0e1a\u0e25\u0e09\u0e21\u0e31\u0e19 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e21\u0e30\u0e02\u0e32\u0e21 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e08\u0e31\u0e19\u0e17\u0e1a\u0e38\u0e23\u0e35 22150\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e0a\u0e38\u0e21\u0e1e\u0e23\", lat: 10.834103, lng: 99.217999, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 345 \u0e2b\u0e21\u0e39\u0e48 4 \u0e16\u0e19\u0e19\u0e40\u0e1e\u0e0a\u0e23\u0e40\u0e01\u0e29\u0e21 \u0e15\u0e33\u0e1a\u0e25\u0e2a\u0e25\u0e38\u0e22 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e17\u0e48\u0e32\u0e41\u0e0b\u0e30 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e0a\u0e38\u0e21\u0e1e\u0e23 86140\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e15\u0e23\u0e31\u0e07\", lat: 7.254168, lng: 99.728355, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 187 \u0e2b\u0e21\u0e39\u0e48 5 \u0e15\u0e33\u0e1a\u0e25\u0e2a\u0e38\u0e42\u0e2a\u0e30 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e1b\u0e30\u0e40\u0e2b\u0e25\u0e35\u0e22\u0e19 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e15\u0e23\u0e31\u0e07 92120\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e19\u0e23\u0e32\u0e18\u0e34\u0e27\u0e32\u0e2a\", lat: 6.067559, lng: 101.879658, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 36 \u0e2b\u0e21\u0e39\u0e48 3 \u0e15\u0e33\u0e1a\u0e25\u0e23\u0e34\u0e42\u0e01\u0e4b \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2a\u0e38\u0e44\u0e2b\u0e07\u0e1b\u0e32\u0e14\u0e35 \u0e19\u0e23\u0e32\u0e18\u0e34\u0e27\u0e32\u0e2a 96140\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e19\u0e48\u0e32\u0e19\", lat: 18.864532, lng: 100.740494, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 128 \u0e2b\u0e21\u0e39\u0e48 1 \u0e15\u0e33\u0e1a\u0e25\u0e1c\u0e32\u0e2a\u0e34\u0e07\u0e2b\u0e4c \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e19\u0e48\u0e32\u0e19 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e19\u0e48\u0e32\u0e19 55000\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35\", lat: 6.744199, lng: 101.129337, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 100 \u0e2b\u0e21\u0e39\u0e48 1 \u0e15\u0e33\u0e1a\u0e25\u0e21\u0e48\u0e27\u0e07\u0e40\u0e15\u0e35\u0e49\u0e22 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e41\u0e21\u0e48\u0e25\u0e32\u0e19 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35 94180\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e1e\u0e31\u0e07\u0e07\u0e32\", lat: 8.875239, lng: 98.315003, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 52 \u0e2b\u0e21\u0e39\u0e48 1 \u0e15\u0e33\u0e1a\u0e25\u0e1a\u0e32\u0e07\u0e21\u0e48\u0e27\u0e07 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e15\u0e30\u0e01\u0e31\u0e48\u0e27\u0e1b\u0e48\u0e32 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e1e\u0e31\u0e07\u0e07\u0e32 82110\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e1e\u0e31\u0e17\u0e25\u0e38\u0e07\", lat: 7.592505, lng: 100.117172, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 252 \u0e2b\u0e21\u0e39\u0e48 15 \u0e15\u0e33\u0e1a\u0e25\u0e04\u0e27\u0e19\u0e21\u0e30\u0e1e\u0e23\u0e49\u0e32\u0e27 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e1e\u0e31\u0e17\u0e25\u0e38\u0e07 93000\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e20\u0e39\u0e40\u0e01\u0e47\u0e15\", lat: 8.056080, lng: 98.358249, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 166 \u0e2b\u0e21\u0e39\u0e48 9 \u0e15\u0e33\u0e1a\u0e25\u0e40\u0e17\u0e1e\u0e01\u0e23\u0e30\u0e29\u0e31\u0e15\u0e23\u0e35 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e16\u0e25\u0e32\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e20\u0e39\u0e40\u0e01\u0e47\u0e15 83110\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e23\u0e30\u0e19\u0e2d\u0e07\", lat: 10.511394, lng: 98.749109, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 10 \u0e2b\u0e21\u0e39\u0e48 3 \u0e15\u0e33\u0e1a\u0e25\u0e1a\u0e32\u0e07\u0e43\u0e2b\u0e0d\u0e48 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e01\u0e23\u0e30\u0e1a\u0e38\u0e23\u0e35 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e23\u0e30\u0e19\u0e2d\u0e07 85110\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e23\u0e37\u0e2d\u0e40\u0e2a\u0e32\u0e30\", lat: 6.425178, lng: 101.523583, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 54 \u0e2b\u0e21\u0e39\u0e48 2 \u0e15\u0e33\u0e1a\u0e25\u0e23\u0e37\u0e2d\u0e40\u0e2a\u0e32\u0e30 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e23\u0e37\u0e2d\u0e40\u0e2a\u0e32\u0e30 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e19\u0e23\u0e32\u0e18\u0e34\u0e27\u0e32\u0e2a 96150\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e25\u0e33\u0e1b\u0e32\u0e07\", lat: 18.358509, lng: 99.309071, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 204 \u0e2b\u0e21\u0e39\u0e48 6 \u0e15\u0e33\u0e1a\u0e25\u0e40\u0e27\u0e35\u0e22\u0e07\u0e15\u0e32\u0e25 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2b\u0e49\u0e32\u0e07\u0e09\u0e31\u0e15\u0e23 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e25\u0e33\u0e1b\u0e32\u0e07 52190\" },\n { name: \"\u0e28\u0e27\u0e2a.\u0e22\u0e30\u0e25\u0e32\", lat: 6.136209, lng: 101.166708, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 2 \u0e2b\u0e21\u0e39\u0e48 7 \u0e15\u0e33\u0e1a\u0e25\u0e18\u0e32\u0e23\u0e42\u0e15 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e18\u0e32\u0e23\u0e42\u0e15 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e22\u0e30\u0e25\u0e32 95150\" },\n { name: \"\u0e28\u0e27\u0e1e.\u0e22\u0e30\u0e25\u0e32\", lat: 6.577242, lng: 101.275990, address: \"\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 114 \u0e16\u0e19\u0e19\u0e2a\u0e38\u0e02\u0e22\u0e32\u0e07\u0e04\u0e4c \u0e15\u0e33\u0e1a\u0e25\u0e2a\u0e30\u0e40\u0e15\u0e07 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e22\u0e30\u0e25\u0e32 95000\" }\n ].sort((a, b) => a.name.localeCompare(b.name, 'th'));\n\n document.getElementById('loc-count').innerText = `${locations.length} \u0e41\u0e2b\u0e48\u0e07`;\n\n const map = L.map('map', { zoomControl: false }).setView([13.2, 101.0], 6);\n let googleLayer;\n let currentType = 'm';\n\n function changeMap(type) {\n currentType = type;\n if (googleLayer) map.removeLayer(googleLayer);\n googleLayer = L.tileLayer(`https:\/\/{s}.google.com\/vt\/lyrs=${type}&x={x}&y={y}&z={z}`, {\n maxZoom: 20,\n subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],\n attribution: '© Google Maps'\n }).addTo(map);\n\n document.getElementById('btn-road').className = type === 'm' ? \"p-2.5 rounded-lg bg-blue-600 text-white shadow-md\" : \"p-2.5 rounded-lg text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800\";\n document.getElementById('btn-sat').className = type === 's' ? \"p-2.5 rounded-lg bg-blue-600 text-white shadow-md\" : \"p-2.5 rounded-lg text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800\";\n updateThemeFilter();\n }\n\n function updateThemeFilter() {\n const isDark = document.documentElement.classList.contains('dark');\n const mapEl = document.getElementById('map');\n if (isDark && currentType === 'm') { mapEl.classList.add('dark-map'); } \n else { mapEl.classList.remove('dark-map'); }\n }\n\n document.getElementById('dark-mode-toggle').onclick = () => {\n document.documentElement.classList.toggle('dark');\n updateThemeFilter();\n };\n\n const listContainer = document.getElementById('location-list-container');\n const customIcon = L.divIcon({ html: '<div class=\"pulse-marker\" style=\"width:14px;height:14px;\"><\/div>', iconSize: [14, 14], iconAnchor: [7, 7], className: '' });\n\n locations.forEach(loc => {\n const googleMapsUrl = `https:\/\/www.google.com\/maps\/dir\/?api=1&destination=${loc.lat},${loc.lng}`;\n const marker = L.marker([loc.lat, loc.lng], { icon: customIcon }).addTo(map);\n \n marker.bindPopup(`\n <div class=\"bg-blue-600 text-white p-3 font-bold text-sm flex justify-between items-center\">\n <span>${loc.name}<\/span>\n <\/div>\n <div class=\"p-4 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-400 text-xs\">\n <p class=\"mb-3\">${loc.address}<\/p>\n <a href=\"${googleMapsUrl}\" target=\"_blank\" class=\"inline-flex items-center justify-center w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg transition-colors gap-2\">\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M21.71 11.29l-9-9a.996.996 0 00-1.41 0l-9 9a.996.996 0 000 1.41l9 9c.39.39 1.02.39 1.41 0l9-9a.996.996 0 000-1.41zM14 14.5V12h-4v3H8.5v-3.5c0-.55.45-1 1-1H14V8l3.5 3.5-3.5 3.5z\"\/><\/svg>\n \u0e19\u0e33\u0e17\u0e32\u0e07 (Google Maps)\n <\/a>\n <\/div>\n `);\n\n const btn = document.createElement('div');\n btn.className = \"group relative w-full p-3 rounded-xl border border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 transition-all hover:bg-blue-50 dark:hover:bg-blue-900\/20 cursor-pointer shadow-sm\";\n \n btn.innerHTML = `\n <div class=\"flex justify-between items-start mb-1\">\n <div class=\"font-bold text-slate-700 dark:text-slate-200\">${loc.name}<\/div>\n <a href=\"${googleMapsUrl}\" target=\"_blank\" class=\"p-1.5 text-blue-600 hover:bg-blue-100 dark:hover:bg-blue-800 rounded-md transition-colors shadow-sm bg-blue-50 dark:bg-slate-800\" onclick=\"event.stopPropagation();\">\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M21.71 11.29l-9-9a.996.996 0 00-1.41 0l-9 9a.996.996 0 000 1.41l9 9c.39.39 1.02.39 1.41 0l9-9a.996.996 0 000-1.41zM14 14.5V12h-4v3H8.5v-3.5c0-.55.45-1 1-1H14V8l3.5 3.5-3.5 3.5z\"\/><\/svg>\n <\/a>\n <\/div>\n <div class=\"text-[10px] text-slate-400 line-clamp-1\">${loc.address}<\/div>\n `;\n \n btn.onclick = () => {\n map.flyTo([loc.lat, loc.lng], 16);\n marker.openPopup();\n if (window.innerWidth <= 640) {\n document.getElementById('map').scrollIntoView({ behavior: 'smooth' });\n }\n };\n listContainer.appendChild(btn);\n });\n\n document.getElementById('search-box').addEventListener('input', (e) => {\n const term = e.target.value.toLowerCase();\n const buttons = listContainer.children;\n for (let btn of buttons) {\n const text = btn.innerText.toLowerCase();\n btn.style.display = text.includes(term) ? 'block' : 'none';\n }\n });\n\n changeMap('m');\n setTimeout(() => { map.invalidateSize(); }, 500);\n <\/script>\n<\/body>\n<\/html>\n\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e40\u0e07\u0e34\u0e19\u0e17\u0e38\u0e19\u0e2b\u0e21\u0e38\u0e19\u0e40\u0e27\u0e35\u0e22\u0e19\u0e22\u0e32\u0e07\u0e1e\u0e32\u0e23\u0e32 \u0e1e\u0e34\u0e01\u0e31\u0e14\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19 \u0e40\u0e07\u0e34 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_eb_attr":"","footnotes":""},"class_list":["post-12779","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages\/12779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/comments?post=12779"}],"version-history":[{"count":21,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages\/12779\/revisions"}],"predecessor-version":[{"id":13384,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages\/12779\/revisions\/13384"}],"wp:attachment":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/media?parent=12779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}