Roads on web app on android disappearing

[codmitu]

Description

I have this bug for a long time, sometimes its on sometimes its not. When i load the map multiple times or even a few times a day, the roads dissapear and i only see a blank field and rivers, buildings and everything else except the roads and alleys, and refreshing or restarting the app doesnt work. I am using google maps javascript api because its a browser app so this bug only occurs (i think) on android, on my laptop (windows chrome) everything looks fine, so i assume its a cache problem but i already tryed reinstalling, clearing data and cache and it didnt resolve the problem but in development i dont have this bug on windows chrome. The curious thing is that tomorrow it will work fine for a bit, like every day it resets and works until it doesnt. Clearing cookies from the chrome settings for the specific site might fix it apparently, but its just temporarily

Steps to Reproduce

Loading the map multiple times might cause the bug

Environment

• Library version: 1.1.0
• Google maps version: weekly
• Browser and Version: chrome 129.0.6668.54
• OS: android 12
• react 18.2.0

Logs

No response

[codmitu]

Forgot to mention that this bug occured when i had 3D buildings enabled, now i am using three.js objects while i have the buildings off on the 3D vector map

[usefulthink]

Although I think it's unlikely this has anything to do with React and this library, I still love to have a look at that. If this only happens in combination with three.js / WebGlOverlayView, it might be related to some sort of problem with the GPU.

[codmitu]

this morning the map wouldnt show the roads only the train tracks and pedestrian only streets marked with a black line

So i tryed clearing the cache, data, cookies, and restarting the app many times, created a new account, but with no luck this time
As seen in the image below im trying to render 3600 objects with three.js (const dummy = new THREE.Object3D();)

i remember that when i rendered 289 objects i didn't had this bug but now (with 3600) sometimes when i load the map it either crashes my app showing only a blank page or a default 2D map (im guessing a raster type)

In conclusion im going to try again to render max 300 objects and add/remove the objects based on the map bounds when user moves

... later it didnt even load the train tracks

[usefulthink]

That all sounds like the GPU crashes during rendering for some reason. What are you using to render the three.js objects?

[codmitu]

That all sounds like the GPU crashes during rendering for some reason. What are you using to render the three.js objects?

const texture = new THREE.TextureLoader().load("/models/fog.jpg");
const buildGeometry = new THREE.BoxGeometry(1, 1, 1);
const buildMaterial = new THREE.MeshPhongMaterial({
map: texture,
depthWrite: true,
transparent: false,
opacity: 1,
});

buildMesh = new THREE.InstancedMesh(buildGeometry, buildMaterial, 4000);
scene.add(buildMesh);

const dummy = new THREE.Object3D();
// adding position, scale
dummy.updateMatrix();
buildMesh.setMatrixAt(i, dummy.matrix);

renderer = new THREE.WebGLRenderer()

I have optimized the image and now has 727bytes instead of 6kb.

[codmitu]

Same day yesterday I have updated the app showing ~267 objects but the map still wouldnt show the roads, even after clearing cookies, cache, data, reinstalling the pwa. The desktop version and the Edge browser on android was working fine.

Today the pwa on chrome works fine with the 267 objects, so I'm guessing its a cache thing, after consulting chatgpt it appears that the memory usage of the threejs objects can clear the cache from the memory RAM, where the google maps tiles are cached so the threejs scene can use that fresh memory to render its objects

"Conclusion
Yes, high memory usage from rendering a large number of Three.js objects can cause the browser to free up memory by clearing cached resources, which may affect the rendering of Google Maps tiles, potentially causing elements like roads and train tracks to disappear. To prevent this, it's important to optimize your Three.js scene to minimize memory usage and monitor performance using the browser's developer tools."

In the docs it says there are known issues with map-caching https://visgl.github.io/react-google-maps/docs/api-reference/components/map#map-instance-caching

So maybe it's not really a bug but maybe a method for optimizing the api to not be exploited by limiting the map-views.

This thread can now be closed/stay open or moved somehwere else

[usefulthink]

All right, I will move this over to the discussions section then.

I saw you seem to be using your own THREE.WebGlRenderer so I'm curious, are you aware of the @googlemaps/three package? Or is the three.js stuff unrelated to the map and just happens to be on the same page?

If it is indeed a GPU crash of some sort, it should be fixed by either restarting the browser (i.e. force-kill the chrome app and relaunch) or by restarting the device (if it is a really bad crash). Everything else shouldn't affect this at all.

The disappearing roads would be worthy of a report as an issue in the google maps issue tracker here: https://issuetracker.google.com/issues?q=status:open%20componentid:188853&s=created_time:desc

To clarify the 'map instance caching': The only purpose of that is to prevent your app from creating a ton of map-instances when a single one can do the job (for example, you close the map in an SPA and come back to the map later). React would normally destroy the map instance and create a new one when needed, and our caching will keep the google.maps.Map object around in memory so it can be remounted instead of creating a new one. This isn't persisted anywhere beyond memory, so a reload will always clear that cache.

[codmitu]

i noticed that closing/opening a component with the Accordion MUI element was causing the map to lose/regain the roads and the app was very laggy

...so after more investigation apparently i had a memory leak and the renderer.setAnimationLoop(animate) was running on all pages and i fixed that first

i removed the threejs component and tested with the dev tools in the memory tab, everytime i was switching to map page back and forth the memory was increasing with like 10-30 mb so i made the page and the map component normal, meaning i removed lazy(), memo() and <Suspense/> when i export/import it and also upgraded the package from 1.1.0 to 1.3.0.

So far the android version doesnt crash the map and the roads are always visible even after i use the Accordion tab many times

The memory still increases a bit when switching to the map page back and forth but by a fraction compared with before and the app is not laggy anymore, unless i navigate 50 times and hit 500mb memory heap peak. So far im very happy with the results

PS: before the fix, my app would make Google Maps app crash aswell, it would show only the logo but the other apps were working fine. One time it froze my phone so i had to restart it and then i uninstalled my pwa lmao