Fix markers / pin showing in a different position when zooming out

[flaviobvds]

If you're having the issue of the marker showing in a different position when zooming out (this issue happens even on the live example of this library), here's a solution to your problem:

JSX:

import { MdLocationPin } from "react-icons/md";

const Marker = () => {
    return (
        <div className={styles.pinContainer}>
            <MdLocationPin
                color={"red"}
                size="50"
            />
        </div>
    )
}

CSS (or in my case, SCSS):

.pinContainer {
    position: relative;
    left: 0;
    top: 0;
    transform: translateX(-50%) translateY(-100%);
    cursor: pointer;
}

If you are using a marker designed by yourself, such as an image, you could style that directly, but since I'm importing it from react-icons I decided to put it inside a container and style the container. That styling will make sure that the marker/pin always stays in the correct position, even when zoomed in/out.