Questions tagged [react-google-maps]
Questions regarding Reactjs component for google maps by tomchentw.
444
questions
0
votes
0
answers
18
views
How to abort (async?) google map directions service function?
Lets say i have call fetchDirections three times in this order:
fetchDirections('routeA');
fetchDirections('routeB');
fetchDirections('routeC');
And my code for fetchDirectionsis:
const ...
1
vote
0
answers
28
views
How to render a Drawing manager in a Map or a polygon using "@react-google-maps/api"
emphasized textI'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, ...
-2
votes
0
answers
19
views
<StandaloneSearchBox> Calling multiple API Calls
The Component <StandaloneSearchBox> is calling the getPlaces() function multiple times which is leading to increase in the billing due to multiple getPlaces() API calls. How can I reduce the ...
-2
votes
0
answers
21
views
Google maps - optimistically render vehicle location [closed]
I have a setInterval that listens to a gps tracking API for a list of vehicles I'm tracking and returns their location coordinates in an object that looks like this:
{
"id": "...
-2
votes
0
answers
33
views
React Google Maps Directions DirectionsRenderer
I am implementing Google maps using the react-google-maps library. The issue is that sometimes the route gets updated from source to destination but sometimes it does not update only the marker gets ...
1
vote
0
answers
25
views
react google maps render custom html on map
I'm using @react-google-maps/api ^2.12.1 in my react project. I want to create an interactive HTML component as a marker on the map. Still, on every documentation of google maps, I only find how to ...
0
votes
0
answers
19
views
Update StandaloneSearchBox boundaries on react-google-maps
I am trying to make a search box that when I zoom in the map and do the search again new places appear and not the same as before, I think this can be achieved by updating the boundaries of the search,...
0
votes
1
answer
19
views
Invalid LatLng object: (37.42216, undefined) error when rendering google map on my react-redux app
I'm trying to render google map on my react-redux app. Everything was was working fine. Until when I decided to add some custom markers to the rendered google map. Now the page is blank because of ...
0
votes
0
answers
36
views
How to getDirections() from DirectionsRenderer via @react-google-maps/api?
I am getting the k.getDirections is not a function.
const mapRef = useRef(null)
<DirectionsRenderer
options={{draggable:true}}
ref={(r) => mapRef = r}
onDirectionsChanged={...
0
votes
0
answers
101
views
Next js - react-google-maps/api error when deploying in Vercel : A client-side exception has occurred
My next js app is working well in development and build but when I try to deploy it in Vercel I'm getting this error when I try to call the page calling my mapView component :
Application error: a ...
0
votes
0
answers
61
views
Marker not rendering react-google-maps
I am using React version 18.1 and "@react-google-maps/api" version 2.10. (Noted that just for reference). I am trying to render marker on a map with certaing position and for some reason I ...
0
votes
0
answers
34
views
HeapmapLayer is behind the data layer using react-google-maps api
I am suppose to display a green area highligting the Saudi Arabia, and heatmap to show the working sites. I am using react-google-maps api to load maps, draw a polygon to hightlight the country, and ...
0
votes
1
answer
74
views
Why react-google-maps/api doesn't show lines and polygons?
I use react-google-maps/api library in main project but I can't see the lines I drew on the map.
So I created demo project for try same code. it works. But main project doesn't work. I looked react ...
0
votes
0
answers
29
views
React google maps Polyline - can't draw latitudes (only longitudes)
Having a problem displaying latitudes using Polyline. So we supply it with an array that consists of latitude and longitudes. However google maps does not display latitudes but only displays ...
0
votes
0
answers
162
views
No overload matches this call in react-google-maps
I am facing a issue in react with typescript,
I am using react-google-maps for google map but I am getting eslint error
here is the screen shot of error
I tried all the things that i know but i am not ...
3
votes
2
answers
205
views
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, ...
0
votes
1
answer
221
views
Markers not rendering using @react-google-maps/api
I'm relatively new to react world and particularly to using google maps. I'm using @react-google-maps/api and React version 18. I'm trying to display multiple locations (as markers), however, they are ...
0
votes
0
answers
83
views
Heatmap Layer not displaying in Google Maps API (@react-google-maps/api)
I'm trying to get a Heatmap layer to show within google maps inside my React application. When I npm start I get the following application:
However, there is no visible Heatmap layer even though I ...
4
votes
4
answers
1k
views
Marker not showing @react-google-maps/api on localhost next.js
I'm aware there are similar questions to this... but nothing has answered my question
I'm trying to add a marker to my google map but it is not showing up when I'm running the project locally (It ...
0
votes
1
answer
712
views
react-google-maps not showing and probably not able to request into the api
I really need some help about this. My react project is not working with react google maps that well. I tried my other projects that has it and still works but now I am creating a new one it does not ...
0
votes
0
answers
42
views
How to integrate OverlappingMarkerSpiderfier for clusters with @react-google-maps/api
Clicking on the marker cluster on the same spot (same addresses) is not zooming further. I have gone through many solutions on Stackoverflow, but getting errors when implementing those solutions as ...
1
vote
1
answer
109
views
How to add "outside" event listener to Markers in Google Maps (react-google-maps/api)
I have a list of hikes stored in state and I rendered the location of those hikes as Markers on the Google Map Component like so:
{hikes.map(hike =>
<Marker
position={{lat: hike....
0
votes
0
answers
59
views
How to draw nested/complex/multiple routes to another point in google-map-react?
I'm trying to draw multiple/nested paths between different points on the map using google-map-react.
I know how to draw simple paths but was unsuccessful in drawing the path as in the screenshot ...
1
vote
0
answers
31
views
Want to open popover on react-google-map
I am trying to open a pop over when a google map shape is clicked
but i am unable to do that
I have tried this method which i am usually using to open a pop up when a button is clicked
But it is not ...
1
vote
0
answers
59
views
I want to open popover on react-google-map
I want to open a popover when a particular shape is clicked like this
This my code of what i have tried
<Popover
placement="top"
content={() => content(poly)}
trigger="...
0
votes
0
answers
204
views
How to render client-side only component in SSR with React v17
I have google maps embedded in my project and I use useJsApiLoader from @react-google-maps/api library.
I used SSR in my project, and I have been getting Error: Loader must not be called again with ...
0
votes
2
answers
133
views
Change marker with label on click
I'm using react google maps to render a map with markers.
How can I change the icon / html of the marker on click?
<GoogleMap
defaultZoom={5}
center={{ lat: (props.latLang && ...
1
vote
1
answer
219
views
How to ask about geolocation right before opening google maps?
I am junior front end working on a project in react where you can post job offers with information and google map location.
How the component works?
When I click on the <GoogleMap/> component, ...
-1
votes
1
answer
1k
views
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.
<Marker
onLoad={onLoad}
...
0
votes
0
answers
213
views
how to show vehicle icon between two markers in react-google-map-api
I am using react-google-map-api in my project for a logistics company. The truck has multiple stops to dispatch products and I draw routes for the products orders. It works fine but I want to achieve ...
2
votes
0
answers
200
views
Use map instance outside onLoad in react-google-maps
I am trying to use places library, It requires map instance to call the library but map instance is only available inside onLoad, I am trying to use the places library whenever the center change(...
0
votes
1
answer
684
views
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 ...
-1
votes
1
answer
97
views
Not a LatLng or LatLngLiteral [closed]
Uncaught ge {message: 'not a LatLng or LatLngLiteral: in property lat: not a number', name: 'InvalidValueError', stack: 'Error\n at new ge (https://maps.googleapis.com/m…tp://localhost:3001/static/...
0
votes
1
answer
252
views
React Google Map Fitbounds not a function error
Whenever I use map.fitbound I get a Uncaught TypeError: map.fitBounds is not a function.
The important code snippet:
var bounds = new google.maps.LatLngBounds();
const map = useRef(null);
const ...
0
votes
0
answers
27
views
Overlapping marker labels
Currently I'm using @react-goole-maps/api for my project, but I observe that the custom component marker's label overlaps other labels(other marker's label, street name, etc.). Is there a way to fix ...
1
vote
0
answers
982
views
google map with search in react js
I'm using google-maps-react library for maps in my react application, and I'm adding search address functionality in my application and facing CORS error.
Error:
Autocomplete.js
import React, { ...
0
votes
0
answers
192
views
Using .geojson file to draw polygons w/ react-google-maps
Trying to draw state lines using a GeoJSON file for the coordinates:
However cant seem to get the layers to display on the map. The map loads and displays fine, just no filters applied. I was able to ...
2
votes
0
answers
288
views
How to show infowindow on marker mouseover and close on mouse out but if the cursor is on infowindow dont close infowindow react google maps
Here is the code 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 ...
0
votes
0
answers
65
views
Change polygon color on hover in react js (functional component)
I am showing multiple polygons on google map and want to change the color of polygon on hover. I am using functional based component.
This is how my code looks like:
It's called on hover
const ...
0
votes
0
answers
89
views
how to grab a full address from google map
I am using the library name react-google-autocomplete in React. It working fine but it does not return full and complete addresses. For example, I am living in a city named (ABC).
ABC has a sector ...
0
votes
3
answers
1k
views
Cannot read property of undefined (reading maps)
I wanted to take the distance between multiple points with Google's DinstanceMatrixService, and I get the following error:
I used google.maps... multiple times and it gave me the error about google ...
0
votes
0
answers
33
views
react-google-maps api onRightclick event not working on Macbook touchpad
I just started using React Google Maps API https://react-google-maps-api-docs.netlify.app/#marker, and I noticed that the onRightClick props or event is not fired when using Macbook trackpad on ...
0
votes
0
answers
88
views
How to achieve google AutoComplete functionality
I've been referring to Google docs for this and causing errors.. However, tell me if there is a better way if not this.
index.js
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&...
0
votes
1
answer
333
views
How to calculate the distance between differents lat long and display on map dynamically react native
I have implemented map in my application. Below is a dummy array geoCord[] I am getting api respons in one array and I am mapping this and diaplaying lar long on maps . No I am trying to calculate the ...
1
vote
2
answers
421
views
Check if marker is visible on ViewPort google-maps-react
I am Currently working on a website like zillow.com, And I have to show data on the right side of map corresponding to the markers visible on map and whenever the user drags map I have to check for ...
0
votes
0
answers
21
views
Get Full Address from react-places-autocomplete
I'm using react-places-autocomplete and I want to search only addresses and when selecting the suggestions I want to receive the Country, State, ZipCode & City from the address selected. As the ...
0
votes
1
answer
1k
views
How can I simply pass data from a component one page to a component on another page in React/Next.js?
Sumary
I have a simple next.js app with two pages, index.js and results.js. The index page has two Location AutoComplete fields which return the address and LatLng of a location after a user selects ...
0
votes
1
answer
210
views
Google Maps in React don't show multiple markers
I have a problem. I have the array markers that is populated by my backend in the correct way, because after the call I will have an array with this format:
[
{
"id": 2,
&...
0
votes
0
answers
68
views
unable to add latlng from api to react-google-map
passing as props here
<MyMapComponent
isMarkerShown
googleMapURL={https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places}
loadingElement={<div style={{ height: ...
0
votes
1
answer
85
views
How to get Lat and Lng from StandaloneSearchBox?
I use the react-google-maps StandaloneSearchBox and query the locations of my points of interest. This works as far as it goes. However, I get back functions for the location and not the actual value. ...