Stack Overflow
Stack Overflow

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

testing react google maps useJsApiLoader using react testing library

I have this basic component, but whenever I try testing it with React Testing Library the only thing present on the screen is the div with the "loading" text. I think this is because isLoaded might not have a value when the component is first…
Kerron
  • 396
  • 5
  • 10
2
votes
0 answers

How to show infowindow on marker mouseover and close on mouse out but if the cursor is on infowindow don't close infowindow react google maps

I want to show infowindow on marker hover and close on mouse leave, but only if mouse is not on infowindow. For now the infowindow is showing on mouse over, but infowindow is being close when hovering. Here is the code: {SellerLocation === "on"…
Muhammad Hasnain
  • 31
  • 3
2
votes
1 answer

How to load a

I am trying to display a small card basically over the google maps component that this https://www.npmjs.com/package/@react-google-maps/api package provides. I set the zIndex to 2 but the
still shows below this map component. The card element…
incredible123
  • 103
  • 11
2
votes
1 answer

Custom Marker as a React Component with react-google-maps-api

We are converting from google-map-react to react-google-maps-api which means more of a native Google Maps API experience. Prior to the change, we were able to load a custom Marker as a React Component like:
Phil Lucks
  • 2,704
  • 6
  • 31
  • 57
2
votes
0 answers

ReactJS High CPU Usage when doing live tracking using react-google-maps-api

I have an ReactJS admin panel that monitors the location of all our company drivers and plots them as markers using @react-google-maps/api, I also want to provide live-location tracking. I was able to plot the markers but when I did a simulation for…
j.ian.le
  • 207
  • 4
  • 16
2
votes
2 answers

@react-google-maps/api "google is not defined " error when accessed inside UseEffect hook

what im trying to do place a marker on the map and calculate the distance between the marker and a static location on the map. if the distance is greater than 1000 metres then i display address not available modal problem description Unable to…
Mohamed Sauood
  • 75
  • 1
  • 9
2
votes
1 answer

react-google-maps/api Avoiding re-render of Map after some state changes

I was having problems where my GoogleMaps instance would refresh and self center itself on some onClick function where the state was being set and the entire Component rendering cycle would happen. After some Googling it was suggested that the…
smooth_smoothie
  • 1,319
  • 10
  • 27
  • 40
2
votes
1 answer

How do I re-center a GoogleMap React component to a new address using react-google-maps?

I'm rendering a GoogleMap component using the "react-google-maps" library in React. I can set an initial defaultLocation that works fine when the map initially loads. In the documentation it says that the component takes a "center" prop that one can…
L B
  • 25
  • 5
2
votes
0 answers

InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama @react-google-maps/api

I am using @react-google-maps/api and loading the script from cdn to my public directory index.html file. I get InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama and the markers do not appear on my map.…
chichi
  • 2,777
  • 6
  • 28
  • 53
2
votes
1 answer

React google map is not updating

Im using react-google-map, and I add poly line every marker in the map. But every time I delete a data the marker on the map wont disappear. Here is my code below. Googlemap.js /*global google*/ import React, { Component } from "react"; import {…
Alfon Labadan
  • 45
  • 2
  • 8
2
votes
1 answer

How to get rid of 'Text components are not supported for now in ReactKonva. You text is: "Loading..."' using react-konva and react-google-maps/api?

I want to render a Konva shape on top of a Google Maps layer. Since I'm using React, I use react-konva and react-google-maps/api libraries to work with. Everytime I run yarn start, I get this error: Text components are not supported for now in…
Gane D. Geoffrey
  • 165
  • 1
  • 4
  • 10
2
votes
1 answer

How do I use Distance Matrix API in ReactJS using @react-google-maps/api?

I am using the above package and I can't find proper documentation to implement the code. Currently, this is my code: import React, { Component } from "react"; import { GoogleMap, DistanceMatrixService } from "@react-google-maps/api"; class…
user13126527
2
votes
3 answers

TS2531 | React useRef - Object is possibly undefined

I need to set new lat and lng to my google map in React Const mapRef return error: Object is possibly 'null'. TS2531 When i used let instead of the React.useRef it works. I think a should set type to mapRef, but i dont know which one and where i…
HonzaVrkota
  • 53
  • 2
  • 6
2
votes
1 answer

@react-google-maps Marker LatLng throwing error

I'm using the @react-google-maps/api to build my first react map.. But my latLng literal for position inside the Marker is breaking my code. Is this not the same latLng format that I'm using for center which works fine? How is my Marker latLng…
AGrush
  • 1,107
  • 13
  • 32
2
votes
0 answers

Map is not re centering on marker position in react google maps

react-google-maps is working fine,i use props to recenter the center position,but it seems map is not centering.Whats wrong in my code? I have a map container and google map is a function base component. import React, {useEffect, useState} from…
Bappy Rahaman
  • 21
  • 6
1 2 3
…
30 31