CODEWITHSUNDEEP
javascriptreactjsapigoogle-mapsreact-props
Luisa Silva
Luisa Silva

Reputation: 159

Google-Maps-React: Problems passing props to App.js

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>
        );
    }
}

Upvotes: 1

Views: 1255

Answers (1)

Babak Yaghoobi
Babak Yaghoobi

Reputation: 1985

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

Upvotes: 1

Related Questions