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)

Please make a https://codesandbox.io/

https://github.com/fullstackreact/google-maps-react#issues

Hi AneudysOrtiz,

You need to explicitly give it the lat and lng values. Just replace

<Marker position={this.state.position} name={'Current location'} />

with

<Marker position={{ lat: this.state.position.lat, lng: this.state.position.lng }} name={'Current location'} />

Hope this helps!

Thanks It worked!

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

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.

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

not working, tried with the {{ lat: this.state.position.lat, lng: this.state.position.lng }} but no luck. Any alternative?

@rmpt yes it doesn't work for me as well

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?

@HMehmood1 way didn't work for me but this did. Hope it helps you, i was desperate to find a solution.