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)