Questions tagged [react-google-maps]

Questions regarding Reactjs component for google maps by tomchentw.

Questions regarding Reactjs component for google maps by tomchentw. https://github.com/tomchentw/react-google-maps.

462 questions
2
votes
1 answer

Not able to render the infoWindow in react-google-maps

I was trying to add an InfoWindow to the mid point of a polyline. This is my code for displaying the infoWindow.
2
votes
1 answer

react-google-maps render markers after user submission

React/Redux newbie here. I have a form input that allows a user to enter a doctor issue. It returns a list of doctors from the server via Redux action, and displays the doctor list and a marker for each doctor's location on the map…
danlauby
  • 45
  • 1
  • 6
2
votes
2 answers

React-Google-Maps: Zoom +/-, Map/Satellite icons not visible

I am not seeing the zoom +/-, Map/Satellite and the Human icon on the map. I am following the steps as specified in the documentation. Is there any specific props I have to pass? Or is there an outstanding issue? Thanks for any help. Here is snippet…
am101
  • 31
  • 2
  • 7
2
votes
1 answer

Reactjs style component with document.getElementById

Hello i'm trying to highlight the Items, with the same Id. Im using document.getElementById but i don't really know ho to do it. does anyone can help me? I'm iterating over an Array of Objects from my Database.... return(
2
votes
0 answers

Target container is not a DOM element with react google maps with markers/infowindow

What I am trying to do: Be able to click a marker and have it show the InfoWindow and then be able to click the marker again to close it or just close the pop up window manually. Also want to be able to open multiple markers at once. What works: I…
2
votes
2 answers

react-google-maps Multiple markers and Info Window

I need to do create a Info Window for each Marker I have in my map. I can see the markers on the map, but when I click over the marker to get the InfoWindow, I get this error TypeError: Cannot read property 'isOpen' of undefined, referencing to…
L.Rencoret
  • 155
  • 2
  • 12
2
votes
1 answer

Reactjs cannot reload Google Maps with new location

I am trying to reload Google Maps with the new inputted location, but it is not reloading. The correct value of lat and lng is being passed back from the SearchBar component and the state is updating correctly. I am new to react-google-maps, so I am…
2
votes
1 answer

react-google-maps merge multiple polygons

I have a list of co-ordinates that I am importing into my google maps and then creating polygons from these, the problem I have is that the polygons overlap each other and the outline of each polygon is clearly visible, I need to find a way to merge…
1
vote
0 answers

How do I change the infoWindow property on Google Maps api in React?

I am a student studying React, and have been using the @react-google-maps/api package. While using Google Maps API, I found something called infoWindowOptions. My goal is to change the UI to make it look good for the user. However, I ran into some…
1
vote
1 answer

TypeScript | Next.js | Google Maps React - infoWindow.close is possibly undefined

I develop a small project in next.js (typescript), which uses the google maps api, with a KmlLayer. I would like my map to interact with my component. It works pretty well so far, when I close my SensorInfo component, my infoWindow is closed, and…
1
vote
0 answers

Ready usePlacesAutocomplete bug with react

I'm struggling with usePlacesAutocomplete in a project. In the code, when I first display the component, 'ready' becomes true and I can get my autosuggestions. However, when I validate the first autosuggestion, change pages, and then return to the…
1
vote
0 answers

How to destroy google map on demand rides and deliveries in React

I was following the documentation to implement google map on demand rides and deliveries solution (ODRD) here. And my Map component in React: const MapComponent = ({ styles }) => { const ref = useRef(null); const tripId = useRef(''); …
1
vote
0 answers

How to make google maps container height fixed

So i'm building a real estate app. in the listings results page i have 2 columns (think fo zillow for example) , 1 for the listings results the other for the google map with each location's pin on it. i'm having trouble making google map container…
Sb Zakaria
  • 311
  • 6
  • 18
1
vote
1 answer

How to display StreetViewPanorama in React?

Im wondering if it is even possible. Found some libraries on the internet but their docs are poorly described or outdated. Im trying to have fully working streetview using google API key I was trying using @react-google-maps/api library with docs at…
1
vote
0 answers

@react-google-maps/api flickering issue with react 18

I'm using Next.js version 12.3.1 and React.js 18.2.0. When I select point A and point B the direction service and direction renderer gets called and the map prints the direction with the markers. But when I change points A and B the map prints a new…