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…
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…
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,…
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 = () => { ...
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…
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…
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…
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