¿Cómo utilizar Google Maps en React?

Como ya es sabido por todos Google Maps es un servidor de aplicaciones de mapas en la web con infinitas posibilidades de uso, En este tutorial vamos a mostraros la manera más sencilla de tener un componente React capaz de mostrar un mapa de Google Maps con las cordenadas deseadas, muy útil para empresas y desarrolladores que deseen agregarlo sus proyectos.

Tutorial.

Lo primero que debemos hacer es instalar Node.js https://nodejs.org y comprobar su versión con el comando “ node -v “ una vez hecho esto comprobamos la versión de yarn para poder lanzar nuestro proyecto en local con el comando “ yarn -v ” si hambos nos devuelven la versión es el momento de crear nuestro proyecto react con el comando “ npx create-react-app mi-aplicacion ”

Ahora le toca el turno a las dependencias, “ npm install –save simple-react-google-maps ” ,aquí es donde se encuentra nuestro mapa y también añadiremos Bootstrap para el diseño “ yarn add react-bootstrap bootstrap ”.

Con esto último ya hemos terminado las instalaciones en este punto debemos lanzar el servidor “ yarn start ”

React

Una vez visualizado esto es momento de abrir nuestro editor de código en mi caso Visual Studio y comenzar con la parte de código.

Crearemos una carpeta Components y dentro de ella un nuevo componente Maps.js, no es necesario llamarlo así, pero va a ser la forma más fácil de identificarlo cuando tengamos más componentes.

En este componente haremos los siguientes imports:

import React, { Component } from «react»; import GoogleMaps from «simple-react-google-maps». Y exportaremos la clase Maps para poder pintar después en el App.jsen el App.js

Maps.js

Ya estamos listos para insertar el código de nuestro mapa el cual procederá de la dependencia instalada anteriormente  simple-react-google-maps.

Primer paso; crear una etiqueta <GoogleMaps />

Segundo paso sobre ella añadir los siguientes atributos:

apiKey: Es un autentificador único para identificar a un usuario, o lo que es lo mismo, es una clave que nos proporciona Google para poder utilizar su API (en este caso gratuita) pero con una política de uso restrictiva; si vas a hacer uso profesional de ella te recomiendo que leas atentamente la política de uso.

Mas adelante te explicare como conseguir tu clave.

Style: Aquí fijaremos un un alto y un ancho para nuestro mapa

Zoom: Es un valor numérico el cual nos indica lo cerca o lejos que mostrará el mapa de las coordenadas centrales que le pasemos.

Center: Son las coordenadas centrales, están compuestas por lat: latitud y lng: longitud. Estas coordenadas son el centro sobre el cual se va a situar el mapa al renderizarse por primera vez.

Markers: Son los puntos marcados sobre el mapa; se representan de la misma forma que el center: Lat y Lng con una diferencia, en este caso podremos pasarle tantos pares de coordenadas como queramos. Por cada par de coordenadas tendremos un puntero en el mapa.

El código ha de quedar parecido a este.

Maps.js

Ahora en nuestro App.js Importamos el componente Maps para poder utilizarlo. Import {Maps} from “./Components/Maps”

Y llegó el problema:

Error
Error en consola

Como recordaras mas arriba te he dicho que te explicaría como obtener tu apiKey de Google Maps  sin apiKey esto no https://cloud.google.com/console/google/maps-apis/overviewfunciona para conseguirla deber dirigirte a Google Cloud Platform y registrarte (es gratuito) https://cloud.google.com/console/google/maps-apis/overview

Una vez registrados y en la consola de Google Cloud Platform

Deberás crear un nuevo proyecto o seleccionar uno existente.

Google Cloud Platform
Google Cloud Platform

Una vez en nuestro proyecto de Cloud Platform  debemos ir al desplegable de APIs y servicios y a su vez dirigirnos a credenciales

Google Cloud Platform

Veremos que a la izquierda del titulo Credenciales  aparecerá la opción de crear credenciales y el tipo de credencial que deseamos crear en este caso clave API

Google Cloud Platform

Tras unos segundos nos mostrará nuestra nueva Clave Api lista para ser utilizada

Google Cloud Platform

Ahora es momento de volver a Visual Studio y terminar nuestro mapa.

Maps.js

Añadimos la nueva clave y probamos.

Resultado final

Y con esto ya tendríamos listo nuestro sencillo componente Maps con uno o varios puntos marcados ideal para mostrar a nuestros clientes donde se encuentra nuestro negocio.

Recuerda que si vas a hacer un uso intensivo de este tipo de servicios API debes estar atento a las políticas de uso, puesto que dependiendo del uso que se hagan con ellos, pueden conllevar costes.

Espero que os sirva de ayuda!

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin.

Autor: Ignacio Caballero Ruiz

Centro: Tajamar

Año académico: 2019-2020.

Código / recursos utilizados / Otros datos de interés:

https://github.com/Donignacio91/PostReact

http://www.linkedin.com/in/ignacio-caballero-ruiz

This Post Has One Comment

  1. SSM Reply

    Hola!
    He seguido tus pasos y obtengo el siguiente error
    «Uncaught Error: You must include a `google` prop

    Gracias!

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.