{"id":321,"date":"2026-06-12T12:22:38","date_gmt":"2026-06-12T16:22:38","guid":{"rendered":"https:\/\/www.jose.tumarcaagencia.com\/?page_id=321"},"modified":"2026-06-12T12:23:20","modified_gmt":"2026-06-12T16:23:20","slug":"nuevo-clima","status":"publish","type":"page","link":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/nuevo-clima\/","title":{"rendered":"Nuevo Clima"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"321\" class=\"elementor elementor-321\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-99a547f e-flex e-con-boxed e-con e-parent\" data-id=\"99a547f\" 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-c81afc7 elementor-widget elementor-widget-shortcode\" data-id=\"c81afc7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <style>\n        .contenedor-mapa-clima {\n            position: relative;\n            width: 100%;\n            max-width: 800px; \/* Ajusta el tama\u00f1o m\u00e1ximo que quieras en tu web *\/\n            margin: 0 auto;\n            display: inline-block;\n        }\n        .contenedor-mapa-clima img {\n            width: 100%;\n            height: auto;\n            display: block;\n        }\n        \/* Estilos de los puntos de las ciudades *\/\n        .punto-ciudad {\n            position: absolute;\n            width: 12px;\n            height: 12px;\n            background-color: #ff3b30; \/* Color del punto (Rojo) *\/\n            border-radius: 50%;\n            cursor: pointer;\n            transform: translate(-50%, -50%);\n            box-shadow: 0 0 8px rgba(0,0,0,0.5);\n            transition: transform 0.2s ease;\n        }\n        .punto-ciudad:hover {\n            transform: translate(-50%, -50%) scale(1.4);\n            background-color: #007aff; \/* Cambia a azul al pasar el mouse *\/\n        }\n        \/* Texto fijo con el nombre de la ciudad *\/\n        .label-ciudad {\n            position: absolute;\n            top: -18px;\n            left: 50%;\n            transform: translateX(-50%);\n            font-size: 11px;\n            font-weight: bold;\n            color: #000;\n            white-space: nowrap;\n            text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff;\n            pointer-events: none;\n        }\n        \/* Ventana flotante (Tooltip) del Clima *\/\n        .tooltip-clima {\n            visibility: hidden;\n            opacity: 0;\n            position: absolute;\n            bottom: 20px;\n            left: 50%;\n            transform: translateX(-50%);\n            background-color: rgba(33, 33, 33, 0.95);\n            color: #fff;\n            padding: 8px 12px;\n            border-radius: 6px;\n            font-size: 12px;\n            line-height: 1.4;\n            text-align: center;\n            white-space: nowrap;\n            box-shadow: 0 4px 10px rgba(0,0,0,0.3);\n            z-index: 10;\n            transition: opacity 0.3s, visibility 0.3s;\n        }\n        .punto-ciudad:hover .tooltip-clima {\n            visibility: visible;\n            opacity: 1;\n        }\n    <\/style>\n\n    <div class=\"contenedor-mapa-clima\">\n        <!-- Renderiza tu imagen base -->\n        <img decoding=\"async\" src=\"https:\/\/tuweb.com\/wp-content\/uploads\/mapa_de_venezuela.webp\" alt=\"Mapa de Venezuela Clima\">\n\n        <!-- Generaci\u00f3n din\u00e1mica de los puntos -->\n                    <div class=\"punto-ciudad\" \n                 style=\"top: 28%; left: 54%;\"\n                 data-query=\"Caracas,VE\"\n                 data-id=\"ciudad-0\">\n                \n                <span class=\"label-ciudad\">Caracas<\/span>\n                \n                <!-- El Tooltip que se llenar\u00e1 con la API -->\n                <div class=\"tooltip-clima\" id=\"ciudad-0\">\n                    Cargando clima...\n                <\/div>\n            <\/div>\n                    <div class=\"punto-ciudad\" \n                 style=\"top: 24%; left: 13%;\"\n                 data-query=\"Maracaibo,VE\"\n                 data-id=\"ciudad-1\">\n                \n                <span class=\"label-ciudad\">Maracaibo<\/span>\n                \n                <!-- El Tooltip que se llenar\u00e1 con la API -->\n                <div class=\"tooltip-clima\" id=\"ciudad-1\">\n                    Cargando clima...\n                <\/div>\n            <\/div>\n                    <div class=\"punto-ciudad\" \n                 style=\"top: 29%; left: 45%;\"\n                 data-query=\"Valencia,VE\"\n                 data-id=\"ciudad-2\">\n                \n                <span class=\"label-ciudad\">Valencia<\/span>\n                \n                <!-- El Tooltip que se llenar\u00e1 con la API -->\n                <div class=\"tooltip-clima\" id=\"ciudad-2\">\n                    Cargando clima...\n                <\/div>\n            <\/div>\n                    <div class=\"punto-ciudad\" \n                 style=\"top: 29%; left: 36%;\"\n                 data-query=\"Barquisimeto,VE\"\n                 data-id=\"ciudad-3\">\n                \n                <span class=\"label-ciudad\">Barquisimeto<\/span>\n                \n                <!-- El Tooltip que se llenar\u00e1 con la API -->\n                <div class=\"tooltip-clima\" id=\"ciudad-3\">\n                    Cargando clima...\n                <\/div>\n            <\/div>\n                    <div class=\"punto-ciudad\" \n                 style=\"top: 45%; left: 10%;\"\n                 data-query=\"San Cristobal,VE\"\n                 data-id=\"ciudad-4\">\n                \n                <span class=\"label-ciudad\">San Crist\u00f3bal<\/span>\n                \n                <!-- El Tooltip que se llenar\u00e1 con la API -->\n                <div class=\"tooltip-clima\" id=\"ciudad-4\">\n                    Cargando clima...\n                <\/div>\n            <\/div>\n                    <div class=\"punto-ciudad\" \n                 style=\"top: 30%; left: 64%;\"\n                 data-query=\"Barcelona,VE\"\n                 data-id=\"ciudad-5\">\n                \n                <span class=\"label-ciudad\">Barcelona<\/span>\n                \n                <!-- El Tooltip que se llenar\u00e1 con la API -->\n                <div class=\"tooltip-clima\" id=\"ciudad-5\">\n                    Cargando clima...\n                <\/div>\n            <\/div>\n                    <div class=\"punto-ciudad\" \n                 style=\"top: 48%; left: 78%;\"\n                 data-query=\"Ciudad Guayana,VE\"\n                 data-id=\"ciudad-6\">\n                \n                <span class=\"label-ciudad\">Ciudad Guayana<\/span>\n                \n                <!-- El Tooltip que se llenar\u00e1 con la API -->\n                <div class=\"tooltip-clima\" id=\"ciudad-6\">\n                    Cargando clima...\n                <\/div>\n            <\/div>\n                    <div class=\"punto-ciudad\" \n                 style=\"top: 33%; left: 74%;\"\n                 data-query=\"Maturin,VE\"\n                 data-id=\"ciudad-7\">\n                \n                <span class=\"label-ciudad\">Matur\u00edn<\/span>\n                \n                <!-- El Tooltip que se llenar\u00e1 con la API -->\n                <div class=\"tooltip-clima\" id=\"ciudad-7\">\n                    Cargando clima...\n                <\/div>\n            <\/div>\n            <\/div>\n\n    <script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const apiKey = \"TU_API_KEY_AQUI\";\n        const puntos = document.querySelectorAll('.punto-ciudad');\n\n        puntos.forEach(punto => {\n            const query = punto.getAttribute('data-query');\n            const tooltipId = punto.getAttribute('data-id');\n            const tooltip = document.getElementById(tooltipId);\n\n            \/\/ Llamada as\u00edncrona a OpenWeatherMap por cada ciudad\n            fetch(`https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=${query}&appid=${apiKey}&units=metric&lang=es`)\n                .then(response => {\n                    if (!response.ok) throw new Error('Error de red');\n                    return response.json();\n                })\n                .then(data => {\n                    const temp = Math.round(data.main.temp);\n                    const humedad = data.main.humidity;\n                    const descripcion = data.weather[0].description;\n                    \/\/ Primera letra en may\u00fascula para la descripci\u00f3n\n                    const descCapitalizada = descripcion.charAt(0).toUpperCase() + descripcion.slice(1);\n\n                    \/\/ Insertamos la info estructurada en el tooltip\n                    tooltip.innerHTML = `\n                        <strong>${data.name}<\/strong><br>\n                        \ud83c\udf21\ufe0f ${temp}\u00b0C<br>\n                        \ud83d\udca7 Humedad: ${humedad}%<br>\n                        \u2601\ufe0f ${descCapitalizada}\n                    `;\n                })\n                .catch(err => {\n                    tooltip.innerHTML = \"Clima no disponible\";\n                    console.error(\"Error cargando el clima:\", err);\n                });\n        });\n    });\n    <\/script>\n    <\/div>\n\t\t\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-321","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages\/321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/comments?post=321"}],"version-history":[{"count":4,"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages\/321\/revisions"}],"predecessor-version":[{"id":325,"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages\/321\/revisions\/325"}],"wp:attachment":[{"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/media?parent=321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}