Map stuck at "Loading Map

[Bytegardener]

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

export class MapContainer extends Component { render() { const style = { width: "100%", height: "100%", }; return ( <Map google={this.props.google} initialCenter={{ lat: 40.854885, lng: -88.081807, }} zoom={15} style={style} /> ); } }

export default GoogleApiWrapper({ apiKey:"GoogleJavascriptAPIkey" })(MapContainer);

[Bytegardener]

Any help is appreciated - map is stuck on "Loading map..." I have double checked the API to ensure it is correct.

[kirstenrauffer]

+1 to this issue, does anyone have a resolution for this?

[pnutz]

I ran into this issue when I was only importing the component MapContainer like so (AutoImport fail): import { MapContainer } from "./MapContainer"; The GoogleApiWrapper is not hooking up to the MapContainer in this case.

This was solved when I changed it to: import MapContainer from "./MapContainer";

[saikrishh123]

I ran into this issue when I was only importing the component MapContainer like so (AutoImport fail): import { MapContainer } from "./MapContainer"; The GoogleApiWrapper is not hooking up to the MapContainer in this case.

This was solved when I changed it to: import MapContainer from "./MapContainer";

Thanks. It worked like a miracle after I wasted almost an hour thinking what's wrong with my code.

[NodeJoSe]

It is not a miracle, the problem is that you are trying to importthe MapContainer, it should not even have the export.

You have to import this:

 export default GoogleApiWrapper({
     apiKey:"GoogleJavascriptAPIkey"
 })(MapContainer);

And thats what happening when you remove the brackets like this import MapContainer from "./MapContainer";, you are importing the GoogleApiWrapper(.... but changing its name to MapContainer.

You should remove the export from the MapContainer class to avoid confusions, as its only being used by the GoogleApiWrapper HOC.

[hashirshoaeb]

@NodeJoSe Can you explain it more? like what will happen if i do this?

const GoogleMap = GoogleApiWrapper({
  apiKey: process.env.REACT_APP_API_KEY,
  LoadingContainer: LoadingContainer,
})(MapContainer);

and

import { GoogleMap } from "./components/Map";

why this gives error?

[NodeJoSe]

@NodeJoSe Can you explain it more? like what will happen if i do this?

const GoogleMap = GoogleApiWrapper({
  apiKey: process.env.REACT_APP_API_KEY,
  LoadingContainer: LoadingContainer,
})(MapContainer);

and

import { GoogleMap } from "./components/Map";

why this gives error?

Pls provide me the complete class code:

You have to export the GoogleMap in order to import it, try this:

export const GoogleMap = GoogleApiWrapper({
    apiKey: process.env.REACT_APP_API_KEY,
    LoadingContainer: LoadingContainer,
})(MapContainer);

[hashirshoaeb]

@NodeJoSe Following are the complete code classes Map.jsx file

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

// ...

const style = {
  width: "100%",
  height: "100%",
};
const containerStyle = {
  position: "relative",
  width: "100%",
  height: "100%",
};
class MapContainer extends Component {
  render() {
    return (
      <Map
        google={this.props.google}
        style={style}
        initialCenter={{
          lat: 40.854885,
          lng: -88.081807,
        }}
        zoom={15}
        onClick={this.onMapClicked}
      ></Map>
    );
  }
}

const LoadingContainer = (props) => <div>Fancy loading container!</div>;

const GoogleMap = GoogleApiWrapper({
  apiKey: process.env.REACT_APP_API_KEY,
  LoadingContainer: LoadingContainer,
})(MapContainer);

export default GoogleMap;

App.js file

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import "./App.css";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap.bundle.min";
import Login from "./components/Login";
import Dashboard from "./components/Dashboard";
import Register from "./components/Register";
import { GoogleMap } from "./components/Map";

function App() {
  return (
    <BrowserRouter basename={process.env.PUBLIC_URL + "/"}>
      <div>
        <Route path="/" exact component={Login} />
        <Route path="/dashboard" component={GoogleMap} />
        <Route path="/add" component={Register} />
      </div>
    </BrowserRouter>
  );
}

export default App;

Error

Failed to compile.

./src/App.js
Attempted import error: 'GoogleMap' is not exported from './components/Map'.

well if i use the code below, then it works fine.

import GoogleMap from "./components/Map";

And Sorry for the extra code lines. :)

[NodeJoSe]

@NodeJoSe Following are the complete code classes Map.jsx file

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

// ...

const style = {
  width: "100%",
  height: "100%",
};
const containerStyle = {
  position: "relative",
  width: "100%",
  height: "100%",
};
class MapContainer extends Component {
  render() {
    return (
      <Map
        google={this.props.google}
        style={style}
        initialCenter={{
          lat: 40.854885,
          lng: -88.081807,
        }}
        zoom={15}
        onClick={this.onMapClicked}
      ></Map>
    );
  }
}

const LoadingContainer = (props) => <div>Fancy loading container!</div>;

const GoogleMap = GoogleApiWrapper({
  apiKey: process.env.REACT_APP_API_KEY,
  LoadingContainer: LoadingContainer,
})(MapContainer);

export default GoogleMap;

App.js file

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import "./App.css";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap.bundle.min";
import Login from "./components/Login";
import Dashboard from "./components/Dashboard";
import Register from "./components/Register";
import { GoogleMap } from "./components/Map";

function App() {
  return (
    <BrowserRouter basename={process.env.PUBLIC_URL + "/"}>
      <div>
        <Route path="/" exact component={Login} />
        <Route path="/dashboard" component={GoogleMap} />
        <Route path="/add" component={Register} />
      </div>
    </BrowserRouter>
  );
}

export default App;

Error

Failed to compile.

./src/App.js
Attempted import error: 'GoogleMap' is not exported from './components/Map'.

well if i use the code below, then it works fine.

import GoogleMap from "./components/Map";

And Sorry for the extra code lines. :)

If you use export default you have to import without the brackets.

To import with brackets { GoogleMap } you have to use named export, example below:

// named export
export GoogleMap;

[tigranmk]

Any help is appreciated - map is stuck on "Loading map..." I have double checked the API to ensure it is correct.

MapContainer = GoogleApiWrapper({
apiKey:"GoogleJavascriptAPIkey"
})(MapContainer);

you need export only MapContainer

[Vijayan-Murugan]

I have faced same problem. used to overcome that issue try below I have mentioned.

import {MapComponent} from 'src/components/map/MapComponent';

to

import MapComponent from 'src/components/map/MapComponent';

my problem has solved.