Warning: `NaN` is an invalid value for the `left` css style property. Check the render method of `GoogleMapMarkers`.

Hi all,

I’m using google-map-react library for my project and but I keep getting an error in my browser saying that Warning: NaN is an invalid value for the left css style property. Check the render method of GoogleMapMarkers. Plus, my map does not even get rendered even though there is specific height and width for it.

My code looks like googleMap.js

import React from 'react';
import GoogleMap from 'google-map-react';

import Cart from './cart';

export default (props) => {
  return (
    <GoogleMap
    defaultCenter={[props.lat, props.lng]}
    defaultZoom={12}
    >
      <Cart lat={props.lat} lng={props.lng}/>
    </GoogleMap>
  );
}

cart.js

import React from 'react';

export default () => {
  return (
    <i className="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>
  );
}

and a method that using google map component

renderMap() {
    if (this.props.loc) {
      return (
        <GoogleMap lat={this.props.loc.lat} lng={this.props.loc.lng}/>
      );
    } else {
      return <h4>Loading map...</h4>
    }
  }

Has anyone had this kind of issue or know how to solve it?

Thank you all for your time reading this and works.

[AgustinCB]

I had this error recently and then realized that I was putting my latitude in lng and longitude in lat. Try switching them 😃

[callamwilliams]

If you are returning data from the places API (searchbox, autocomplete) make sure you call the lat/lng as functions rather than objects

<Marker
  key={place.id}
  text={place.name}
  lat={place.geometry.location.lat()}
  lng={place.geometry.location.lng()}
/>

Otherwise you are passing a function rather than a number - so NaN error

Try testing it manually with proper numbers, and double check the values you are passing via props.