𝐉𝐚𝐢𝐦𝐞 𝐁𝐚𝐥𝐭𝐨𝐝𝐚𝐧𝐨
Posted on May 31, 2020
Buscando en internet un ejemplo de uso de la API de google maps con React; pude encontrar varios ejemplos pero ninguno por medio de hooks.
Es por eso que en este ejemplo, quiero compartir un ejemplo del uso del paquete google-maps-react y react hooks.
Esta aplicacion usara la API de google maps y tambien la API para saber la ubicacion de Estacion Espacional Internacional (ISS)
Estructura de Archivos
Version de React
El uso de Hooks es implemento en React 16.8, asi que se necesita de una version igual o superior a esta, para poder ejecutar este ejemplo.
1. Crear la app
yarn create-react-app isstracker
2. Instalar dependencias
yarn add google-maps-react
yarn add axios
3. Crear carpetas
Crear la carpeta para los state components
Crear carpeta Src\Containers
Crear la carpeta para los presentational components
Crear carpeta Src\Components
4. Agregar archivos
Crear archivo MapContainer.js dentro de la carpeta Src\Components
Crear archivo IssTracker.js dentro de la carpeta Src\Containers
5. High Order Component
Como ejemplo adicional, hare uso de High Order Components, para eso creare una carpeta Src\Hoc
Y en esa carpeta creare un archivo HocAux.js
En este momento, ya se debe tener la estructura de archivos necesaria para poder iniciar a desarrollar el ejemplo.
Desarrollo de APP
1. Creacion de High Order Component
Para este ejemplo, el HOC contendra lo siguiente:
const HocAux = props => props.children;
export default HocAux
2. Archivo IssTracker.js
En este archivo importo los hooks useState y useEffect
import React, {useState, useEffect} from 'react'
En el archivo IssTracker en la carpeta (Src\Containers), coloco los imports de Axios para poder obtener la informacion posicionamiento de la Estacion Espacial Internacional (Iss Tracker API)
import Axios from 'axios';
Creo la funcion
const IssTracker = () => {
}
export default IssTracker;
Dentro de la funcion coloco el uso de Hook useState
const IssTracker = () => {
const [ trackerState, setTrackerState ]= useState({
issInfo:{velocity:'', latitude:'', longitude:''},
error: false,
});
el Hook useState, es una funcion que regresa dos valores: un objeto que contiene la informacion y una funcion que permite modificar la informacion.
Ya se tiene el objeto que guardara la informacion que deseo del API con la informacion de ISS. Ahora hay que obtener la informacion de API y guardarla.
Para eso hago uso del Hook useEffect, y coloco la funcion despues de haber creado el objeto trackerState
useEffect(() => {
setTimeout(() => {
Axios.get("https://api.wheretheiss.at/v1/satellites/25544.json")
.then(response => {
setTrackerState({
issInfo:{velocity:response.data.velocity, latitude:response.data.latitude, longitude:response.data.longitude},
error: false,
})
})
.catch(error => {
setTrackerState({
issInfo:{velocity:'', latitude:'', longitude:''},
error: false,
})
})
}, 1000);
});
La informacion se estara obteniendo cada segundo.
Despues se debe agregar el return de la funcion, por el momento sera un div vacio
return(
<div></div>
)
3. Archivo App.js
Importo el component IssTracker
import IssTracker from './Containers/IssTracker'
Se presenta el elemento resultante
function App() {
return (
<div className="App">
<IssTracker></IssTracker>
</div>
);
}
4. Archivo MapContainer.js
En este archivo importo los componentes que usare de google-maps-react
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
Tambien importo el HOC
import HocAux from '../hoc/HocAux';
Creo el un Style para que se muestre el mapa en pantalla completa
const mapStyles = {
width: '100%',
height: '100%',
};
Creo la funcion que presentara el mapa en pantalla
const MapContainer = props => {
}
Como dice la documentacion del paquete Google-Maps-React , debo colocar el export de esta manera
export default GoogleApiWrapper({
apiKey: ("YOUR_GOOGLE_API_KEY")
})(MapContainer)
El contenido de la funcion MapContainer es asi
const MapContainer = props => {
let iconMarker = new window.google.maps.MarkerImage(
"https://img.icons8.com/color/48/000000/satellite.png",
null,
null,
null,
new window.google.maps.Size(32, 32)
);
let mapTrack = ((props.latitude !== "") ?
<Map google={props.google} zoom={5} style={mapStyles} initialCenter={{ lat: props.latitude, lng: props.longitude }} >
<Marker position={{ lat: props.latitude, lng: props.longitude }}
icon={iconMarker}
/>
</Map> : null)
return (
<Aux>
{mapTrack}
</Aux>
);
};
5. Archivo IssTracker.js
Importo el componente MapContainer
import MapContainer from '../Components/MapContainer'
este es el return del archivo IssTracker
return (
<MapContainer velocity= {trackerState.issInfo.velocity} latitude= {trackerState.issInfo.latitude} longitude= {trackerState.issInfo.longitude}/>
)
6. Pruebo la ejecucion
yarn start -watch
Posted on May 31, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.