React-Google-Maps: Marker resizes after zooming

Question

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 (ie 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>
    )

Answer 1

我有完全相同的问题，我发现解决这个问题的最简单方法是在svg标签上定义文件本身svg的宽度和高度： <svg width="00" height="00"> 。