react-google-maps location pin is stuck at wrong place

Question

I have a react-google-maps instance in my application which draws multiple location icons on google map. When there are more than one icons, sometimes, one icon, which have different location, gets stuck on another icon. The new icon is not clickable and gets removed automatically after giving a little nudge to the map (see image below)
IMO, the issue is with the google map's drawing multiple location icons. Any idea, how can I fix this?

Here's how I am setting state when the component mounts

this.state = this.convertEntityStructureToComponentState(props.entities, props.hideInfoInitially, props.showDirections);

convertEntityStructureToComponentState() function looks like this:

convertEntityStructureToComponentState(entities, hideInfoInitially, showDirections=false) {
if (!entities || entities.length === 0) {
  // send seattle longitude and latitude and set markers as null
  const center =  {
    lat: 47.602743,
    lng: -122.330626
  };

  return {
    center: center,
    markers: []
  };
}

const markers = [];
let firstEntityReadings = null;
let destinationPosition = null;
let selectedEntityPosition = null;
let showPathLine = true;


for (let i = 0; i < entities.length; i++) {
  if (entities[i].location) {
    if (!firstEntityReadings) {
      firstEntityReadings = {
        lat: entities[i].location.lat,
        lng: entities[i].location.lng
      };
    }

    let showLocation = true;

    if (entities[i].type === 'customer') {
      destinationPosition = i;
    } else {
      if (this.isTimeInOnlineRange(entities[i].time)) {
        selectedEntityPosition = i;
      } else if (this.props.customerView) {
        showLocation = false;
        showPathLine = false;
      }
    }

    if (showLocation) {
      markers.push({
        position: new google.maps.LatLng(entities[i].location.lat, entities[i].location.lng),
        showInfo: false,
        data: {
          name: entities[i].name,
          address: entities[i].address,
          id: entities[i].id,
          time: entities[i].time,
          color: entities[i].type === 'customer' ? entities[i].color : '#ccc',
          type: entities[i].type,
          image_path: entities[i].image_path
        }
      });
    }
  }
}

//Optimize where we get previous location and don't call direction if it's the same
if (showDirections && destinationPosition != null && selectedEntityPosition != null && showPathLine) {
  const DirectionsService = new google.maps.DirectionsService();
  DirectionsService.route({
    origin: new google.maps.LatLng(entities[selectedEntityPosition].location.lat, entities[selectedEntityPosition].location.lng),
    destination: new google.maps.LatLng(entities[destinationPosition].location.lat, entities[destinationPosition].location.lng),
    travelMode: google.maps.TravelMode.DRIVING,
  }, (result, status) => {
    if (status === google.maps.DirectionsStatus.OK) {
      this.setState({
        directions: result
      });
    }
  });
} else {
  this.setState({
    directions: null
  });
}

return {
  center: firstEntityReadings,
  markers: markers
};

}

Link to Github issue: https://github.com/tomchentw/react-google-maps/issues/805
Link to the gist of location map component: https://gist.github.com/arximughal/f91b7a922a4711e25ef82ed9ac6427b5

We are no clairvoyants. Please share the relevant parts of your code so we can make an educated guess of what could be the problem. — trixn, Mar 19 '18 at 09:54
It's very hard to understand your code as it's pretty much a long spagetti of nested `if`s. Still the relevant part of how you render your google map is missing. Did you try to log `this.state.markers` in your render method and see if it contains the expected elements during multiple renders? — trixn, Mar 19 '18 at 10:30
I have logged `this.state.markers` and it contains exactly three map pins, as it is supposed to. But the one that's visible here and gets removed by a little nudge, is not in the state. It's sort of a shadow of the third map pin which is somewhere in USA on the map. — Muhammad Arslan Aslam, Mar 19 '18 at 10:49
@trixn I have update the question with the gist of full component that renders the map. It's messy but I hope it will give you the whole picture! — Muhammad Arslan Aslam, Mar 19 '18 at 10:53

score 0 · Accepted Answer · answered Mar 22 '18 at 07:14

0

The issue was with the key and ref of the markers that I was drawing on the map. Generating a random ID for key fixed the issue properly.

answered Mar 22 '18 at 07:14

Muhammad Arslan Aslam

69
1
11

react-google-maps location pin is stuck at wrong place

1 Answers1