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…
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.
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?
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.…
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…
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, }), }));
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.
1
2 3 4 5 6 7