React google map api integrating inforWindow on click of marker

Question

I am using the react-google-maps/api library. I have an array with 8 locations and I am displaying different custom svg markers on all those locations. Till here all works great. Now I am stuck with the implementation of infoWindow on click of each marker. I tried to go through the documentation but never get get it right though.

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

const MapSearch = React.memo(({latitude, longtitude, locations}) =>{
    const containerStyle = {
        width: '100%',
        height: '100%'
    };

    const center = {
        lat: JSON.parse(latitude),
        lng: JSON.parse(longtitude)
    };

    const options = {
      streetViewControl: false,
      fullscreenControl:false,
      mapTypeControl: false,
      zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP
      }
    }

    const { isLoaded } = useJsApiLoader({
        id: 'google-map-script',
        googleMapsApiKey: config.googleMapsApiKey
    });


    return(
        isLoaded ? (
            <GoogleMap
              mapContainerStyle={containerStyle}
              center={center}
              zoom={8}
              options={options}
            >
              { /* Child components, such as markers, info windows, etc. */ }
              {locations &&
                locations.map((marker, i) => {
                    return <OverlayView
                      position={{lat:marker.latitude, lng:marker.longitude}}
                      mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
                    >
                      <svg className='map-icon' width="44" height="64" viewBox="0 0 44 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                        ---- Path not putting here to avoid code length ----- 
                      </svg>
                    </OverlayView>
                })
              }
            </GoogleMap>
        ) : <></>
    )
});

export default React.memo(MapSearch)

It looks like you need to wire the onclick method for the marker as shown in their example - https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple — nraduka, Jun 09 '22 at 15:56
This might help perhaps: https://stackoverflow.com/questions/48332140/react-google-map-infowindow-showing-all-the-info-when-i-click-on-a-single-mark — David, Jun 10 '22 at 14:50
This might be a bit easier for the start: https://stackoverflow.com/a/64981173/1019850 — David, Jun 10 '22 at 14:53
And this is the most simple solution I found: https://stackoverflow.com/questions/51543660/google-map-api-in-react-how-to-assign-infowindow-for-each-marker — David, Jun 10 '22 at 14:55
BTW: without further reason you never need the `OverlayView`, but it doesn't matter to use it if you get it running. — David, Jun 10 '22 at 15:00

score 1 · Answer 1 · answered Jun 10 '22 at 18:12

Try to use this way

 import { InfoWindow, Marker } from '@react-google-maps/api';
    
    const [infoWindowOpen, setInfoWindowOpen] = useState(false);
    
    const showInfoWindow = () => {
        setInfoWindowOpen(true);
      };

    
    return (
        <Marker
          title='Marker Name'
          position={{lat:marker.latitude, lng:marker.longitude}}
          icon={markerIcon}
          onClick={showInfoWindow}
        >
          {infoWindowOpen && (
            <InfoWindow onCloseClick={() => setInfoWindowOpen(false)}>
              <h1>Hi I am Info Window</h1>
            </InfoWindow>
          )}
        </Marker>
      );

React google map api integrating inforWindow on click of marker

1 Answers1