Como usar Google Maps API y React Hooks

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