How to add an InfoWindow to my markers in google-maps-react?

Question

I try to add InfoWindows to the markers of my map (using google-maps-react) but it doesn't work and I don't understand why. The state receives the longitude and latitude data.

const InfoPage = ({data}) => {
    const [selectedElement, setSelectedElement] = useState(null)
 
    return (
    <div className="mapcontainer">
        <Map 
          google={google}
          initialCenter={
          {
            lat: 48.856614,
            lng: 2.3522219
          }
          } 
          zoom={12}>
        {data.map((element, index) => {
          return (
          <Marker 
          title={element.fields.nom} 
          position={{
           lat : element.fields.geo_point_2d[0],
           lng: element.fields.geo_point_2d[1]}} 
          onClick={()=>{setSelectedElement(element)}}
          />
          )})}
        {selectedElement ? (
           <InfoWindow
            position={{
            lat : selectedElement.fields.geo_point_2d[0],
            lng: selectedElement.fields.geo_point_2d[1]}} 
            onCloseClick={()=>{setSelectedElement(null)}}
            >
            <div>
              <h1>info</h1>
            </div>
            </InfoWindow>) : null }
       </Map>
    </div>
    );
}

Answer 1

Since you will be clicking the Marker for the InfoWindow to show, you can use the InfoWindow's marker parameter instead of position parameter. You also need to use the InfoWindow's visible parameter and set it to true for it to show. You can check this simple code how I did it(I just used data from json file). Code snippet below:

import React, { useState } from "react";
import { Map, GoogleApiWrapper, Marker, InfoWindow } from "google-maps-react";

import data from "./data.json";

const InfoPage = () => {
  const [selectedElement, setSelectedElement] = useState(null);
  const [activeMarker, setActiveMarker] = useState(null);
  const [showInfoWindow, setInfoWindowFlag] = useState(true);

  return (
    <div className="mapcontainer">
      <Map
        google={google}
        initialCenter={{
          lat: 39.952584,
          lng: -75.165221
        }}
        zoom={8}
      >
        {data.map((element, index) => {
          return (
            <Marker
              key={index}
              title={element.name}
              position={{
                lat: element.lat,
                lng: element.lng
              }}
              onClick={(props, marker) => {
                setSelectedElement(element);
                setActiveMarker(marker);
              }}
            />
          );
        })}
        {selectedElement ? (
          <InfoWindow
            visible={showInfoWindow}
            marker={activeMarker}
            onCloseClick={() => {
              setSelectedElement(null);
            }}
          >
            <div>
              <h1>{selectedElement.name}</h1>
            </div>
          </InfoWindow>
        ) : null}
      </Map>
    </div>
  );
};