Cómo Obtener e Integrar la API de Google Solar en tu Web WordPress

La API de Google Solar es una poderosa herramienta que permite obtener información sobre el potencial de energía solar de un edificio o una ubicación específica. Con ella, puedes calcular la cantidad de energía que podrías generar con paneles solares y mostrar estos datos en tu sitio web.

En este artículo, te explicaremos paso a paso cómo:

  1. Obtener una clave de API en Google Cloud.
  2. Integrar la API en una web WordPress.

¡Vamos allá! 🚀


Paso 1: Obtener la API de Google Solar

Antes de poder usar la API en tu web, necesitas crear un proyecto en Google Cloud y habilitar la API de Google Solar. Sigue estos pasos:

1. Acceder a Google Cloud Console

Dirígete a Google Cloud Console e inicia sesión con tu cuenta de Google.

2. Crear un nuevo proyecto

  1. En la barra superior, haz clic en el selector de proyectos.
  2. Presiona «Nuevo Proyecto».
  3. Asigna un nombre al proyecto (por ejemplo, «Proyecto Solar API»).
  4. Haz clic en «Crear».

3. Habilitar la API de Google Solar

  1. En el menú lateral, ve a API y Servicios > Biblioteca.
  2. En la barra de búsqueda, escribe «Solar API».
  3. Selecciona la API y haz clic en «Habilitar».

4. Generar una clave de API

  1. Ve a API y Servicios > Credenciales.
  2. Haz clic en «Crear credenciales» y selecciona «Clave de API».
  3. Google generará una clave única. Cópiala y guárdala en un lugar seguro.

💡 Recomendación: Para mayor seguridad, puedes restringir la clave solo a ciertos dominios en la opción «Restringir clave» dentro de las credenciales.


Paso 2: Integrar la API de Google Solar en WordPress

Una vez obtenida la clave, vamos a integrarla en tu web. Hay diferentes formas de hacerlo, pero aquí explicaremos dos métodos sencillos:

Método 1: Insertando código en una página de WordPress

Si deseas mostrar información del potencial solar en una página específica de tu web, sigue estos pasos:

  1. Abre WordPress y ve a la página donde quieres mostrar los datos.
  2. Añade un bloque «HTML personalizado».
  3. Copia y pega el siguiente código, reemplazando "TU_CLAVE_DE_API" por la clave que generaste en Google Cloud:
<div id="solar-info"></div>

<script>
  async function getSolarData() {
    const apiKey = "TU_CLAVE_DE_API";
    const address = "1600 Amphitheatre Parkway, Mountain View, CA"; // Cambia por la dirección que deseas consultar
    const url = `https://solar.googleapis.com/v1/buildingInsights:findClosest?key=${apiKey}&location=${encodeURIComponent(address)}`;

    try {
      const response = await fetch(url);
      const data = await response.json();

      if (data.solarPotential) {
        document.getElementById("solar-info").innerHTML = `
          <h2>Potencial Solar para ${address}</h2>
          <p>Producción estimada: ${data.solarPotential.annualKwh} kWh/año</p>
          <p>Superficie de tejado disponible: ${data.solarPotential.usableAreaMeters2} m²</p>
        `;
      } else {
        document.getElementById("solar-info").innerHTML = "<p>No se encontraron datos para esta dirección.</p>";
      }
    } catch (error) {
      console.error("Error al obtener datos:", error);
      document.getElementById("solar-info").innerHTML = "<p>Error al cargar datos.</p>";
    }
  }

  getSolarData();
</script>
  1. Guarda y publica la página.
  2. Prueba la integración. Si todo está bien, deberías ver datos sobre el potencial solar de la ubicación ingresada.

💡 Consejo: Puedes permitir a los usuarios ingresar su propia dirección agregando un campo de entrada en el HTML.


Método 2: Usando un plugin para insertar código

Si prefieres no tocar el código directamente en una página, puedes usar un plugin para agregar el script de la API:

  1. Instala el plugin «WPCode – Insert Headers and Footers».
  2. Ve a Ajustes > Insert Headers and Footers.
  3. En el campo «Scripts in Footer», pega el código JavaScript de la API.
  4. Guarda los cambios y prueba la integración en una página de tu web.

Conclusión

La API de Google Solar es una excelente herramienta para mostrar información sobre el potencial fotovoltaico de una ubicación específica. Con este tutorial, has aprendido a:

✅ Obtener una clave de API en Google Cloud.
✅ Integrar la API en tu sitio WordPress de forma sencilla.
✅ Mostrar información sobre el potencial solar en tu web.

Si tienes alguna duda o necesitas ayuda con la implementación, ¡déjanos un comentario! ☀️💡

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *