Integración de Google Maps en el mapa de checkout

2022

##💡 Alternativa: LEAFLET https://react-leaflet.js.org/docs/start-installation/

npm install react-leaflet

src/components/Map.jsx

import React from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import Icon from '../assets/marker.png'
// import { Icon } from 'leaflet'
import '../styles/Map.css';

const position = [51.505, -0.09]

const ChartMap = () => {
    return (
        <MapContainer center={position} zoom={13}>
            <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Marker position={position} >
                <Popup icon={Icon}>
                    A pretty CSS3 popup. <br /> Easily customizable.
                </Popup>

            </Marker>
        </MapContainer>

    );
};
export default ChartMap;

src/styles/Map.css

.leaflet-container {
    width: 100%;
    height: 500px;
  }

src/public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin="" />
    <title>Document</title>
</head>
<div id="app"></div>

<body>

</body>

</html>

Irungaray Agustin

https://platzi.com/comentario/2065862/

Si todavía no están usando variables de entorno, en este comentario de un par de clases atrás explico como hacerlo:

No es para nada dificil, y es una buena práctica ocultar estos datos aunque sean solo de sandbox.

Bruno Kamiche

npm install @react-google-maps/api --save```

Simón Ottoniel González Acosta

Implementacion con react-leaflet
Espero que les sea de ayuda 😄

Map.jsx

import React from 'react';
import { MapContainer, Marker, TileLayer } from 'react-leaflet';
import '../styles/components/Map.css';


const Map = () => {
  const defaultCenter = [19.4267261, -99.1718706]

  return (
    <MapContainer center={defaultCenter} zoom={17} scrollWheelZoom={false}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={defaultCenter} />
    </MapContainer>
  );
}

export default Map;

Map.css

.leaflet-container {
    width: 100%;
    height: 400px;
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Platzi Conf Merch</title>
  <link
    rel="stylesheet"
    href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""
  />
  <script src="https://kit.fontawesome.com/473d269aa9.js" crossorigin="anonymous"></script>

</head>

<body>
  <div id="app"></div>
</body>

</html>

jose zuñiga

https://react-leaflet.js.org/docs/start-installation

leaflet Alternativa gratuita

Para integrarlo a su proyecto sigan el siguiente paso a paso.

Instalación de dependencias

npm i -D leaflet react-leaflet

Crear un componente Map para nuestro componente.

import React from 'react;

const Map = ()=>{

}
 export default Map;

Incluir los componentes desde la libreria leaflet

import React from 'react';
import { MapContainer, TileLayer, Marker } from 'react-leaflet';

const Map = () => {
  return (
    <div className='leaflet-container'>
      <link
        rel="stylesheet"
        href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin=""
      />

      <MapContainer center={[51.505, -0.09]} zoom={16} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
          <i className="fa-solid fa-location-dot"></i>
        </Marker>
      </MapContainer> 
    </div>
  );
}
export default Map;

Requiere que su contenedor tenga definida la altura del objeto en este caso usamos la clase leaglet-container puedes definir una hoja de estilos propia para tu componente mapa o definiría en el estilo de la ventana Success.css. En mi caso cree una hoja de estilos Map.css

//Map.css
.leaflet-container {
  width: 100%;
  height: 50vh;
  overflow: hidden;
  margin: 0 auto;
}

La librería requiere importar su hoja de estilos propia lo puedes hacer mediante un link sin embargo en mi caso provoco fallas. Tambien lo puedes hacer llamando la hoja de estilos directamente en tu componente.

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""
/>

<MapContainer > Este componente es el contenedor del mapa. Requiere algunos Props:

center={[51.505, -0.09]} Establece el punto donde queremos ver el mapa
zoom={16} Es el acercamiento inicial del mapa
scrollWheelZoom={false} Habilita o des habilita la posibilidad de hacer zoom mediante el mouse.

<TileLayer> Esta libreria se basa en imagenes mediante este componente podemos traer dichas imagenes y damos los derechos de autor a los creadores.
<Marker> Nos permite crear un icono por facilidad le pase como children un icono tomado desde fontawesome. Si lo vas a usar recuerda llamar la libreria de fontawesome en tu documento html.
- position={[51.505, -0.09]} Tambien requiere la posición del marcador intenta que coincida con la posición central del mapa para evitar confusiones.
```
<Marker position={[51.505, -0.09]}>
  <i className="fa-solid fa-location-dot"></i>
</Marker>
```

Angel Batlles

Han modificado el componente “@react-google-maps/api”

Ahora trabaja así:

<code>
const Map = (props: Props) => {
    const { isLoaded } = useJsApiLoader({
        id: 'google-map-script',
        googleMapsApiKey: "---"
      })
    const mapStyles={
        height:"50vh",
        with:"100%",    
    }
    const defaultCenter={
lat:19.4268,
lng:-99.17
    }
    const [map, setMap] = React.useState(null)

    const onLoad = React.useCallback(function callback(map) {
      const bounds = new window.google.maps.LatLngBounds();
      map.fitBounds(bounds);
      setMap(map)
    }, [])
    const onUnmount = React.useCallback(function callback(map) {
        setMap(null)
      }, [])
      return isLoaded ? (
        <GoogleMap
          mapContainerStyle={mapStyles}
          center={defaultCenter}
          zoom={10}
          onLoad={onLoad}
          onUnmount={onUnmount}
        >
          { /* Child components, such as markers, info windows, etc. */ }
          <></>
        </GoogleMap>
    ) : <></>
}
</code>

Vicente Alberto Benavides Alcivar

Confirmo que a la fecha de este comentario sigue funcionando tal como dijo el profesor sin ninguna modificación extra. Salu2

Irungaray Agustin

Si todavía no están usando variables de entorno, en este comentario de un par de clases atrás explico como hacerlo:

No es para nada dificil, y es una buena práctica ocultar estos datos aunque sean solo de sandbox.

David Espino

En 2022 la dependencia recomendada en la documentación de google maps es @googlemaps/react-wrapper

npm i @googlemaps/react-wrapper

Luis Alejandro Vera Hernandez

Muy buena la clase, aunque creo que hubiera sido mejor si desde el principio usabamos la informacion que necesitabamos directamente desde la documentacion y la usabamos en el proyecto y no solo seguir las instrucciones del profe.
.
Igual manera se entendió, pero creo que se puede mejorar

Ramiro Godoy

Si tienen problemas para instalar el paquete de @react-google-maps api:

npm i -S @react-google-maps/api

prueben el comando así:

npm install @react-google-maps/api --save --legacy-peer-deps

Y con esto corre sin problemas

Christian Boffill

Para que les salga el nombre del comprador en la página de success:

{`${buyer[0].name}, gracias por tu compra`}

Si hacer solo eso no funciona, tienen que arreglar el objeto que se guarda en como buyer en la pagina de payment:

const newOrder = {
				buyer: buyer,
				product: cart,
				payment: data,
			}

Kevin Parra

No funciona con la versión de react 2022 al momento.

Kike Vanegas

{name}, Gracias por tu compra
No necesitamos encapsular todo en el template literal. Con las llaves, en JSX podemos integrar un valores dinámicos con estáticos.

Reinaldo Omar Mendoza Leal

Me encanta cuando pasan errores, así se aprende a debuggear, la solución no es tan importante sino la forma de encontrarla

Gonzalo Pimentel

https://www.npmjs.com/package/@react-google-maps/api

Me funcionó sin problemas! Lo único que tuve un problema al querer instalar el paquete pero me funcionó con el comando:

Naldo Duran