I am using google maps API with React. I am worried that I am not using react-google-maps properly. I got the map working fine but when I tried to use the Directions Service I got an error:
Unexpected Application Error!
google is not defined
I am importing the library using this:
import { APIProvider, Map, Marker, useMarkerRef } from '@vis.gl/react-google-maps';
Using Directions Service:
const directionsService = new google.maps.DirectionsService();
To fix the google is undefined error I used the script import. Now I don’t know if I’m using 2 libraries in the project and I’m wondering if I need to use the script import if @vis.gl/react-google-maps is imported.
Script import from index.html:
<!doctype html>
<html lang="en">
<head>
<script src="https://maps.google.com/maps/api/js?key=key" type="text/javascript"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
App.tsx
import { APIProvider, Map, Marker, useMarkerRef } from '@vis.gl/react-google-maps';
function App() {
const directionsService = new google.maps.DirectionsService();
return (
<>
<APIProvider apiKey={API_KEY}>
<Map>
</Map>
</APIProvider>
</>
)
}
package.json
"dependencies": {
"@vis.gl/react-google-maps": "^1.4.0",
...
}
New contributor
Lelstz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.