CODEWITHSUNDEEP
javascriptreactjs
Miqez
Miqez

Reputation: 173

React-google-maps warnings

I've started recently to learn React and I want to build a React App with Google Maps API so I downloaded React-google-maps package but its documentation is outdated. I have this sample code. Console logs error:

  1. process.env.ENV is not defined, assuming 'prod' env
  2. Accessing PropTypes via the main React package is deprecated
  3. Accessing createClass via the main React package is deprecated.

TL:DR How to fix this code

import React from "react";
import ReactDOM from "react-dom";
import { 
  withGoogleMap,
  GoogleMap,
  Marker,
  InfoWindow, 
} from "react-google-maps";

const MapInit = withGoogleMap(props => (
  <GoogleMap
    ref={props.onMapLoad}
    defaultZoom={1}
    defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
  >
  </GoogleMap>
));
class MapContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      markers: [
        {}
      ],
    };
    this.handleMapLoad = this.handleMapLoad.bind(this);
  }
  handleMapLoad(map) {
    this._mapComponent = map;
  }
  render() {
    return (
      <div style={{height: `100%`}}>
        <MapInit
          containerElement={
            <div style={{ height: `100%` }} />
          }
          mapElement={
            <div style={{ height: `100%` }} />
          }
          onMapLoad={this.handleMapLoad}
        />
      </div>
    );
  }
}

export default MapContainer;

Upvotes: 1

Views: 1608

Answers (3)

thirtydot
thirtydot

Reputation: 228302

https://github.com/tomchentw/react-google-maps

Versions

  • For React >= 15.5, use next tag on npm
  • For React < 15.5, use latest tag on npm

You need to update to v7.0.0 of react-google-maps to get rid of the deprecation warnings.

You might want to consider using google-map-react instead, which has more community activity and looks to be of higher quality.

Upvotes: 2

hrushilok
hrushilok

Reputation: 455

For second warning use https://www.npmjs.com/package/prop-types.

like import PropTypes from 'prop-types';

and for third use https://www.npmjs.com/package/create-react-class

Upvotes: 0

CharlieBrown
CharlieBrown

Reputation: 4163

Those are generated by the library which is probably not updated to use class instead of createClass and is importing PropTypes from React.

You can verify this by browsing to your node_modules and checking the source code. It's a little annoying but there's nothing you can do, apart from sending a pull request to fix it yourself. :)

Upvotes: 3

Related Questions