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 (…stanc

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

tomchentw: API DATA

my own : API DATA sample image

My Codes:

{ => (

      position={{ lat: marker.store_lat, lng: marker.store_long }}

 componentDidMount() {

        .then(response => {


Tomchentw Codes:

{ => (

      position={{ lat: marker.latitude, lng: marker.longitude }}

      .then(res => res.json())
      .then(data => {
        this.setState({ markers: });

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