Aprende a convertir fácilmente una dirección de texto en coordenadas geográficas utilizando la API de codificación geográfica de Google.

Cómo convertir una dirección de texto en coordenadas geográficas utilizando la API de codificación geográfica de Google

El proceso de convertir una dirección de texto real a coordenadas geográficas, por ejemplo ("Plaza de Bolívar de Bogotá") en coordenadas geográficas (como latitud 4.5981206 y longitud -74.0760435), se llama Geocodificación, puedes almacenar esta información en tu base de datos para ubicar marcadores en los mapas de Google o cualquier otra cosa que puedas imaginar. La API de codificación geográfica de Google proporciona una forma bastante sencilla de acceder a estos servicios a través de una solicitud HTTP. La única desventaja de esta API de Google es que no está disponible en el nivel gratuito, por lo que tendrás que pagar por cada solicitud (0,005 USD o 5 USD por 1000 solicitudes).

En este artículo te explicaré cómo obtener fácilmente las coordenadas de una dirección de texto real con la API de codificación geográfica de Google.

1. Habilita la API de codificación geográfica

Lo primero que debe hacer es habilitar el acceso a la API de codificación geográfica en Google Cloud Platform. Abra la consola y diríjase a la zona de la biblioteca de API o al mercado aquí . Luego, busque la API de codificación geográfica:

Geocoding API Google Cloud Platform

Y habilítalo:

Enable Google Cloud Geocoding API

Recuerda que por el uso de codificación geográfica, se te cobrará por la API de codificación geográfica simple o el servicio de codificación geográfica de la API de JavaScript de Maps, 0,005 USD por solicitud o 5 USD por 1000 solicitudes.

2. Uso de la API de codificación geográfica en Google Maps

Si estás trabajando en la interfaz, simplemente puedes incluir el archivo de API de Google Maps en tu documento, solo asegúrate de reemplazar <YOUR-GOOGLE-MAPS-PLATFORM-API-KEY> con tu propia clave de API de Google Maps Platform:

<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-GOOGLE-MAPS-PLATFORM-API-KEY>" async></script>

Y usa el geocodificador con la siguiente lógica:

// 1. Inicializar GeoCoder
const geocoder = new google.maps.Geocoder();

// 2. La dirección de texto que desea convertir a coordenadas
let address = "Plaza de Bolívar de Bogotá";

// 3. Obtener coordenadas de la API
geocoder.geocode({ address: address }, (results, status) => {
    if (status === "OK") {
        // Mostrar respuesta en la consola
        console.log(results);
    } else {
        alert("Geocode error: " + status);
    }
});

La respuesta en este caso con la dirección dada en Colombia sería el siguiente objeto, donde encontrarás las coordenadas de la ubicación (lat 4.5981206, lng -74.0760435):

[
    {
        "address_components": [
            {
                "long_name": "11-10",
                "short_name": "11-10",
                "types": [
                    "street_number"
                ]
            },
            {
                "long_name": "Carrera 7",
                "short_name": "Cra. 7",
                "types": [
                    "route"
                ]
            },
            {
                "long_name": "La Catedral",
                "short_name": "La Catedral",
                "types": [
                    "neighborhood",
                    "political"
                ]
            },
            {
                "long_name": "La Candelaria",
                "short_name": "La Candelaria",
                "types": [
                    "political",
                    "sublocality",
                    "sublocality_level_1"
                ]
            },
            {
                "long_name": "Bogotá",
                "short_name": "Bogotá",
                "types": [
                    "locality",
                    "political"
                ]
            },
            {
                "long_name": "Bogotá",
                "short_name": "Bogotá",
                "types": [
                    "administrative_area_level_1",
                    "political"
                ]
            },
            {
                "long_name": "Colombia",
                "short_name": "CO",
                "types": [
                    "country",
                    "political"
                ]
            },
            {
                "long_name": "111711",
                "short_name": "111711",
                "types": [
                    "postal_code"
                ]
            }
        ],
        "formatted_address": "Cra. 7 #11-10, La Candelaria, Bogotá, Colombia",
        "geometry": {
            "location": {
                "lat": 4.5981206,
                "lng": -74.0760435
            },
            "location_type": "ROOFTOP",
            "viewport": {
                "south": 4.596771619708497,
                "west": -74.07739248029151,
                "north": 4.599469580291502,
                "east": -74.0746945197085
            }
        },
        "place_id": "ChIJj-XP7KeZP44RdhQ1NSu3nAk",
        "plus_code": {
            "global_code": "67P7HWXF+6H"
        },
        "types": [
            "establishment",
            "point_of_interest",
            "tourist_attraction"
        ]
    }
]

