React-Google-Maps: Marker resizes after zooming

Viewed 1730

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.

How it looks after the map is loaded and the marker is set

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>
    )
1 Answers

I had the exact same problem and the easiest way I found to resolve this was to define the width and height of the svg on the file itself, on the svg tag: <svg width="00" height="00">.

Related