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;