Introducción a React Google Maps

0
113

Índice de contenidos

  1. Introducción
  2. Conseguir tu API Key
  3. Instalación React Google Maps
  4. Componentes
  5. Hooks
  6. Conclusión

Introducción

¿Alguna vez se te ha ocurrido hacer algún proyecto en el que te gustaría incluir un mapa de google maps pero te has pensado que es algo muy complejo y tedioso?

Pues en este articulo vamos a ver una pequeña introducción con la cual vas a tener los conocimientos suficientes para renderizar un mapa y añadir marcadores a gracias a la librería de react-google-maps. Vamos a por ello! 🚀

Conseguir tu API Key

El uso del API de Google Maps no es gratuito, el lado bueno, es que Google nos ofrece un crédito mensual gratuito con el cual para proyectos pequeños y para hacer pruebas es más que suficiente.

Lo primero que vamos a necesitar para interactuar con el API de Google Maps es conseguir nuestra API Key. Para ello, accedemos a Google Cloud Platform con nuestra cuenta de Google.

Y hacemos click en el botón para acceder a la Consola:

botón Consola

 

Lo siguiente que tenemos que hacer es seleccionar nuestro proyecto o crear uno nuevo si aún no tenemos ninguno creado.

Selección de proyecto

 

Una vez estamos ubicado en nuestro proyecto, desplegamos el menú lateral y hacemos click en APIs y servicios. Una vez dentro hacemos click en en el botón que pone ‘HABILITAR APIS Y SERVICIOS’.

Y buscamos Maps JavaScript API la cual nos va a permitir interactuar con nuestros mapas, estilizarlos y visualizar data en ellos.

Selección Maps JavaScript API

 

Hacemos click y la habilitamos:

Habilitar API

 

Te saltara una modal con tu API key, asegúrate de copiarla.

Clave de API

 

Y le damos al botón para acceder a Google Maps Platform. Te saltará otra modal para restringir el uso de la API Key. Para este caso no la voy a restringir pero para vuestros proyectos personales lo recomiendo para una mayor seguridad y que no se os consuma la cuota por arte de magia.

Modal Proteger la clave de API

Instalación React Google Maps

Una vez tenemos el API Key, ya podemos empezar a usar el API de Google Maps. Para ellos vamos a crearnos un proyecto de React con Vite y vamos a instalar la librería de react-google-maps. Si no sabes crear un proyecto de React con Vite te dejo este enlace a un articulo que escribí hace poco de como hacerlo.

Una vez tenemos el proyecto creado, instalamos la librería con el siguiente comando:

npm install @vis.gl/react-google-maps

o

yarn add @vis.gl/react-google-maps

Componentes

En este apartado, vamos a ver los principales componentes de React que nos proporciona esta librería.

API Provider

El componente <APIProvider> es el componente encargado de cargar el API JavaScript de Google Maps.

Provee el contexto necesario APIProviderContext para el correcto funcionamiento de otros componentes y hooks de la librería.

Normalmente se suele ubicar una única instancia del APIProvider que se puede utilizar en cualquier nivel de la aplicación.

El componente APIProvider únicamente necesita el API key que generamos anteriormente para funcionar:

import React from 'react';
import {APIProvider} from '@vis.gl/react-google-maps';

export const App = () => (
  <APIProvider apiKey={'API_KEY'}>
    {/* otros componentes */}
  </APIProvider>
);

Además tiene otras propiedades opcionales para configurar el idioma, la región, etc…

Sería recomendable establecer las diferentes KEYS como variables de entorno y asegurarse de que estas no sean accesibles a otras personas.

Map

<Map> es otro de los componentes más importantes. Es el encargado de renderizar el mapa de Google.

