I was following a tutorial on how to add google maps to a react/expo javascript project. I am new to the javascript language and have had a bug that I cannot find an answer to. when compiling the app I am given the error “TypeError: Object(…) is not a function“. here is the link to the tutorial: https://www.youtube.com/watch?v=WZcxJGmLbSo&t. Thank you.
The error is on the line 25 of the script:
JavaScript
x
8
1
22 |
2
23 |
3
24 | }
4
> 25 | export default function App() {
5
26 | const {isLoaded, LoadError} = UseLoadScript({
6
27 | googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
7
28 | libraries,```
8
Full script:
JavaScript
1
44
44
1
import React from 'react';
2
3
import {
4
GoogleMap,
5
UseLoadScript,
6
Marker,
7
InfoWindow,
8
9
} from "@react-google-maps/api";
10
11
const libraries = ["places"];
12
const mapContainerStyle = {
13
width: "100vw",
14
height: "100vh",
15
16
};
17
18
const center = {
19
lat: 43.653225,
20
lng: -79.383186
21
22
23
}
24
export default function App() {
25
const {isLoaded, LoadError} = UseLoadScript({
26
googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
27
libraries,
28
});
29
30
31
if (LoadError) return "Error Loading maps";
32
if (!isLoaded) return "Loading Maps";
33
34
return <div>
35
36
<GoogleMap>
37
mapContainerStyle={mapContainerStyle}
38
zoom={8}
39
center={center}
40
</GoogleMap>
41
</div>
42
43
}
44
Advertisement
Answer
I think your import
(UseLoadScript) is wrong. Check here once useLoadScript
JavaScript
1
2
1
import { useLoadScript } from '@react-google-maps/api';
2