2

Estoy haciendo un mapa con react, donde hay un marker por provincia. Yo quiero al hacer hover en el marker, que aparezca un pequeño div con el nombre de la provincia. Lo implementé con uno y funcionaba. Ahora cuando quiero renderizar todos los markers, si paso el mouse por encima de uno, veo los 23 divs correspondientes a todos los markers, y yo solo quiero ver el que corresponde. Deberia crear 23 estados para cada cartel?

import React, { useState } from 'react'
import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
import { Marker, InfoWindow } from '@react-google-maps/api';


const containerStyle = {
  width: '90%',
  height: '100%'
};

const center = {
  lat: -34.6037,
  lng: -58.3816
};

function MyComponent() {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: "xxxxxxxx"
  })


  const [info, setInfo] = useState(false)


  const ubicaciones = [
    { lat: -34.920345, lng: -57.969559, name: "La Plata" },
    { lat: -26.8753965086829, lng: -54.6516966230371, name: "Misiones" },
    { lat: -33.7577257449137, lng: -66.0281298195836, name: "San Luis" },
    { lat: -30.8653679979618, lng: -68.8894908486844, name: "San Juan" },
    { lat: -32.0588735436448, lng: -59.2014475514635, name: "Entre Ríos" },
    { lat: -48.8154851827063, lng: -69.9557621671973, name: "Santa Cruz" },
    { lat: -40.4057957178801, lng: -67.229329893694, name: "Río Negro" },
    { lat: -43.7886233529878, lng: -68.5267593943345, name: "Chubut" },
    { lat: -32.142932663607, lng: -63.8017532741662, name: "Córdoba" },
    { lat: -34.6298873058957, lng: -68.5831228183798, name: "Mendoza" },
    { lat: -29.685776298315, lng: -67.1817359694432, name: "La Rioja" },
    { lat: -27.3358332810217, lng: -66.9476824299928, name: "Catamarca" },
    { lat: -37.1315537735949, lng: -65.4466546606951, name: "La Pampa" },
    { lat: -27.7824116550944, lng: -63.2523866568588, name: "Santiago Del Estero" },
    { lat: -28.7743047046407, lng: -57.8012191977913, name: "Corrientes" },
    { lat: -30.7069271588117, lng: -60.9498369430241, name: "Santa Fe" },
    { lat: -26.9478001830786, lng: -65.3647579441481, name: "Tucumán" },
    { lat: -38.6417575824599, lng: -70.1185705180601, name: "Neuquén" },
    { lat: -24.2991344492002, lng: -64.8144629600627, name: "Salta" },
    { lat: -26.3864309061226, lng: -60.7658307438603, name: "Chaco" },
    { lat: -24.894972594871, lng: -59.9324405800872, name: "Formosa" },
    { lat: -23.3200784211351, lng: -65.7642522180337, name: "Jujuy" },
    { lat: -34.6144934119689, lng: -58.4458563545429, name: "CABA" },
    { lat: -82.52151781221, lng: -50.7427486049785, name: "Tierra Del Fuego" }]






  const handleMouseOver = e => {
    setInfo(true)
  };

  const handleMouseExit = e => {
    setInfo(false)
  };

  const icon = {
    path:
      "M8 12l-4.7023 2.4721.898-5.236L.3916 5.5279l5.2574-.764L8 0l2.3511 4.764 5.2574.7639-3.8043 3.7082.898 5.236z",
    fillColor: "green",
    fillOpacity: 0.9,
    scale: 1.3,
    strokeColor: "black",
    strokeWeight: 1,
  }

  const divStyle = {
    background: `white`,
    border: `1px solid #ccc`,
    padding: 15,
    outline: 'none'
  }


  return isLoaded ? (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={center}
      zoom={4}
    >
      { /* Child components, such as markers, info windows, etc. */
        <div>
          {ubicaciones.map((e) =>
            <Marker
              position={e}
              icon={icon}
              onMouseOver={handleMouseOver}
              onMouseOut={handleMouseExit}
            > {info && (
              <InfoWindow>
                <div style={divStyle}>
                  <span>Estamos en {e.name}</span>
                </div>

              </InfoWindow>
            )}</Marker>)}
        </div>
      }
      <></>

    </GoogleMap>
  ) : <></>
}

export default React.memo(MyComponent)

1 respuesta 1

2

No deberías crear 23 estados, existen dos formas de realizar esto. La primera, más sencilla reutilizando prácticamente todo el código es guardar en el estado el nombre de la ubicación a mostrar y solo mostrar el info que tenga ese nombre:

const handleMouseOver = (e, name) => {
   setInfo(name)
};
....
{ubicaciones.map((e) =>
    <Marker
      position={e}
      icon={icon}
      onMouseOver={evt => handleMouseOver(evt,e.name)}
      onMouseOut={handleMouseExit}
    > {info === e.name && (
         <InfoWindow>
            <div style={divStyle}>
               <span>Estamos en {e.name}</span>
            </div>
         </InfoWindow>
        )}
    </Marker>
)}

La otra forma es tener un solo componente InfoWindow y que cambien sus props para ponerlo en una posición del mapa o otra, esto se consigue haciendo que el estado info guarde las coordenadas que serán props del InfoWindow.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.