ReactJS:Google Map (Giving Invalid Value Error)

I currently working on my reference (ReactJS Google Map). and I made this project in ReactJS and laravel.

I don't understand why tomchentw API Json Data is working on my google map, however my own API Json Data giving me error

Hc {message: "not a LatLng or LatLngLiteral: not an Object", name: "InvalidValueError", stack: "Error↵ at new Hc (https://maps.googleapis.com/m…stanc

InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

tomchentw: API DATA https://gist.githubusercontent.com/farrrr/dfda7dd7fccfec5474d3/raw/758852bbc1979f6c4522ab4e92d1c92cba8fb0dc/data.json

my own : API DATA sample image

My Codes:

{props.markers.map(marker => (

    <Marker
      key={marker.id}
      position={{ lat: marker.store_lat, lng: marker.store_long }}
    />
  ))}



 componentDidMount() {

        axios.get('/api/googlemapstore')
        .then(response => {
          this.setState({
              markers: response.data
          })
        })

    }

Tomchentw Codes:

{props.markers.map(marker => (

    <Marker
      key={marker.photo_id}
      position={{ lat: marker.latitude, lng: marker.longitude }}
    />
  ))}


 fetch('https://gist.githubusercontent.com/farrrr/dfda7dd7fccfec5474d3/raw/758852bbc1979f6c4522ab4e92d1c92cba8fb0dc/data.json')
      .then(res => res.json())
      .then(data => {
        this.setState({ markers: data.photos });
      });

1 answer

  • answered 2018-11-08 17:48 seanulus

    It's because the values in your data are strings, not numbers.

    You have:

    'store_lat': '53.628301'
    

    Should be:

    'store_lat': 53.628301