Map marker moves when zooming in and out with google-map-react

Question

I am adding a map with a marker marking a fixed location in my React app, all works fine, but if I zoom out, the marker moves around and goes further to the right of where it should do.

import GoogleMapReact from 'google-map-react';
import { Icon } from '@iconify/react'
import locationIcon from '@iconify/icons-mdi/map-marker'
import './map.css'

interface Props {
  location: {
    address: string,
    lng: number,
    lat: number
  }
}

  const LocationPin = ({ address }: Props["location"]) => (
    <div className="pin">
      <Icon icon={locationIcon} className="pin-icon" style={{ fontSize: '60px' }} />
      <p className="pin-text">{address}</p>
    </div>
  )

export default function SimpleMap(){
  const defaultProps = {
    center: {
      lat: 53.5050,
      lng: -2.0300
    },
    zoom: 12
  };


  return (
    // Important! Always set the container height explicitly
    <div style={{ height: '90vh', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: `${process.env.REACT_APP_GOOGLE_API_KEY}`
              }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
        
      >
      <LocationPin
        lat={defaultProps.center.lat}
        lng={defaultProps.center.lng}
        address='Stamford golf club'
      />
      </GoogleMapReact>
      
    </div>
  );
}

The css class on the pin is just setting it's size. I have tried removing the css file to see if this made a difference but it doesnt.

Answer 1

For me, the issue was that For some reason, the marker object was rendered so that its top left corner is fixed at the specified location. This is different from the convention that the bottom middle of the marker is fixed at the location. The result is that when you zoom out, all the marker corners seems to change location on the map except for the top left corner. Solved it by adding :

style={{
  width: "50px",
  height: "50px",
  position: "relative",
  top: "-50px",
  left: "-25px",
}}

to my marker JSX to make it's bottom middle fixed instead