Lo más probable es que muestre las coordenadas obtenidas en el elemento Google Maps del documento. El siguiente documento muestra un ejemplo muy básico de un cuadro de búsqueda, donde el usuario puede escribir la dirección de texto, por lo que cuando la API lo convierte en un objeto de geolocalización, se mostrará en el mapa:

<!DOCTYPE html>
<html>
    <head>
        <title>Geocoding Service</title> 
    </head>
    <body>
        <!-- 1. Crea un cuadro de búsqueda donde el usuario proporcionará la dirección de texto -->
        <div id="floating-panel">
            <input id="address" type="textbox" value="Sydney, NSW" />
            <input id="submit-btn" type="button" value="Geocode" />
        </div>

        <div id="map" style="height: 500px;"></div>

        <!-- El script asincrónico se ejecuta inmediatamente y debe estar después de cualquier elemento DOM utilizado en la devolución de llamada. -->
        <script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-GOOGLE-MAPS-PLATFORM-API-KEY>&callback=initMap" async></script>

        <script>
            // 1. Inicializar un mapa básico
            function initMap() {
                const map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 8,
                    center: {
                        lat: -34.397,
                        lng: 150.644
                    }
                });

                // 2. Inicializar la API de GeoCoder
                const geocoder = new google.maps.Geocoder();

                // 3. Entonces, cuando el usuario haga clic en enviar , geocodifique la dirección dada si es posible
                document.getElementById("submit-btn").addEventListener("click", () => {
                    geocodeAddress(geocoder, map);
                });
            }

            // Manejar la conversión de la dirección de texto a coordenadas
            function geocodeAddress(geocoder, resultsMap) {
                const address = document.getElementById("address").value;

                // Busque la dirección con la API
                geocoder.geocode({ address: address }, (results, status) => {
                    if (status === "OK") {
                        // Mostrar respuesta en la consola
                        console.log(results);

                        // Establecer la ubicación del mapa obtenido por la API
                        resultsMap.setCenter(results[0].geometry.location);

                        // Agrega el marcador con la ubicación obtenida
                        new google.maps.Marker({
                            map: resultsMap,
                            position: results[0].geometry.location,
                        });
                    } else {
                        alert("Geocode error: " + status);
                    }
                });
            }
        </script>
    </body>
</html>

3. Uso de la API de codificación geográfica directamente

Si deseas usar la API sin usar Google Maps en el navegador, por ejemplo, en el backend usando PHP, Node.js o Go, deberás proceder de manera diferente. Hay un endpoint donde necesitas solicitar la información, proporcionando 2 parámetros GET:

  • address: contiene la cadena codificada en URL de la dirección que deseas convertir en coordenadas con la API
  • key: la clave de API de las plataformas de Google Maps. 
https://maps.googleapis.com/maps/api/geocode/json?address=<URL-ENCODED-TEXT-ADDRESS>&key=<YOUR-API-KEY>

Por ejemplo, con un lenguaje como PHP, puede usar una biblioteca basada en cURL para enviar la solicitud al backend o hacerlo aún más simple con file_get_contents:

<?php

// 1. Codifique la dirección para que se coloque de forma segura dentro de una URL
$address = urlencode("Bucaramanga, Colombia");
// 2. Tu clave de API de Google Maps Platform
$apikey = "your-api-key";

// 3. Solicita la geocodificación de la dirección indicada
$response = file_get_contents("https://maps.googleapis.com/maps/api/geocode/json?address=$address&key=$apikey");

// 4. Salida JSON con respuesta
echo $response;

Cuyo resultado sería el siguiente JSON:

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "Bucaramanga",
               "short_name" : "Bucaramanga",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "Bucaramanga",
               "short_name" : "Bucaramanga",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Santander",
               "short_name" : "Santander",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "Colombia",
               "short_name" : "CO",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "Bucaramanga, Santander, Colombia",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 7.166567,
                  "lng" : -73.09386590000001
               },
               "southwest" : {
                  "lat" : 7.071845,
                  "lng" : -73.17209009999999
               }
            },
            "location" : {
               "lat" : 7.119349,
               "lng" : -73.1227416
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 7.166567,
                  "lng" : -73.09386590000001
               },
               "southwest" : {
                  "lat" : 7.071845,
                  "lng" : -73.17209009999999
               }
            }
         },
         "place_id" : "ChIJ7cBR93oVaI4RbMNIEVXkoHU",
         "types" : [ "locality", "political" ]
      }
   ],
   "status" : "OK"
}

Y tan fácilmente podemos convertir cualquier dirección de texto como "123 Fake Street" a coordenadas que podemos colocar en cualquier Google Maps.

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores