Questions tagged [react-google-maps-api]
93 questions
6
votes
2 answers
How to add custom ico or SVG as marker icon in @react-google-maps/api
I am using @react-google-maps/api to show Google Map in my React Web application. Following their documentation I have added the marker as follows.

Lenzman
- 1,177
- 18
- 30
3
votes
1 answer
react-google-maps-api documentation is not accessible
when I tried to access the documentation , giving below error
404 not found
I cleared all my cache still giving same error.
There no other documentation avaialable.
https://react-google-maps-api-docs.netlify.app/ :- this is documentation…

krish patil
- 31
- 1
3
votes
2 answers
Cannot clear route from DirectionRenderer ReactJS with @react-google-maps.api
I'm trying to make a simple routing with google API and @react-google-api library, I success to show route between 2 points, but when I try to remove the route, the route cannot be removed, here's my code :
const calculateRoute = async () => {
…

Rokkie
- 75
- 4
3
votes
0 answers
Google Map is not recognized as a vector map on some browsers
I have built and deployed a next.js app that displays a map with the help of @react-google-maps/api . Furthermore, I'm using the Google maps "data driven" API to create a feature layer that displays postal code boundaries.
I've deployed this to…
3
votes
2 answers
Trying to animate markers movement with react-google-maps smoothly
I'm trying to animate my google maps markers like this...
Example of markers animated movement
And i tried to replicate this code into react (using, @react-google-maps/api), but couldn't make it work, i'm having multiple problems, number one, would…

Diego
- 421
- 3
- 9
- 34
2
votes
1 answer
How to attach a text to React Google Maps Api Polyline
In this code sample, I want to show the distance attribute on top of the PolyLine with an offset of 45% (almost next to the arrow). But I was not successful in achieving that.

Amir-Mousavi
- 4,273
- 12
- 70
- 123
2
votes
0 answers
React Google Maps Street View Panorama onCloseclick not firing
I'm using the StreetViewPanorama from react-google-maps/api. It comes with an onCloseclick prop that accepts a callback that supposedly fires when the close button is clicked. However, it is not firing whatever I do. Any advice?

Michi Plays
- 66
- 4
2
votes
1 answer
When I try to dispatch I have the error "map.dispatchEvent is not a function"
I create several points on the map (google maps api JS) and it works perfectly, my problem is when I try to place a point with the same coordinates as an existing point. I can get the coordinates of that point, but I need a new point to be created.…

Fábio Baptista
- 33
- 5
2
votes
1 answer
How to render a Drawing manager in a Map or a polygon using "@react-google-maps/api"
I've been trying to render a Map using @react-google-maps/api": "^2.12.1 in my react-hook-form": "^7.33.1. The requirement was to show the map onClick of the input, and the user should draw a polygon on the Map using Drawing Manager.
This is my…

Mahijendra
- 335
- 5
- 15
2
votes
0 answers
React - Autocomplete Google Map isn't caught by formik in TextField Material UI
I have a problem with Autocomplete from @react-google-maps/api
I use for formik to catch info but when i try to catch text in my TextField autocompleted by the , i only catch the text i wrote
Exemple : I want to search…

cgarrot
- 21
- 2
2
votes
0 answers
How to mock useJsApiLoader from @react-google-maps/api
How can I mock useJsApiLoader? I'm trying the following:
jest.mock("@react-google-maps/api", () => ({
useJsApiLoader: () => ({
isLoaded: true,
loadError: undefined,
}),
}));

Rafael Hernandez
- 51
- 3
2
votes
0 answers
react-google-maps/api update paths onDrag and on edit
I have a map setup in my react app, which users will use to draw and save areas. The users will make the polygon initially by clicking points on the map, and then fine tune and position it using the built-in editable and draggable props. I can set…

Nick
- 85
- 8
2
votes
1 answer
how to re-center react-google-maps on adding marker
I'm using @react-google-maps/api to show a few markers in a map.
I want to add another marker on button click, and when the marker has been added, I want the map to be centered so it shows all the markers. According to this, this is what I…

U. Watt
- 533
- 1
- 5
- 27
2
votes
5 answers
React Google Maps API (ReferenceError: google is not defined)
I'm using react-google-maps/api node module. I need to set the value of zoomControlOptions is TOP_LEFT but I ended up getting this error Uncaught ReferenceError: google is not defined. Here is the link to the repo.
I'm getting the error here
const…

Bablu Ahmed
- 4,412
- 5
- 49
- 64
1
vote
2 answers
Need to change markers from circle to icon in react-google-charts GeoChart
I am using react-google-charts library for my personal project and found there is a way to display markers on the map.

Chrismono Himawan
- 35
- 5