Marker with Modal do not works

[nautilor]

Hello,

I have created a custom component to show a marker then when pressed opens a Modal;

here's the code

<RouteModal 
	key={key} lat={lat} lng={lng} width={50}
	color={rock.color} name={name} />

the modal works fine but the marker is placed on the top left corner of the webapp (check screenshot)

by doing some checking i've seen that the lat and lng are passed correctly to the component but when rendered they somehow get lost as i don't see no transform property in the style when running the inspector.

am I missing something?

[baldulin]

Hey, I think the issue is that you don't add the Marker Component as a direct child of Map. All direct Child components of Map are cloned here and will receive a left and right property. Those properties are used in the Marker Component here to create the transform css attribute.

As you don't have the option to make the Marker a direct child of Map you have to pass the "cloned" attributes manually. Simplest way I guess is the following:

const RouteModel = (props) => {
    const [modal, setModal] = useState(false);

    return (
        <>
            <Marker onClick={() => setModal(!modal)} {...props} />
            {(modal) && (
                <Modal
                    isOpen={modal}
                    onRequestClose={() => setModal(!modal)}
                    ariaHideApp={false}
                >
                    <h2>{props.name}</h2>
                    <p>{props.name}</p>
                    <button onClick={toggleModal}>Close</button>
                </Modal>
            )}
        </>
    );
}

Note though for this to work you have to pass lat, lng the "pigeon" way as an array to a prop anchor, so this is nothing but a small wrapper around the Marker component.

[mariarivm30]

I have the same problem , could you solved?

[chasoft]

You need to put <Marker /> directly inside <Map>

So, following is valid

<Map>
     <Marker ... />
</Map>

This is also valid

<Map>
     {makersList.map(marker => ( <Marker ... />  ))}
</Map>

Following is invalid

const CustomMarker = () => (
    <Marker ... />
)
.....
<Map>
     <CustomMarker ... />
</Map>