Geolocalizador API

Integración en tu Aplicación

1. Descarga los Archivos

Descarga los paquetes para alojamiento local en tus propios servidores.

2. Implementación Rápida

Incluye los archivos y llama a la función de apertura.

<head>
  <link rel="stylesheet" href="geolocator.css">
</head>
<body>
  <script src="geolocator.js"></script>
  <script>
    Geolocator.open({ /* ... */ });
  </script>
</body>

Enlaces CDN (Método Recomendado)

Utiliza estos enlaces para mantener la librería siempre actualizada. Los enlaces se ajustan automáticamente a: https://testappmapas.dge.gob.pe

<!-- CSS de Geolocalización -->
<link rel="stylesheet" href="https://testappmapas.dge.gob.pe/static/css/geolocator.css">

<!-- JS de Geolocalización -->
<script src="https://testappmapas.dge.gob.pe/static/js/geolocator.js"></script>

3. Estructura del JSON de Dirección (`address`)

Para que el mapa muestre la ubicación correcta, debes enviar un objeto address con la siguiente estructura. Los campos son opcionales, pero cuantos más proporciones, más precisa será la búsqueda. Prioridad de Coordenadas: Si los campos latitud y longitud contienen valores, el servicio los priorizará para ubicar el punto directamente. Si se envían vacíos, se realizará la geocodificación mediante la dirección (donde el campo ubigeo es obligatorio).

{
    "pais": "Peru",
    "latitud": "-12.07212",
    "longitud": "-77.04780",
    "departamento": "Lima",    // CAMBIO: Ahora es obligatorio
    "provincia": "Lima",       // CAMBIO: Ahora es obligatorio    
    "ubigeo": "Jesus Maria",
    "tipo_via": "Calle",
    "via_nom": "Daniel Olaechea",
    "num_puerta": "199",
    "agrupamiento": "",
    "nombre_agrupamiento": "",
    "manzana": "",
    "block": "",
    "interior": "",
    "lote": "",
    "kilometro": "",
    "referencia": ""
}

Ejemplo: Obtener Token de Acceso (cURL)

Para entornos de producción, solicite un token usando sus credenciales de cliente:

curl -X POST \
  https://servidor_de_autenticacion/auth \
  -H "Content-Type: application/json" \
  -d '{
    "client_id": "SU_CLIENT_ID",
    "client_secret": "SU_CLIENT_SECRET",
    "grant_type": "client_credentials"
  }'

Ejemplos de Implementación Backend

Seleccione su tecnología para ver cómo obtener el token de forma segura en su servidor.

Controlador (Mapa.php)

$client = new \GuzzleHttp\Client();
$response = $client->request('POST', getenv('AUTH_URL'), [
    'json' => [
        'client_id' => getenv('AUTH_CLIENT_ID'),
        'client_secret' => getenv('AUTH_CLIENT_SECRET'),
        'grant_type' => 'client_credentials'
    ]
]);
$token = json_decode($response->getBody(), true)['access_token'];
// Pasar $token a la vista...

Vista (mapa_view.php)

<script>
    // El controlador PHP inyecta el token en esta variable JS
    const tokenDesdeBackend = "<?php echo $access_token; ?>";

    Geolocator.open({
      authToken: tokenDesdeBackend, // ¡Aquí se usa el token!
      // ... address, onConfirm para obtener el resultado, etc.
    });
</script>

Vista (views.py)

import requests
response = requests.post(os.getenv('AUTH_URL'), json={
    'client_id': os.getenv('AUTH_CLIENT_ID'),
    'client_secret': os.getenv('AUTH_CLIENT_SECRET'),
    'grant_type': 'client_credentials'
})
token = response.json().get('access_token')
# Renderizar template con {'access_token': token}...

Plantilla (mapa.html)

<script>
    // La vista de Django inyecta el token en esta variable JS
    const tokenDesdeBackend = "";

    Geolocator.open({
      authToken: tokenDesdeBackend,
      // ... address, onConfirm para obtener el resultado, etc.
    });
</script>

Ruta Express (server.js)

const axios = require('axios');
const response = await axios.post(process.env.AUTH_URL, {
    client_id: process.env.AUTH_CLIENT_ID,
    client_secret: process.env.AUTH_CLIENT_SECRET,
    grant_type: 'client_credentials'
});
const token = response.data.access_token;
res.render('vista', { token });

Plantilla (mapa_view.ejs)

<script>
    // La ruta de Express inyecta el token en esta variable JS
    const tokenDesdeBackend = "<%= accessToken %>";

    Geolocator.open({
      authToken: tokenDesdeBackend,
      // ... address, onConfirm para obtener el resultado, etc.
    });
</script>

Nota: El frontend solicita el token a tu backend (proxy) y luego inicializa el mapa.

Cliente (app.js)

// Ejemplo robusto con manejo de errores y async/await
document.getElementById('btn-abrir-mapa').addEventListener('click', async () => {
    try {
        // 1. Solicita el token a TU backend (tu endpoint local)
        const response = await fetch('/api/obtener-token-mapa');
        
        if (!response.ok) {
            throw new Error('Error de red al solicitar el token');
        }
        
        const data = await response.json();

        // 2. Inicializa el mapa con el token y configuración completa
        Geolocator.open({
            baseUrl: 'https://testappmapas.dge.gob.pe', // URL dinámica (Testing/Producción)
            authToken: data.access_token,
            address: {
                pais: 'Peru',
                ubigeo: 'Jesus Maria', 
                via_nom: 'Av. Salaverry',
                num_puerta: '801'
            },
            onConfirm: (coords) => {
                console.log("Coordenadas recibidas:", coords);
                // Aquí puedes actualizar tu formulario o UI
            }
        });
    } catch (err) {
        console.error("Error al cargar el mapa:", err);
    }
});

Servicio de Geolocalización