HELP! Marker is not updating position.

Hello, I’m trying to place the marker wherever I click on the map. I’m saving the current position in the state and passing it to the Marker component as props so It should change position when the state changes.

This is how I’m implementing it. But the marker doesn’t change position. BTW I’m using TSX. Hope you can help me.

import * as React from 'react';
import { Map, Marker, GoogleApiWrapper } from 'google-maps-react';

interface IMapState {
    position: LatLng;
}

interface LatLng {
    lat: number;
    lng: number;
}

export class Mapa extends React.Component<{}, IMapState>{

    constructor(props) {
        super(props);
        this.state = {
            position: { lat: 18.486278764986732, lng: 69.92786525735443 }
        }
        this.onMapClicked = this.onMapClicked.bind(this);
    }

    onMapClicked(props, map, e) {
        let location = this.state.position;
        location.lat = e.latLng.lat();
        location.lng = e.latLng.lng();

        this.setState({
            position: location
        })
        console.log(this.state.position);
    }

    render() {
        return (
            <Map google={(window as any).google} zoom={14} className={'map'} initialCenter={this.state.position} onClick={this.onMapClicked}>
                <Marker position={this.state.position} name={'Current location'} />
            </Map>
        )
    }
}

export default GoogleApiWrapper({
    apiKey: ('AIzaSyDJKV1bs7RogqpcMvvSuSLTDPB19lPR5dI')
})(Mapa)

[roshanmaind]

on changing the lat-long(within the state) of maker changing its position but it refreshes all the markers on the app and it is not efficient. can anyone tell me whats the right way to change the position.

Same here! I am updating my marker’s position by updating the state variable every 500 ms. But every time we update the position prop of the marker component, the marker re-renders. Meaning that the original marker get removed and then a new marker is rendered on the new position. This causes a “blinking”/“flickering” effect when the change in the position of the marker is too small or zero.

Here’s an example.

Can anyone please help with this so that the marker doesn’t entirely re-render but simply moves to the new location?

[lieldulev]

Wow this is a life saver. Someone should add this to the docs, thanks @HMehmood1 !