Para que el mapa sea renderizado correctamente será necesario que se encuentre dentro del APIPRovider como ya hemos mencionado, indicar una altura y una anchura al padre contenedor del mapa y además indicar algunas de las siguientes propiedades:

  • La propiedad zoom si no queremos que el usuario pueda interactuar con el mapa o en caso contrario la propiedad defaultZoom . Con la cual vamos a indicar el zoom con el que se va a renderizar el mapa. Estas son los valores que recomienda la documentación:
    • 1: El mundo entero
    • 5: Masas continentales
    • 10: Ciudades
    • 15: Calles
    • 20: Estructuras
  • La propiedad center o defaultCenter siguiendo el mismo criterio que con la propiedad zoom . Mediante esta propiedad vamos a indicar el punto geográfico en el cual vamos a querer que se centre el mapa. Para ello tenemos que pasarle un objeto con los valores de la latitud y la longitud del punto geográfico.
    { lat: number, lng: number }
    

Tiene algunas propiedades más que nos proporcionan ciertas funcionalidades, entre ellas voy a destacar la propiedad mapId con la cual vamos a poder adaptar el mapa a nuestras necesidades mediante un Map ID que crearemos desde Google Maps Platform.

Para ello vamos a la pestaña de Administración de mapas y hacemos click en el botón para crear un nuevo Map ID:

Administración de mapas

Creación id de mapa nuevo

Una vez creado, lo copiamos y se lo añadimos a nuestro componente <Map>

id de mapa

 

import {APIProvider, Map} from '@vis.gl/react-google-maps';

export const App = () => (
  <APIProvider apiKey={API_KEY}>
    <Map zoom={10} center={{lat: 53.54992, lng: 10.00678}} mapId={MAP_ID} style={{width: '100vw', height: '100vh'}} />
  </APIProvider>
);

Una vez tenemos el Map ID vamos a poder customizar ese mapa desde el apartado de Diseños de Mapa:

Crear diseño de mapa

 

Map Control

El componente <MapControl> te permite renderizar componentes de control dentro de la instancia del mapa. Estos componentes nos van a permitir realizar acciones como hacer zoom, desplazar… en nuestro mapa.

Únicamente tiene una propiedad position que nos permite indicar donde se va a ubicar el control.

import {APIProvider, ControlPosition, Map, MapControl} from '@vis.gl/react-google-maps';

export const App = () => (
  <APIProvider apiKey={API_KEY}>
    <Map zoom={10} center={{lat: 53.54992, lng: 10.00678}} mapId={MAP_ID} style={{width: '100vw', height: '100vh'}}>
        <MapControl position={ControlPosition.TOP_RIGHT}>
        ...
        </MapControl>
    </Map>
  </APIProvider>
);

Info Window

El componente <InfoWindow> renderiza como una especie de pequeña modal que se utiliza para dar información sobre localizaciones del mapa. Estas ventanas de información pueden ubicarse en cualquier posición del mapa o incluso, anclarlas a un componente <Marker> que veremos más adelante.

El componente puede renderizar cualquier elemento JSX como hijo, pero tiene ciertas limitaciones a la hora de estilizar la ventana.

Algunas de sus propiedades más importantes son:

  • position : Latitud y longitud para ubicar la ventana.
  • anchor : Mediante esta propiedad se especifica la referencia del Marker al que va a estar anclado el componente.
  • zIndex : Para indicar la superposición de elementos.
  • pixelOffset : Para indicar la separación entre el componente y el punto del mapa referenciado.
  • disableAutoPan : Desactiva o activa la panorámica del mapa para que la ventana de información sea totalmente visible cuando se abra.
  • shouldFocus : Indica si el foco debe moverse cuando se abre la ventana.
  • headerContent : Establece el contenido que se va a mostrar en el cabecera de la ventana.
  • headerDisabled : Desactiva la fila dedicada a la cabecera y oculta el botón de cierre.

Además recibe dos eventos:

  • onClose : Se dispara cuando se cierra el InfoWindow.
  • onCloseClick : Se dispara al hacer click en el botón de cerrar.
import {APIProvider, InforWindow, Map, MapControl} from '@vis.gl/react-google-maps';

