Como usar Google Maps API y React Hooks
Tags: react, googlemap, hooks
Published: 2020-05-31 23:29:48

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:
```javascript
const HocAux = props => props.children;
export default HocAux
```
### 2. Archivo IssTracker.js
En este archivo importo los hooks **useState** y **useEffect**
```javascript
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)
```javascript
import Axios from 'axios';
```
Creo la funcion
```javascript
const IssTracker = () => {
}
export default IssTracker;
```
Dentro de la funcion coloco el uso de *Hook* *useState* 
```javascript
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*
```javascript
  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
```javascript
return(
<div></div>
)
```
### 3. Archivo App.js
Importo el component IssTracker
```javascript
import IssTracker from './Containers/IssTracker'
```
Se presenta el elemento resultante
```javascript
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*
```javascript
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
```
Tambien importo el **HOC**
```javascript
import HocAux from '../hoc/HocAux';
```
Creo el un *Style* para que se muestre el mapa en pantalla completa
```javascript
const mapStyles = {
	width: '100%',
	height: '100%',
};
```
Creo la funcion que presentara el mapa en pantalla
```javascript
const MapContainer = props => {
}
```
Como dice la documentacion del paquete *Google-Maps-React* , debo colocar el export de esta manera
```javascript
export default GoogleApiWrapper({
	apiKey: ("YOUR_GOOGLE_API_KEY")
})(MapContainer)
```
El contenido de la funcion *MapContainer* es asi
```javascript
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
```javascript
import MapContainer from '../Components/MapContainer'
```
este es el return del archivo *IssTracker* 
```javascript
  return (
    <MapContainer velocity= {trackerState.issInfo.velocity} latitude= {trackerState.issInfo.latitude} longitude= {trackerState.issInfo.longitude}/>
  )
```
### 6. Pruebo la ejecucion
```javascript
yarn start -watch
```