change position of custom marker on google-map-react

Question

I am using google-map-react for my React project and I created custom markers.

The markers are rendered at the right location but from the top left corner:

The red dot is where the exact location is. However, I'd like the tail of the pin to be at that place. How can I do that ?

Here are my Map and my Marker components:

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import MapMarker from './MapMarker';

class MapBlock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedMarker: null
    };
  }

  static defaultProps = {
    center: {
      lat: 50.6304916,
      lng: 3.0526526
    },
    zoom: 14
  };

  render() {
    return (
      // Important! Always set the container height explicitly
      <div style={{ flex: '0 0 35rem', height: '100vh', position: 'sticky', top: '0'}}>
        <div className="" style={{ height: '100%', width: '100%', position: 'absolute', top: '0px', left: '0px' }}>
          <GoogleMapReact
            bootstrapURLKeys={{ key: "" }}
            defaultCenter={this.props.center}
            defaultZoom={this.props.zoom}
          >
            {this.props.meals.map(m => {
              return (
                <MapMarker
                  lat={m.restaurant.latitude}
                  lng={m.restaurant.longitude}
                  key={m.restaurant.id}
                  meal={m}
                  hoveredRestaurant={this.props.hoveredRestaurant}
                />
              )
            })}
          </GoogleMapReact>
        </div>
      </div>
    );
  }
}

export default MapBlock;

Marker component:

import React from 'react';
import ForkTKM from '../static/images/marker_fork_orange_border_3mm.svg';

class MapMarker extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
        <img src={ForkTKM}
              height= "30rem"
              width= "20rem"
              alt="map marker"
        />
    </div>
    )
  }
}

export default MapMarker;

Answer 1

Just got it: It's all about styling.

So all I had to do is to add: style={{position: 'absolute', transform: 'translate(-50%, -100%)'}}

to the Marker.

If you read this and has the same issue, you just need to change the values of translate to adapt it to your own marker.