Cómo Mostrar el Clima Actual y la Ubicación con PHP y JavaScript Paso a Paso

📄 Contenido:

¿Quieres agregar a tu sitio web una sección para mostrar el clima actual y la ubicación del usuario?
Aquí aprenderás cómo hacerlo utilizando JavaScript para obtener la ubicación y PHP para consultar una API de clima como OpenWeatherMap.

🌍 Paso 1: Obtener la ubicación del usuario con JavaScript

<script>
navigator.geolocation.getCurrentPosition(function(position) {
    let lat = position.coords.latitude;
    let lon = position.coords.longitude;

    // Enviar coordenadas al servidor PHP
    fetch(`clima.php?lat=${lat}&lon=${lon}`)
    .then(response => response.text())
    .then(data => {
        document.getElementById("resultado").innerHTML = data;
    });
});
</script>

<div id="resultado">Cargando clima...</div>

⚠️ Este script pide permiso al usuario para acceder a su ubicación.

☁️ Paso 2: Archivo PHP para mostrar el clima actual

clima.php

<?php
if (isset($_GET['lat']) && isset($_GET['lon'])) {
    $lat = $_GET['lat'];
    $lon = $_GET['lon'];
    $apiKey = "TU_API_KEY_DE_OPENWEATHER"; // Regístrate en openweathermap.org

    $url = "https://api.openweathermap.org/data/2.5/weather?lat=$lat&lon=$lon&appid=$apiKey&units=metric&lang=es";
    $data = json_decode(file_get_contents($url), true);

    if ($data && isset($data['main'])) {
        $temp = $data['main']['temp'];
        $clima = $data['weather'][0]['description'];
        $ciudad = $data['name'];

        echo "<strong>Ubicación:</strong> $ciudad<br>";
        echo "<strong>Clima:</strong> $clima<br>";
        echo "<strong>Temperatura:</strong> $temp °C";
    } else {
        echo "No se pudo obtener el clima.";
    }
} else {
    echo "Coordenadas no disponibles.";
}
?>

☁️ Paso 2: Archivo PHP para mostrar el clima actual

clima.php

<?php
if (isset($_GET['lat']) && isset($_GET['lon'])) {
    $lat = $_GET['lat'];
    $lon = $_GET['lon'];
    $apiKey = "TU_API_KEY_DE_OPENWEATHER"; // Regístrate en openweathermap.org

    $url = "https://api.openweathermap.org/data/2.5/weather?lat=$lat&lon=$lon&appid=$apiKey&units=metric&lang=es";
    $data = json_decode(file_get_contents($url), true);

    if ($data && isset($data['main'])) {
        $temp = $data['main']['temp'];
        $clima = $data['weather'][0]['description'];
        $ciudad = $data['name'];

        echo "<strong>Ubicación:</strong> $ciudad<br>";
        echo "<strong>Clima:</strong> $clima<br>";
        echo "<strong>Temperatura:</strong> $temp °C";
    } else {
        echo "No se pudo obtener el clima.";
    }
} else {
    echo "Coordenadas no disponibles.";
}
?>

🔎 Notas adicionales:

OpenWeatherMap es gratis con límite de peticiones por minuto. Puedes usar una API gratuita registrándote.
Asegúrate que tu servidor permita peticiones externas (file_get_contents con URLs).
Puedes mejorar el diseño con Bootstrap o Tailwind fácilmente.
Si usas https en tu web, la geolocalización funciona mejor.