Invalid prop `center` supplied to `GoogleMap`. React.js

Question

im trying to intialize google maps using google maps react library and wanted the map to change every time i search for a location based on the latitude and longitude state. However im receving an error saying invalid prop center supplied to google maps react. For some reason It works when i place in a number instead of this.state... Can someone pls help ?

App.js

 import React, { Component } from 'react';
    import axios from "axios";
    import './App.css';
    import PlacesAutocomplete from 'react-places-autocomplete'
    import { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete'
    import UserForm from "./components/UserForm.js";

    import Super from "./components/super.js";


    import MapContainer from './components/Map.js'
    import Map from './components/Map.js';
    import { classnames } from './components/helpers';

    const google = window.google;



    class App extends Component {
     constructor() {
        super();
        this.state = {
          zoom: 13,
          maptype: 'roadmap',
          place_formatted: '',
          place_id: '',
          place_location: '',
          address: '',
          latitude: '37.774929',
          longitude: '-122.419416'

        };
      }

    <div>
    <Map center= {{lat: this.state.latitude, lng: this.state.longitude}}
          />
              <div>

        );
      }
    };

export default App;

Map.js

import React, { Component } from 'react'
import GoogleMapReact from 'google-map-react'
import marker from './marker.png'

import {geolocated} from 'react-geolocated';
const AnyReactComponent = ({ text }) => <div><img src={marker} style={{height:'50px',width:'50px'}}/></div>;
export default class Map extends Component {

  static defaultProps = {

    zoom: 11
  }
render() {
    return (
      <div className='google-map' style={{width: '100%',height: '400px',backgroundColor: 'grey'}}>
        <GoogleMapReact
          center={ this.props.center }
          defaultZoom={ this.props.zoom }>
          <AnyReactComponent
            lat={ this.props.center.lat}
            lng={ this.props.center.lng }
            text={ '' }
          />

        </GoogleMapReact>

      </div>
    )
  }
}

webHasan webHasan · Accepted Answer · 2018-10-22T00:42:04

You should not wrap your latitude and longitude by quote. When you wrap those with quote '' it convert latitude, longitude type number to string. So your latitude, longitude attribute should declare like

latitude: 37.774929,
longitude: -122.419416

instead of

    latitude: '37.774929',
    longitude: '-122.419416'

So your state should be following

        this.state = {
          zoom: 13,
          maptype: 'roadmap',
          place_formatted: '',
          place_id: '',
          place_location: '',
          address: '',
          latitude: 37.774929,
          longitude: -122.419416

        };

Invalid prop `center` supplied to `GoogleMap`. React.js

1 Answers