All InfoWindow show/hide (toggle) at once upon one Marker click/selected which are generated from fetched data from an API call.

[ferdous-al-quraeshi]

I just want to achieve toggle show/hide InfoWindow for each generated Marker and also
Can anyone help with this issue?

to note,

• currently, both Marker and InfoWindow are within a single Restaurant component.
• i thought, giving the markers and infowindows unique dynamic key prop will be enough, but it turns out that wasn't true.
• onCloseClick is working just fine as default behavior of the InfoWindow component.
• can't indexify each fetched markers, which i think (not sure) can be the solution to the problem.

import { memo, useState, useEffect, useCallback } from "react";
import { Marker, InfoWindow } from "@react-google-maps/api";


  const [locationData, setLocationData] = useState([]);
  const [isOpen, setIsOpen] = useState(false);
  const onMarkerClick = useCallback(() => {
    setIsOpen(isOpen => !isOpen)
  },[])
  
  
  const getLocationData = (data) => {fetch(FOURSQUARE_API)
    .then(resp => resp.json())
    .then(result => {
      data = result.response.groups[0].items;
      setLocationData(data);
    })
    .catch(e =>
      // Code for handling errors
      console.log(e + ": fetch error ocurred!"));
    }

and, within my component return(), did like this:

{locationData && locationData.map(ld => 
    <Marker
      key={ld.venue.id}
      title={"Toggle InfoWindow on Click"}
      position={{
          lat: ld.venue.location.lat,
          lng: ld.venue.location.lng
        }}
      animation={2}
      onClick={onMarkerClick}
    >
    {/* 
      - now render InfoWindow with each Marker render
    */}
     { isOpen ?
          <InfoWindow
            key={ld.venue.id}
          >
            <div className="restaurant_infowindow">
              <h2>{ld.venue.name}</h2>
              <figure>
                <img src={
                  ld.venue.categories[0].icon.prefix
                  +'bg_88'
                  +ld.venue.categories[0].icon.suffix
                }
                  alt={ld.venue.name} />
              </figure>
              <p><b>Address:</b> {ld.venue.location.address}</p>
              <p><b>Distance from MLBD:</b> {ld.venue.location.distance/1000+'km'}</p>
            </div>
          </InfoWindow> : !isOpen}
    </Marker>
)}

Issue Demo:
https://user-images.githubusercontent.com/13597955/129123955-292b131a-f318-4cac-bcdf-6e79c56ade4f.mp4

[ferdous-al-quraeshi]

I've fixed it 💪

Solution Demo:
https://user-images.githubusercontent.com/25473125/129227979-bb14f254-b53a-4a34-82f3-8c29df14b465.mp4

inspiration: https://www.youtube.com/watch?v=WkREeDy2WQ4 😅

---

Takeaway:

It's difficult to find ways when mind is cluttered like those infowindows! Thinking simple along with a focused mind shows the way.

[doums10]

Hi @ferdous-al-quraeshi do you know how to change the click on a hover event to display the infowindow plz?

[ferdous-al-quraeshi]

Hello, @doums10 !
If the toggle logic is implemented correctly, just try replacing onClick prop to onMouseOver.
That should be enough 👍🏻
Src: React Google Maps Api Style Guide

[doums10]

Hello, @doums10 ! If the toggle logic is implemented correctly, just try replacing onClick prop to onMouseOver. That should be enough 👍🏻 Src: React Google Maps Api Style Guide

Hi @ferdous-al-quraeshi I already tried, the problem is that on the click there is an event that makes a call to an api to get information about the clicked marker and I have more than 1800 markers, it can slow down the page if each time I hover over the marker and a call api is triggered

[ferdous-al-quraeshi]

@doums10
Aha!
In that case, as I did, you can cache the markers in an array upon fetching data from an api and then consume/traverse them on whatever event and at wherever you like. That's a pretty straightforward way of handling performance issue programmatically, u know.

Others way around might be using MarkerClusterer for a better performance ui and ux-wise.