Google-Maps-React：将道具传递给 App.js 的问题

Question

I'm working on a website and I'd like to use google maps API via Google-Maps-React package. I've tested it before, as a single application, and I successfully manage to get data back from the API and render it on screen. Now I'm trying to use it on my actual project and it is not working. I imagine that the issue might be that I'm not passing props properly from a component to another.

Any suggestions on how to fix this issue would be very much appreciated. Thank you very much!

Here are my two components and the message I'm getting on the console (Webpack compiled successfully) :

index.js:139 Uncaught Error: You must include a google prop at new Map (index.js:139)

Venue.js holds the actual map

import { Map, GoogleApiWrapper, Marker } from "google-maps-react";

const mapStyles = {
    width: '100%',
    heigth: '100%',
};

export class MapContainer extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            venues: [
                { lat: 52.471015, lng: 12.719707 }
            ]
        }
    }

    displayMarkers = () => {
        return this.state.venues.map((venue, index) => {
          return <Marker key={index} id={index} position={{
            lat: venue.latitude,
            lng: venue.longitude
          }}
          onClick={() => console.log(this.state.venues)} />
        })
      }

      render() {
        return (
          <Map
           google={this.props.google}
           zoom={8}
           style={mapStyles}
           initialCenter={{ lat: 52.471015, lng: 12.719707 }}
          >
            {this.displayMarkers()}

          </Map>
        );
      }
    }


export default GoogleApiWrapper({
    apiKey:''
  })(MapContainer);

App.js

import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
import Main from "./main";
import MapContainer from "google-maps-react";


export class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            error: false,
        };        
    }

    componentDidMount() {
        console.log("App mounted");

    }

    render() {
        return (
            <BrowserRouter>
                <div>
                    <Route exact path="/" component={Main} />
                    <Route exact path="/venue" component={MapContainer} />
                </div>
            </BrowserRouter>
        );
    }
}

Answer 1

Because your import MapContainer path is incorrect !

in your App.js file change :

import MapContainer from "google-maps-react";

to your MapContainer component like :

import MapContainer from "./components/Venue.js";

simple demo : HERE