export const App = () => (
  <APIProvider apiKey={API_KEY}>
    <Map zoom={10} center={{lat: 53.54992, lng: 10.00678}} mapId={MAP_ID} style={{width: '100vw', height: '100vh'}}>
        <InfoWindow position={{lat: 67.54599, lng: 88.03233}}>
           ...
        </InfoWindow>
    </Map>
  </APIProvider>
);

Marker

El componente <Marker> renderiza un marcador en una posición del mapa. Para visualizar un marcador unicamente hay que pasarle la propiedad position con la latitud y longitud de la localización.

Las propiedades del componente <Marker> extienden la interfaz y las posibilidades del Marker del API JavaScript de Google Maps, puedes consultarlo aquí. Además permite añadir diferentes event listeners.

import {APIProvider, Map, MapControl, Marker} from '@vis.gl/react-google-maps';

export const App = () => (
  <APIProvider apiKey={API_KEY}>
    <Map zoom={10} center={{lat: 53.54992, lng: 10.00678}} mapId={MAP_ID} style={{width: '100vw', height: '100vh'}}>
        <Marker position={{lat: 67.54599, lng: 88.03233}}/>
    </Map>
  </APIProvider>
);

Advanced Marker

Por defecto, el componente <AdvancedMarker> renderiza el típico pin rojo del maps. Pero mediante este componente, podemos customizar ese marcador o bien mediante el componente <Pin> o creando otro marker mediante html/css soportando imágenes, svgs, animaciones…

El componente <AdvancedMarker> soporta la mayoría de las opciones de AdvancedMarkerElementOptions .

Otras propiedades interesantes son:

  • title : Provee un texto accesible al marcador
  • collisionBehavior : Define como se van a comportar cuando dos marcadores colisionan.

Además el hook useAdvancedMarkerRef el cual simplifica la conexión entre el marcador y el InfoWindow .

En este ejemplo sustituimos el marcador por defecto por este emoji 📍:

import {AdvancedMarker, APIProvider, Map, MapControl} from '@vis.gl/react-google-maps';

export const App = () => (
  <APIProvider apiKey={API_KEY}>
    <Map zoom={10} center={{lat: 53.54992, lng: 10.00678}} mapId={MAP_ID} style={{width: '100vw', height: '100vh'}}>
        <AdvancedMarker position={{lat: 67.54599, lng: 88.03233}}>
        📍
        </AdvancedMarker>
    </Map>
  </APIProvider>
);

Pin

Como hemos mencionado antes, el componente <Pin> sirve para customizar la apariencia del marcador por defecto.

Las propiedades de este componente sigue la interfaz del API JavaScript de Google Maps PinElementOptions .

import {AdvancedMarker, APIProvider, Pin, Map, MapControl} from '@vis.gl/react-google-maps';

export const App = () => (
  <APIProvider apiKey={API_KEY}>
    <Map zoom={10} center={{lat: 53.54992, lng: 10.00678}} mapId={MAP_ID} style={{width: '100vw', height: '100vh'}}>
        <AdvancedMarker position={{lat: 67.54599, lng: 88.03233}}>
            <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
    </Map>
  </APIProvider>
);

Hooks

La librería react-google-maps también proporciona algunos hooks que nos facilitan el trabajo con los mapas.

  • useMap : Este hook se utiliza para acceder a la instancia del mapa dentro del APIProvider .
  • useMapsLibrary : Este hook se utiliza para acceder a las diferentes librerías de del API JavaScript de Google Maps.
  • useApiIsLoaded : Este hook nos proporciona información sobre si el API ha terminado de cargar.
  • useApiLoadingStatus : Este hook nos proporciona el estado actual de la carga del API.

Conclusión

En este tutorial hemos abordado los principales componentes y utilidades que nos proporciona la librería react-google-maps . Por su supuesto está librería tiene un potencial enorme así que te animo a que la pruebes para desarrollar tus ideas.

Muchas gracias por llegar hasta aquí, espero te que te haya sido útil 😊.

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad