Questions tagged [react-google-maps-api]
93 questions
0
votes
1 answer
React-google-maps not displaying props
I am trying to display a simple Circle on the map using the Circle prop. It works perfectly fine on one computer using chrome however it will not display on the map when on another computer using the same browser.
The circle only displays after I…

Estevan
- 3
- 2
0
votes
1 answer
Why `options` is render every time using react-google-maps/api
Hello i have a google map in react and i think that the options parameter in GoogleMap is render every time.
I have this code

The_elevator
- 75
- 1
- 8
0
votes
1 answer
Making React component only rerendering conditionally
I have a website which tracks devices on a map. For that I use Google Map react api. My problem is that the Map component gets rerendered too many times for no reason, even when its props don't change.
I read this is why people use React Memo and I…

Bence Hargitai
- 15
- 4
0
votes
0 answers
How to prevent re-render GoogleMap API when state changes?
I have used Google Map API from '@react-google-map/api' & the problem is that map was re-rendered when its center point changes by state update. Then, how do I solve this ..?
When I update the center of the map to be change in the redux state, the…
0
votes
1 answer
InvalidKey (google maps api ) in deployment
I have used from @react-google-maps/api. Everything was working on my localhost, but now when I deployed it on Vercel I get an error that my key is invalid. I have already put the key in Environment Variable.
Exact error in console: Google Maps…

zorz
- 11
- 3
0
votes
0 answers
How to send google map rendered on Node backend to React frontend?
I want to embed a map into a React website without exposing my Google Maps JavaScript API key to users.
I'm using the 'react-google-maps-api' library (v2.18.1) as a wrapper around the Google Maps JavaScript SDK.
To create the map, you need to pass…

woody
- 1
- 1
0
votes
1 answer
React google maps api - DirectionsRenderer isnt removed from the map
The main idea is im showing several routes on a map,
for each route i render a

Adri
- 127
- 4
- 10
0
votes
0 answers
React-google-maps/api Cant see heatmap layer
react-google-maps/api does not showing HeatMap? In the console i have this error :
caught (in promise) TypeError: b.lat is not a function
at Gjb (visualization_impl.js:11:220)
at visualization_impl.js:10:39
at _.Oi.forEach…

tripy
- 1
0
votes
1 answer
Show InfoBox/InfoWindow on the streetView with react-google-maps-api
In this code sandbox, I have some markers with InfoBox nested in the marker that is shown on click.
How can I also show that InfoBox when switching into the StreetView mode?
// The imports
import { GoogleMap, InfoBox, Marker, OverlayView,…

Amir-Mousavi
- 4,273
- 12
- 70
- 123
0
votes
0 answers
State Management conflict with @react-google-maps/api
I'm using Autocomplete from @react-google-maps/api and I'm running into state management conflicts with React. I'm wondering what I'm doing wrong of if it's a bug on the library itself.
My code:
const Component = () => {
...

Felipe César
- 1,234
- 2
- 16
- 34
0
votes
0 answers
Cannot read properties of null (reading 'setCenter')
I am using react-google-maps-api. Before that approach I tried to use a state to change center but google maps didn't see the initial state. Then I found this approach below on github.
const [map, setMap] = React.useState(null)
useEffect(() => {
…

gro0wy
- 11
- 1
0
votes
1 answer
Showing markers on Google Maps (React)
I'm having trouble showing markers on my app.
I am trying to show markers using @react-google-maps/api for each property that a user owns. The map is rendering but markers are not appearing on the map for some reason.
When I console.log(markers) in…

sbasken
- 1
0
votes
0 answers
Create React App - Content Security Policy blocking Google Maps API
I am using Create React App and the Google Maps API (react-google-maps-api). The map component is not working due to Content Security Policy related errors.
I have done a few things to try and resolve the issue:
Set INLINE_RUNTIME_CHUNK=false in…

ardea
- 1
0
votes
2 answers
How to dynamically change icon on react-google-maps?
I would like that when clicked on a table, the icon on the map would be updated to another color. But the same does not happen. I don't know how to "refresh" the icon
import { GoogleMap, InfoWindow, useJsApiLoader, MarkerF } from…

Cristian Melo
- 1
- 3
0
votes
1 answer
useGoogleMap inside Next JS
Does anyone use useGoogleMap() inside NEXT JS component? It gives Unhandled Runtime Error Invariant Violation: useGoogleMap needs a GoogleMap available up in the tree error. I just need to refer to map of google Map inside Next JS.

sam
- 23
- 5