I am using "react-google-maps" https://github.com/tomchentw/react-google-maps in my React project.
To illustrate my problem please find below two pictures. The first one shows how the map looks right after loading, the second one shows how it looks after zooming.
Clearly this is not what I want.
However, I have no idea what is causing this. The same effect (i.e. cut off icon) is observable when using size instead of scaledSize. This is how I instantiate my map and Marker:
const MapInit = withGoogleMap(props => (
<GoogleMap
ref={props.onMapLoad}
defaultZoom={13}
defaultCenter={{ lat: 48.150884140293215, lng: 11.593923568725586 }}
>
<Marker
{...props.marker}
/>
</GoogleMap>
));
And this is my render method.
render () {
const loc = this.props.eventLocation
const marker = {
// position: new google.maps.LatLng(loc.latitude,loc.longitude),
position: new google.maps.LatLng(loc.latitude,loc.longitude),
icon: {
url: icon_url(this.props.markerIcon,'purple'),
scaledSize: new google.maps.Size(40, 64),
origin: new google.maps.Point(0,0)
}
}
return (
<Row>
<Col xs={12}>
<div className='map__aspect-ratio'>
<div className='map__content'>
<MapInit
containerElement={
<div style={{ 'height': `100%` }} />
}
mapElement={
<div style={{ 'height': `100%` }} />
}
onMapLoad={this.handleMapLoad}
marker={marker}
/>
</div>
</div>
</Col>
</Row>
)

