101 questions
2
votes
2
answers
140
views
How to make Google Maps JavaScript API zoom in/out process smoother?
I’m using the Google Maps JavaScript API with a lot of SVG markers clustered using MarkerClusterer. When I zoom in and out, the map feels laggy and the zoom animation isn’t smooth — it stutters or ...
0
votes
2
answers
242
views
NextJS + React Google Maps Api not working on production build
I have dependencies
"dependencies": {
"@react-google-maps/api": "^2.20.7",
"next": "15.4.1",
"react": "19.1.0",
&...
- 492
0
votes
2
answers
2k
views
Google Maps API - Migration of Autocomplete class to PlaceAutocompleteElement class
I got to know that Google is deprecating it's old places api and replacing with the new one's. In our application, we use Maps Javascript api with the library=places param, The following way: https://...
- 9
3
votes
4
answers
1k
views
Why do I keep getting the ApiNotActivatedMapError when I've checked that my API key is working and able to call the necessary maps APIs?
I'm trying to create a React component for a text input field using the Google Maps API autocomplete feature. This is the code I have so far:
"use client"
import React, { useRef } ...
0
votes
0
answers
133
views
Using Google Maps API with DeckGLOverlay throws an undefined error
So I'm following this example by visgl from this PR: https://github.com/visgl/react-google-maps/blob/1a0ac6e13d15ceda5212d310ffc2370ffdd90e65/examples/deckgl-overlay/src/app.tsx
I even am using the ...
- 1,210
0
votes
0
answers
75
views
Google Maps JavaScript API - How to add hover effects to POIs?
Using maps.google.com, if I hover over a POI (point of interest), the cursor changes to indicate a clickable item, the text changes color, and a pop-up is shown. For instance, consider the case of me ...
8
votes
2
answers
438
views
Google Maps React Component Crashes with TrafficLayer: "Uncaught Error: b/369845599"
I'm using the @react-google-maps/api library to render a Google Map in my React app. The map displays markers for couriers and shows directions for selected couriers. I also want to include a ...
- 133
0
votes
1
answer
245
views
How to modify/remove markers from React Google Maps package?
I am currently trying to make a map using the React Google Maps. Currently, I can plot the markers just fine but when I go to change them or remove them I run into problems where it only renders a ...
1
vote
0
answers
48
views
How to clear a specific polyline (DirectionsRender) from google map using react-google-maps/api?
I am trying to integrate google map with DirectionsService. I have drawn multiple routes on the maps. But i have to remove particular route from the map on the button click. How its possible? I tried ...
- 77
4
votes
2
answers
815
views
React Google Maps API MarkerClusterer rerender
I'm working on a proximity app. The database contains longitude, latitude and a geohash of each item. The client supplies GPS coordinates to the server. The server then converts those coordinates to a ...
0
votes
0
answers
171
views
React google maps api autocomplete issue with selection via arrow keys
In React, I have an issue using autocomplete from the google maps api where selecting a location via up/down arrow keys in the dropdown menu followed by enter does not seem to select the location. ...
- 45
0
votes
0
answers
67
views
Can't render two markers at a same time @react-google-maps/api
I am having trouble while rendering multiple markers on the google map through the map function. One marker should render based on 'source' state and one should render based on destination state. When ...
1
vote
2
answers
108
views
Android Studio Project can't find file in raw folder
I am trying to style my map that i hace implemented in my application. The map is working fine, but when i tried to put a style on it, it produces an error.
These are the lines that are relevant to ...
1
vote
1
answer
327
views
DirectionsRenderer overwrite the Marker when rendering
I'm working on setting up a tracking system so customers can see where their deliveries are in real-time. I managed to setup for marker destination and pickup location along with route path toward it. ...
- 3,440
1
vote
1
answer
233
views
React Google Maps OverlayViewF not allowing descendants to be clicked
I'm trying to display an OverlayViewF from @react-google-maps/api in my map but it doesn't let me click on the div inside of it. I am using OverlayViewF instead of OverlayView to avoid the jittery-...
- 11
3
votes
1
answer
3k
views
React with Google Maps @react-google-maps/api google.maps.Marker is deprecated
I have been running @react-google-maps/api for a project number of years. Since 21st February 2024 I have been getting a deprecation warning:
As of February 21st, 2024, google.maps.Marker is ...
- 846
0
votes
0
answers
154
views
InvalidKeyMapError (Google Maps api ) in deployment on Vercel
So I have built a web app with Next.js and I have used from @react-google-maps/api. Everything is working on my localhost, but now when I deployed it on Vercel I get an error that my key is invalid. I ...
- 15
-1
votes
1
answer
118
views
Google map api call not fetching data
const express = require('express');
const app = express();
const { Client } = require('@googlemaps/google-maps-services-js');
const googleMapsClient = new Client({apiKey:"myGoogleApiKey"});
...
1
vote
1
answer
954
views
Replace google map api default info window with custom
When you click on a location inside the map using the Google Maps API it displays an info window with the name, address, and link to view it on Google Maps.
Is there a way to override this event and ...
- 27
0
votes
1
answer
146
views
How to preload polygon in Google DrawingManager by passing predefined coordinates
I am using @react-google-maps/api to use google-maps in my react.js application, and I am using its different components. Now, I want to draw a polygon in Google DrawingManager using predefined ...
- 55
1
vote
1
answer
384
views
React Google Maps API unable to change the heading
I am using the package react-google-maps/api and want to change the heading of the maps. Any suggestions as to how it would be possible to do so?
I have tried to add the heading in the <GoogleMap/&...
- 15
1
vote
0
answers
132
views
Calculating travel times in R for several pair of addresses
I am a newbie on this. I'm following tutorials and instructions as much as I can, and I get not results. The problem may not be in code (I think), but on what happens of the google maps API side.
I ...
- 11
0
votes
0
answers
194
views
@react-google-maps/api shows loading... when the network is slow or chrome version is too low
I have a website for rendering maps from the @react-google-maps/api library. Everything works fine but when I make the network so slow or if your chrome version is too low like around 80.xxxx it shows ...
- 69
0
votes
1
answer
991
views
REACT: Google Maps API key - Warning: NoApiKeys
I have created a project that should display Google Map, but I constantly get a maps displayed with watermark and a warning in a console: Google Maps JavaScript API warning: NoApiKeys https://...
- 25
0
votes
1
answer
2k
views
How to decode a polyline and draw it on a google map using "@react-google-maps/api"
I'm trying to use the @react-google-maps/api library to render a Google map on a react component and draw a polyline on the map, however, the polyline data that comes from the backend is encoded like ...
- 3,086
-1
votes
1
answer
68
views
How to manipulate multiple paths with array structure in Polygon react google maps
Hello i am using the react-google-maps/api library and i want to map some coordinates in my Google Map using the Polygon component. So far i have manage to map Polygons in my map with holes like this:
...
- 91
0
votes
1
answer
2k
views
Google map api in my react app doesn't work
I'm going to use @react-google-maps/[email protected] and I got the following error and I have no idea how to fix it. Please help me.
My code :
import React, { useState, useEffect } from "react";
...
- 7
0
votes
1
answer
133
views
Custom element is not shown on google map when using @react-google-maps/api
Hi I am pretty new to Google maps and trying one of the @react-google-maps/api library. When I am using my custom element, it is not shown on the map. I don't see any obvious errors. Any ideas why it ...
3
votes
1
answer
417
views
Two tooltips/dailog when clicking on marker @react-google-maps/api
Consider:
When I click on the marker, it shows two tooltips/dialog. I am using "@react-google-maps/api": "^2.19.2" in Next.js TypeScript.
I am trying to show the tooltip when I ...
- 93
0
votes
1
answer
167
views
@react-google-map/api: auto adjust marker popup pos if near map container edge
I try to find a way to adjust markers popup window position based on following condition: if popup is near map containers edge.
Reason: right now popup is being hidden under container if marker (and ...
- 109
11
votes
1
answer
5k
views
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....
- 111
0
votes
1
answer
129
views
React-google-maps not displaying props
I am trying to display a simple Circle on the map using the Circle prop. It works perfectly fine on one computer using chrome however it will not display on the map when on another computer using the ...
- 1
-1
votes
1
answer
344
views
Why `options` is render every time using react-google-maps/api
Hello i have a google map in react and i think that the options parameter in GoogleMap is render every time.
I have this code
<GoogleMap
ref={this.myRef}
mapContainerStyle={{...
- 91
1
vote
2
answers
491
views
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.
<Chart
width={"200%"}
height={"100%"}...
0
votes
1
answer
123
views
Making React component only rerendering conditionally
I have a website which tracks devices on a map. For that I use Google Map react api. My problem is that the Map component gets rerendered too many times for no reason, even when its props don't change....
0
votes
1
answer
717
views
InvalidKey (google maps api ) in deployment
I have used from @react-google-maps/api. Everything was working on my localhost, but now when I deployed it on Vercel I get an error that my key is invalid. I have already put the key in Environment ...
- 21
1
vote
1
answer
576
views
React google maps api - DirectionsRenderer isnt removed from the map
The main idea is im showing several routes on a map,
for each route i render a <DirectionsRenderer component.
however, when i try to remove a DirectionsRenderer it doesn't actually remove it from ...
- 172
0
votes
1
answer
673
views
Show InfoBox/InfoWindow on the streetView with react-google-maps-api
In this code sandbox, I have some markers with InfoBox nested in the marker that is shown on click.
How can I also show that InfoBox when switching into the StreetView mode?
// The imports
import { ...
- 4,653
2
votes
1
answer
976
views
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.
<GoogleMap
id=...
- 4,653
-1
votes
1
answer
339
views
Why on set state in react throws Cannot read properties of null (reading 'toString')?
I'm using React Google Maps API, and every time that I run this function, when drag end a marker it throws the exception Cannot read properties of null (reading 'toString') if I try to run the ...
0
votes
0
answers
345
views
Cannot read properties of null (reading 'setCenter')
I am using react-google-maps-api. Before that approach I tried to use a state to change center but google maps didn't see the initial state. Then I found this approach below on github.
const [map, ...
- 78
0
votes
1
answer
715
views
Showing markers on Google Maps (React)
I'm having trouble showing markers on my app.
I am trying to show markers using @react-google-maps/api for each property that a user owns. The map is rendering but markers are not appearing on the map ...
- 1
1
vote
1
answer
486
views
Custom Maker Icon not Scaling down with scaledSize attribute in @react-google-maps/api library
I have used the @react-google-maps/api library to add a google map and show some custom marker icons on the google map. I have followed the documentation found in here. And added a marker. I have ...
- 867
1
vote
0
answers
114
views
onMouseOver and onMouseOut triggers every mapped element
With react google maps api I am trying to do open info window when user mouse over a marker. When I hover single marker every info window opens.
`
const [showMarker, setShowMarker] = useState(true);
...
- 78
0
votes
1
answer
905
views
How to dynamically change icon on react-google-maps?
I would like that when clicked on a table, the icon on the map would be updated to another color. But the same does not happen. I don't know how to "refresh" the icon
import { GoogleMap, ...
0
votes
2
answers
2k
views
useGoogleMap inside Next JS
Does anyone use useGoogleMap() inside NEXT JS component? It gives Unhandled Runtime Error Invariant Violation: useGoogleMap needs a GoogleMap available up in the tree error. I just need to refer to ...
- 65
0
votes
1
answer
1k
views
Error on production: Refused to load the script react-google-maps/api
I am using @react-google-maps/api with react js
I’ve a problem on production with useLoadScript hook, isLoaded returning false with the following error
Refused to load the script 'https://maps....
- 1,196
1
vote
0
answers
869
views
@react-google-maps/api with custom overlay unclickable
I am building a react google map to render property listings and everything is visually fine
My CustomOverlay component is made to replace default markers and renders accordingly, but doesn't enable ...
- 560
1
vote
1
answer
190
views
Markers disappear when I add `clusterer` to them. @react-google-maps/api
I'm trying to use MarkerClustererF from @react-google-maps/api to cluster markers.
My render looks like this:
<MarkerClustererF>
{(cluster) => (
<>
{...
- 320
2
votes
2
answers
3k
views
Markers and OverlayViews not reliably showing in Google Map using @react-google-maps
I have a simple piece of code here where I display a google map using @react-google-maps/api.
I am attempting to display a "Marker" and an "OverlayView" in the center of the map at ...
- 13.4k