Como usar Google Maps API y React Hooks

jaimebaltodano_

𝐉𝐚𝐢𝐦𝐞 𝐁𝐚𝐥𝐭𝐨𝐝𝐚𝐧𝐨

Posted on May 31, 2020

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
Enter fullscreen mode Exit fullscreen mode

2. Archivo IssTracker.js

En este archivo importo los hooks useState y useEffect

import React, {useState, useEffect} from 'react'
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

Creo la funcion

const IssTracker = () => {
}
export default IssTracker;
Enter fullscreen mode Exit fullscreen mode

Dentro de la funcion coloco el uso de Hook useState

const IssTracker = () => {
  const [ trackerState, setTrackerState ]= useState({
    issInfo:{velocity:'', latitude:'', longitude:''},
    error: false,
  });
Enter fullscreen mode Exit fullscreen mode

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);
  });
Enter fullscreen mode Exit fullscreen mode

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>
)
Enter fullscreen mode Exit fullscreen mode

3. Archivo App.js

Importo el component IssTracker

import IssTracker from './Containers/IssTracker'
Enter fullscreen mode Exit fullscreen mode

Se presenta el elemento resultante

function App() {
  return (
    <div className="App">
      <IssTracker></IssTracker>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

4. Archivo MapContainer.js

En este archivo importo los componentes que usare de google-maps-react

import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
Enter fullscreen mode Exit fullscreen mode

Tambien importo el HOC

import HocAux from '../hoc/HocAux';
Enter fullscreen mode Exit fullscreen mode

Creo el un Style para que se muestre el mapa en pantalla completa

const mapStyles = {
    width: '100%',
    height: '100%',
};
Enter fullscreen mode Exit fullscreen mode

Creo la funcion que presentara el mapa en pantalla

const MapContainer = props => {
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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>
    );
};
Enter fullscreen mode Exit fullscreen mode

5. Archivo IssTracker.js

Importo el componente MapContainer

import MapContainer from '../Components/MapContainer'
Enter fullscreen mode Exit fullscreen mode

este es el return del archivo IssTracker

  return (
    <MapContainer velocity= {trackerState.issInfo.velocity} latitude= {trackerState.issInfo.latitude} longitude= {trackerState.issInfo.longitude}/>
  )
Enter fullscreen mode Exit fullscreen mode

6. Pruebo la ejecucion

yarn start -watch
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related