React Google Maps
¿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 ”
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
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.
Ahora en nuestro App.js Importamos el componente Maps para poder utilizarlo. Import {Maps} from “./Components/Maps”
Y llegó el problema:
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.
Una vez en nuestro proyecto de Cloud Platform debemos ir al desplegable de APIs y servicios y a su vez dirigirnos a credenciales
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
Tras unos segundos nos mostrará nuestra nueva Clave Api lista para ser utilizada
Ahora es momento de volver a Visual Studio y terminar nuestro mapa.
Añadimos la nueva clave y probamos.
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:
Hola!
He seguido tus pasos y obtengo el siguiente error
«Uncaught Error: You must include a `google` prop
Gracias!