I have a calculation-heavy app (real-time movement of markers/thousand-point polylines and distance calcs between them), and getting some stutter, not unusable but noticable. I'm wondering if one way of optimizing might be to switch to vanilla google maps to remove any react overhead. Does anyone have experience or benchmarks to suggest if this is worth the effort?
or is it the case that there wouldn't be much difference
Hello ppl. I am new here . I want to ask something amd I would appreciate it a lot if u could help me. I am building a simple react google map with next js. In the beginning the map has some initial markers . I add a custom search input thay update the data with every input change and that causes the map to rerender with new markers. The problem is that the previous marker icons are still rendered on the map and the new markers render in front of them. There is no wrong on updated markers . They rendered normally , the problem is the previously markers are still there. Anyone jas any idea of why that happening? Ty in advance
Code is simple:
<GoogleMapReact
bootstrapURLKeys={{
key: '',
}}
defaultCenter={{
lat: 68.970663,
lng: 33.074918
}}
defaultZoom={14}
>
</GoogleMapReact>
Good day! I'm trying to set the zoom level when there's only 1 marker. The codestack is quite large, so i'm not sure if it's set somewhere in the code or if it's default behaviour; but when there's only 1 marker, it zooms in to the max zoom level. Is this default behaviour? And if so, how to overwrite it?
I connected my react project to the google maps api using react-google-maps library and it shows the following without any errors
My code
import {
GoogleMap,
Marker,
DirectionsRenderer,
Circle,
MarkerClusterer,
useLoadScript
} from "@react-google-maps/api";
import { useState, useMemo, useEffect, useRef } from "react";
import "./Map.css";
const API_KEY = xxxxx;
export default function Map() {
const { isLoaded } = useLoadScript({
id: 'google-map-script',
googleMapsApiKey: API_KEY,
});
if (!isLoaded) return <div> Loading... </div>
return(
<GoogleMap zoom={10} center={{lat:100, lng: 100}} mapContainerClassName="mapContainer" >
<Marker position={{lat:100, lng: 100}}></Marker>
</GoogleMap>
)
}
any idea why it happens?
Hi All,
I want to implement live navigation just like google maps in react (functional). Can anyone please help me how to implement this as i am not getting any idea. I have implemented upto DirectionRender but after that i am not getting any stuffs for this live navigation.
Hello :)
I am using https://react-google-maps-api-docs.netlify.app/#drawingmanager
getting black screen :(
can you help please
Hello there this is my first time to use google map platform. And I have website where that the user choose among 4 paths every path have start and end points. But I want estimate arrival time according to the chosen path by using google map distance metrics in my <#905533814577717308> component. How I can use it I’m tried many ways but It’s not successful and I don’t know where I should put API key. Please help me. Thank you
Hello there this is my first time to use google map platform. And I have website where that the user choose among 4 paths every path have start and end points. But I want estimate arrival time according to the chosen path by using google map distance metrics in my react component. How I can use it I’m tried many ways but It’s not successful and I don’t know where I should put API key. Please help me. Thank you
