Integración de Google Maps en Net Core

En este post te mostraré cómo puedes integrar fácilmente Google Maps (https://developers.google.com/maps?hl=es-419) en tus proyectos de Net Core utilizando tan solo unas pocas líneas de código y aplicando JavaScript o JQuery. En este caso, nuestro objetivo final será implementar un buscador con autocompletado en el que, al pulsar en un botón o al introducir el texto de una localización, se nos muestre en nuestra aplicación un contenedor de Google Maps con dicha localización seleccionada.

Google Maps es una herramienta muy popular y ampliamente utilizada, lo que la convierte en una excelente opción para mejorar las funcionalidades de tus aplicaciones. Al implementar esta herramienta en tus proyectos, podrás añadir nuevas funcionalidades y mejorar la experiencia del usuario final.

El proceso es realmente sencillo de llevar a cabo y se puede resumir en tres puntos esenciales:

• Obtener una API Key de Google Maps Platform con una prueba gratuita o de pago (en el ejemplo se realizará con una prueba gratuita)
• Insertar dicha Key en nuestro proyecto mediante etiquetas script, inputs e iframes
• Añadir JavaScript o JQuery para hacer dinámica la presentación final de los servicios de Google Maps

Realmente, puedes seguir este proceso para obtener otras diversas funcionalidades adicionales de las APIs de Google, ya que los pasos a seguir casi siempre son los mismos.

Te guiaré paso a paso para que no tengas ninguna duda de qué hacer en cada parte del proceso. Si esto no supone ninguna complicación para ti, ya estás en posesión de una Api Key de Google o quieres ver directamente el resultado final de esta implementación, te sugiero que vayas a ver el vídeo colgado en nuestro canal de YouTube para que en tan solo un par de minutos hayas adquirido una nueva herramienta de desarrollador.

API KEY – Google Developers

Vamos a conseguir nuestra key, lo primero que haremos es dirigirnos a la página oficial de Google Cloud (https://cloud.google.com/?hl=es). Después iniciaremos sesión en dicha página. Os aconsejo utilizar una cuenta de Gmail para pruebas o una cuenta profesional ajena a vuestras cuentas personales, ya que vamos a solicitar una prueba gratuita para poder llevar a cabo este ejemplo. De esta manera no mezclaremos datos de la app con los nuestros y podremos manejar de una forma más segura dicho programa. En mi caso, voy a utilizar una cuenta de temporal que he creado para mi aplicación (Cut&Go).

Una vez accedas con tu cuenta, haz clic en ‘Consola’, en la parte superior derecha.

Es posible que si no has utilizado estos servicios antes, no tengas ningún proyecto creado aún o que si has accedido desde cualquier otro panel (como Google Maps Platform) se te genere un proyecto por defecto. Sea cual sea el caso, lo primero que vamos a hacer es crear un proyecto para realizar nuestras pruebas.

Una vez creado nuestro proyecto de prueba, nos dirigimos al panel de “APIs y servicios habilitados”, bien sea desde el menú lateral, o desde los accesos rápidos:

Desde este panel podremos revisar posteriormente el tráfico de peticiones que se realizan en cada uno de los servicios que tenemos habilitados en nuestro proyecto, con nuestras keys. Como aún no tenemos ninguna key generada y no se han realizado peticiones, los paneles estarán en blanco. Nos dirigimos al apartado de Credenciales.

Llegó el momento de crear nuestra API Key. Hacemos clic en + CREAR CREDENCIALES. Automáticamente se generará la clave que utilizaremos en las consultas JS que realizaremos desde nuestra aplicación posteriormente. Nota: Por razones obvias de seguridad, la clave mostrada en la siguiente imagen ya se ha deshabilitado.

Vamos a hacer clic en los tres puntitos de la derecha para editar nuestra clave. Le cambiaremos el nombre y comprobaremos como en la sección de Restricciones de API, todavía no tenemos habilitados varios de los servicios que posteriormente nos harán falta (como Embed o Places).

Vamos a guardar los cambios con el nombre nuevo y vamos a habilitar las APIs necesarias. En este punto, cabe aclarar que para determinadas APIs, servicios, o funciones (como Autocomplete) es necesario tener una cuenta con créditos.

En nuestro caso, acabamos de crear una cuenta nueva y no tenemos ningún crédito. A pesar de que otros servicios (como Embed) no consumen nada por petición, nosotros vamos a activar el periodo de prueba gratuito de Google Cloud para obtener 90 días de prueba con 300 créditos iniciales. Nota: No os preocupéis en absoluto por esta característica ya que, una vez finalicen los días de prueba o se acabe el crédito de la cuenta, simplemente se apagarán los servicios y no se os cobrará ni un solo euro, a menos que vosotros decidáis activar manualmente el cobro automático para seguir disfrutando de los servicios de API Developers de Google.

Para activar el periodo de prueba, tenemos dos opciones. Podemos hacer clic en ACTIVAR en el mensaje que nos aparece por defecto en la parte superior de cualquier panel de Google Cloud:

Otra opción sería activarlo una vez habilitemos uno de los servicios de Google Maps, como Places. El resultado es similar pero en el segundo caso podremos habilitar directamente todas las API de Google Maps automáticamente una vez terminemos el registro. De lo contrario, para las APIs que os señalaré en los siguientes pasos, tendríamos que buscarlas en la biblioteca y al igual que hemos hecho con PLACES tendríamos que habilitarlas una a una.

Sea cual sea la opción, tendremos que dejar habilitados nuestros servicios. Así que vamos a realizar un ejemplo para ver lo sencillo que es. Nos dirigiremos a la biblioteca de APIs y buscamos Places API. Una vez allí basta con hacer clic en el botón de habilitar. Os adjunto también las imágenes del registro de la prueba gratuita, accediendo desde uno de los servicios de Google Maps. De esta manera podréis ver la opción que os comento acerca de la activación automática de APIs de Google Maps.

En este proceso de registro, os pedirán un número de tarjeta de crédito/debito, además de otros datos personales, para verificar que no eres un bot. Si te sientes inseguro dando tu número de tarjeta te aconsejo utilizar una tarjeta desechable virtual como las de Revolut (https://www.revolut.com/es-ES/cards/).

Bueno, ya habéis visto que tenéis varias opciones de cara al registro de la prueba gratuita y de la activación de los servicios de Google Maps. El resultado final debe ser este:

Ahora volveremos a nuestro panel de credenciales para modificar nuestra key. En el panel de modificación de la key, dirígete al apartado de Restricciones de API. Una vez allí, habilita los cuatro servicios que acabamos de activar.

¡Listo! Ya tenemos nuestra API Key activada y configurada. Llegó el momento de lanzar nuestro buscador. Copiad la key y vamos a nuestro proyecto de Visual Studio. En mi caso trabajaré con un proyecto nuevo ASP.NET Core Web App (Model-View-Controller).

Buscador con autocompletado en Net Core

Voy a trabajar todo directamente en la View de mi HomeController. En ella tendremos un simple input para introducir nuestro texto y con un button para crear los mapas posteriormente. A nuestro input le vamos a asignar un id llamado ‘autocomplete’. Por otro lado voy a definir un @section para insertar nuestro código JS/JQuery. Recordad enlazar este section en vuestro Layout asociado.

Index.cshtml – (HomeController)

_Layout.cshtml – (Shared)

Vista

Fijaos bien en la url de conexión que he utilizado para traer los datos.

https://maps.googleapis.com/maps/api/js?libraries=places&key= AHORA VUESTRA API_KEY

&callback=initAutocomplete

¿Qué es initAutocomplete? Es nuestro método para configurar el input como campo de autocompletado. Este método es llamado ‘callback’ según cargue el servicio. Dentro de este método (ya sea con JS o con JQuery) he recuperado el elemento por su ID y después he creado una nueva constante llamada autocomplete. Esta constante es un nuevo objeto de google.map.places la cual recibe por parámetro el elemento previamente recuperado.

En este momento, nuestro campo ya es funcional y podemos escribir en él mientras Google se encarga de darnos las sugerencias de localización.

Ahora vamos a agregarle un poco más de funcionalidad. Quiero que al hacer clic en él se genere un mapa en un div al cual le voy a asignar un id llamado mapas. Vamos a agregar de paso JQuery para hacer la sintaxis más cómoda. Descarga el fichero de JQuery desde la siguiente url:  https://jquery.com/download/ Después añade el archivo a vuestra carpeta js (o la que quieras) de wwwroot y finalmente añadid una etiqueta script para enlazar el archivo. Ahora que ya podemos usar JQuery, voy a modificar la función initAutocomplete para recoger el input con dicha sintaxis.

Ahora vamos a asociar a nuestro botón la funcionalidad para recoger la información proporcionada por el servicio de la API. Voy a almacenar la información devuelta en una variable place. Si realizáis un console.log de dicho objeto veréis la información asociada que podremos obtener por cada búsqueda.

Como veis podemos recuperar mucha información de cada resultado ofrecido por la API. Ahora, para insertar el mapa en nuestro div lo único que debemos recuperar es la dirección de dicha localización. En este caso, nos basta con recoger la propiedad formatted_address de nuestro objeto place. Una vez tengamos almacenada dicha cadena de texto, se la pasaremos a una nueva función llamada getGoogleMapsIframe (o el nombre que prefieras).

En esta nueva función, vamos a crear dinámicamente una nueva etiqueta iframe. La configuraremos añadiendo al atributo src, la cadena con la dirección previamente obtenida. Después, si queréis, podéis configurar sus estilos, su tamaño, su borde, etc.

Para configurar la url del iframe necesitamos una nueva url de la API de Google. Su estructura es la siguiente:

https://www.google.com/maps/embed/v1/place?q=

${encodeURIComponent(address)}

&key= AQUÍ TU API_KEY

Fíjate que utilizamos encodeURIComponent para codificar la cadena de texto correspondiente a la dirección de la localización (address) y que de esa forma podamos asegurarnos que se integra correctamente en la url de la API.

Por último, sustituimos el console.log de la función anterior (initAutocomplete) e incluimos la llamada a nuestra nueva función, pasándole por parámetro la dirección recogida del atributo de nuestro objeto place. Es decir:

¡Y listo! Ya tenemos nuestro buscador con autocompletado y con inserción de mapas en nuestro proyecto ASP Net Core. Completamente funcional y, como habéis visto, de una forma muy sencilla de implementar. Muchas gracias por seguir este tutorial y espero que esta herramienta te sea útil en el futuro en tus proyectos. ¡Hasta el próximo post!

Autor: Giovanny Andrés Cortés Hernández
Curso: Desarrollo Web Full Stack + MultiCloud con Azure y AWS
Centro: Tajamar
Año académico: 2022-2023
Código / recursos utilizados / Otros datos de interés:

• GitHub: https://github.com/GiovannyCortes
• Linkedin: https://es.linkedin.com/in/giovannycortes