Creando un Map en PHP y Drive

|-- root
|   |-- public
|       |-- api
|           |-- src
|   |-- private
|       |-- credentials.json

{
    "require": {
        "slim/slim": "^4.0",
        "slim/psr7": "^1.8"
    },
    "autoload": {
        "psr-4": {
            "App\\": "src/"
        }
    }
}

<IfModule mod_rewrite.c>
    RewriteEngine On

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d

    # Todo lo que llegue aquí lo procesa index.php
    RewriteRule ^ index.php [QSA,L]
</IfModule>

<?php
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request;
use Slim\Factory\AppFactory;
use App\GooglePhotos;

// El autoload está en la misma carpeta api/
require __DIR__ . '/vendor/autoload.php';

$app = AppFactory::create();

// IMPORTANTE
$app->setBasePath('/api');

$app->addRoutingMiddleware();
$app->addErrorMiddleware(true, true, true);

$google = new GooglePhotos();

// Rutas...
$app->get('/setup', function (Request $request, Response $response) use ($google) {
    return $response->withHeader('Location', $google->getAuthUrl())->withStatus(302);
});

$app->get('/callback', function (Request $request, Response $response) use ($google) {
    $params = $request->getQueryParams();
    $google->authenticate($params['code']);
    $response->getBody()->write("Conectado con éxito.");
    return $response;
});

$app->get('/photos', function (Request $request, Response $response) use ($google) {
    $params = $request->getQueryParams();
    $token = $params['nextPageToken'] ?? null;
    $photos = $google->getPhotos($token);
    $response->getBody()->write(json_encode($photos));
    return $response
        ->withHeader('Content-Type', 'application/json')
        ->withHeader('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0')
        ->withHeader('Pragma', 'no-cache');
});

$app->run();

<?php
namespace App;

class GooglePhotos {
    private $tokenPath;
    private $credentialsPath;
    private $scope = "https://www.googleapis.com/auth/drive.readonly";

    public function __construct() {
        $this->tokenPath = __DIR__ . '/../../../private/token.json';
        $this->credentialsPath = __DIR__ . '/../../../private/credentials.json';
    }

    private function getCredentials() {
        if (!file_exists($this->credentialsPath)) throw new \Exception("Falta credentials.json");
        $data = json_decode(file_get_contents($this->credentialsPath), true);
        return $data['web'] ?? $data['installed'] ?? $data;
    }

    public function getAuthUrl() {
        $creds = $this->getCredentials();

        if (empty($creds['client_id'])) {
            die("ERROR: client_id está vacío. Estructura del JSON: " . print_r($creds, true));
        }

        $params = [
            'client_id'     => $creds['client_id'],
            'redirect_uri'  => $creds['redirect_uris'][0],
            'scope'         => $this->scope,
            'response_type' => 'code',
            'access_type'   => 'offline',
            'prompt'        => 'consent'
        ];
        return "https://accounts.google.com/o/oauth2/v2/auth?" . http_build_query($params);
    }

    public function authenticate($code) {
        $creds = $this->getCredentials();
        return $this->postToTokenEndpoint([
            'client_id'     => $creds['client_id'],
            'client_secret' => $creds['client_secret'],
            'code'          => $code,
            'redirect_uri'  => $creds['redirect_uris'][0],
            'grant_type'    => 'authorization_code'
        ]);
    }

    private function postToTokenEndpoint($params) {
        $ch = curl_init('https://oauth2.googleapis.com/token');
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($params));
        $response = json_decode(curl_exec($ch), true);
        curl_close($ch);

        $tokenToSave = [
            'access_token'  => $response['access_token'],
            'expires_at'    => time() + $response['expires_in'],
            'refresh_token' => $response['refresh_token'] ?? (json_decode(file_get_contents($this->tokenPath), true)['refresh_token'] ?? null)
        ];
        file_put_contents($this->tokenPath, json_encode($tokenToSave));
        return $tokenToSave['access_token'];
    }

    private function getValidAccessToken() {
        if (!file_exists($this->tokenPath)) throw new \Exception("Falta token.json");
        $tokenData = json_decode(file_get_contents($this->tokenPath), true);
        if (time() > ($tokenData['expires_at'] - 30)) {
            return $this->refreshAccessToken($tokenData['refresh_token']);
        }
        return $tokenData['access_token'];
    }

    private function refreshAccessToken($refreshToken) {
        $creds = $this->getCredentials();
        return $this->postToTokenEndpoint([
            'client_id'     => $creds['client_id'],
            'client_secret' => $creds['client_secret'],
            'refresh_token' => $refreshToken,
            'grant_type'    => 'refresh_token'
        ]);
    }

    public function getPhotos($nextPageToken = null, $folderName = "MisAndanzas", $seconds = 30) {
        $cacheFile = __DIR__ . '/../../../private/photos_cache.json';

        // Si el archivo de caché existe y es reciente, lo devolvemos
        if (file_exists($cacheFile) && (time() - filemtime($cacheFile) < $seconds)) {
            return json_decode(file_get_contents($cacheFile), true);
        }

        $accessToken = $this->getValidAccessToken();

        $folderId = $this->getFolderIdByName($folderName, $accessToken);
        if (!$folderId) return ["error" => "No se encontró la carpeta '$folderName'"];

        $allPhotos = [];
        $pageToken = null;

        do {
            $query = urlencode("'$folderId' in parents and mimeType contains 'image/' and trashed = false");
            // Pedimos el máximo por página (100) para terminar antes
            $url = "https://www.googleapis.com/drive/v3/files?q=$query"
                . "&fields=nextPageToken,files(id,name,thumbnailLink,imageMediaMetadata,createdTime)"
                . "&pageSize=100";

            if ($pageToken) {
                $url .= "&pageToken=" . $pageToken;
            }

            $ch = curl_init($url);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_HTTPHEADER, ['Authorization: Bearer ' . $accessToken]);
            $res = json_decode(curl_exec($ch), true);
            curl_close($ch);

            if (isset($res['files'])) {
                foreach ($res['files'] as $file) {
                    $meta = $file['imageMediaMetadata'] ?? null;
                    $location = $meta['location'] ?? null;

                    // Solo guardamos las que tienen GPS para no llenar el JSON de basura
                    if ($location) {
                        $allPhotos[] = [
                            'id'      => $file['id'],
                            'name'    => $file['name'],
                            'url'     => str_replace('=s220', '=s800', $file['thumbnailLink'] ?? ''),
                            'lat'     => (float)$location['latitude'],
                            'lng'     => (float)$location['longitude'],
                            'date'    => $meta['time'] ?? $file['createdTime'] ?? null,
                            'date_human' => isset($meta['time']) ? date("d/m/Y H:i", strtotime($meta['time'])) : null
                        ];
                    }
                }
            }

            // Si hay un token, el bucle se repite; si no, termina.
            $pageToken = $res['nextPageToken'] ?? null;

        } while ($pageToken);

        // Ordenamos por fecha antes de enviar al cliente
        usort($allPhotos, function($a, $b) {
            return strtotime($a['date']) - strtotime($b['date']);
        });

        return $allPhotos;
    }

    private function getFolderIdByName($name, $accessToken) {
        $query = urlencode("name = '$name' and mimeType = 'application/vnd.google-apps.folder' and trashed = false");
        $url = "https://www.googleapis.com/drive/v3/files?q=$query&fields=files(id)";

        $ch = curl_init($url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_HTTPHEADER, ['Authorization: Bearer ' . $accessToken]);
        $res = json_decode(curl_exec($ch), true);
        curl_close($ch);

        return $res['files'][0]['id'] ?? null;
    }

<head>
    ...
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head>
<body>
<div id="app">
    <div id="map"></div>
    <div v-if="selectedPhoto" class="lightbox" @click="selectedPhoto = null">
        <span class="close-btn">&times;</span>
        <img :src="getFullSizeUrl(selectedPhoto.url)" @click.stop />
        <div class="lightbox-caption">
            <span class="date-badge">&nbsp;</span>
        </div>
    </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</body>

const { createApp, onMounted, ref } = Vue;

    createApp({
        setup() {
            const map = ref(null);
            const photos = ref([]);
            const selectedPhoto = ref(null);
            const getFullSizeUrl = (url) => {
                return url ? url.replace(/=s\d+/, '=s0') : '';
            };

            const openImage = (id) => {
                console.log("Intentando abrir foto ID:", id); // Para debug
                const photo = photos.value.find(p => p.id === id);
                if (photo) {
                    selectedPhoto.value = photo;
                }
            };
            window.openImage = openImage;

            const initMap = () => {
                map.value = L.map('map', {
                    minZoom: 2,
                    worldCopyJump: true
                }).setView([17, 0], 2);

                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '© OpenStreetMap'
                }).addTo(map.value);
            };

            const loadPhotos = async () => {
                try {
                    const response = await fetch('/api/photos');
                    const data = await response.json();

                    // Filtrar solo las que tienen coordenadas
                    photos.value = data
                        .filter(p => p.lat && p.lng)
                        .sort((a, b) => new Array(a.date).toLocaleString().localeCompare(new Array(b.date).toLocaleString()));

                    // Añadir marcadores
                    photos.value.forEach(photo => {
                        const marker = L.marker([photo.lat, photo.lng]).addTo(map.value);

                        // Contenido del Popup
                        const popupContent = `
                            <div style="text-align:center" id="pop-${photo.id}">
                                <strong>${photo.date_human}</strong><br>
                                <img src="${photo.url}"
                                     class="img-click"
                                     style="width:150px; cursor:pointer; border-radius:4px; margin-top:5px;" />
                            </div>
                        `;
                        marker.bindPopup(popupContent);
                        marker.on('popupopen', function() {
                            const container = document.querySelector(`#pop-${photo.id} .img-click`);
                            if (container) {
                                container.onclick = () => {
                                    window.openImage(photo.id);
                                };
                            }
                        });
                    });

                } catch (error) {
                    console.error("Error cargando fotos:", error);
                }
            };

            onMounted(() => {
                initMap();
                loadPhotos();
                window.addEventListener('keydown', (e) => {
                    if (e.key === 'Escape') {
                        selectedPhoto.value = null;
                    }
                });
            });

            return { photos, selectedPhoto, openImage, getFullSizeUrl};
        }
    }).mount('#app');