React Google Maps - Marker positions are not binding dynamically

Question

class Map extends Component
{
  constructor(props)
  {
    super(props)
    this.state = {
      listHouse:[{"_id":"5aaa4cb5dab4f51645d3e257","location":{"lat":"32.7020541","lng":"-97.2755012","__typename":"locationType"},"__typename":"rentType"},{"_id":"5aa8c86b0815090a6610f7d9","location":{"lat":"32.5872886","lng":"-97.0258724","__typename":"locationType"},"__typename":"rentType"},{"_id":"5aa8c9230815090a6610f7da","location":{"lat":"35.2962839","lng":"-98.2031782","__typename":"locationType"},"__typename":"rentType"}]
    }
  }


render()
 {
    return (
          <GoogleMap
            defaultZoom={10}
            defaultCenter={{ lat: 32.6804468, lng: -97.0827933 }}
          >
          {
            (this.state.listHouse && this.state.listHouse.length > 0)?
            (
              this.state.listHouse.map((house,key) =>{
                console.log("house details..." +JSON.stringify(house))
                  return(<Marker position={{ lat: house.location.lat, lng:house.location.lng}}
                  />

                )

                })

            ):(null)

          }
          </GoogleMap>
      );
     }

When I am trying to bind the lat and lng dynamically from a state, I am getting an error like this index.js:2177 InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number, These dynamic values are not assigned to the Marker position in return statement

Goutham Goutham · Accepted Answer · 2018-03-23T06:16:56

Try this .. Some objects values from Apollo may be unreadable, so copy those values to another object and try.

{
            (this.state.listHouse && this.state.listHouse.length > 0)?
            (
              this.state.listHouse.map((house,key) =>{
                console.log("house details..." +JSON.stringify(house))
                  let houseObject = Object.assign({},house);
                  return(<Marker position={{ lat: houseObject.location.lat, houseObject.location.lng}}
                  />

                )

                })

            ):(null)

          }

React Google Maps - Marker positions are not binding dynamically

2 Answers