It appears there is a rendering issue with the vector map when I zoom out the browser (not the map zoom level).

[kiitosu]

I created a code using @vis.gl/react-google-maps with style={{ width: "100%", height: "100%" }} and mapTypeId={"hybrid"}. When I zoom out in the browser itself (not the map zoom), the map breaks like the image I attached.

How can I handle the issue?

[usefulthink]

I haven't seen google maps behave like this before. What do you mean by "zoom out in the browser itself", and which browser is it? Does is go back to working when you interact with the map?

[kiitosu]

@usefulthink
Thank you for your repalay.

What do you mean by "zoom out in the browser itself"

I would like to say that I am zooming out using the browser's zoom function, not the Google Map zoom. The image I attached might help explain what I mean.

which browser is it?

Browser I use is chrome.

Does is go back to working when you interact with the map?

No, the map looks broken with the zoom set to less than 50%."

50% zoom

33% zoom

25% zoom

[usefulthink]

Very interesting. I can't reproduce that on my machine with our example, do you see the same behaviour there (https://visgl.github.io/react-google-maps/examples/change-map-styles – select the 'Hybrid / "light" mapId' in the dropdown)?

EDIT: Just noticed that I can reproduce it if I remove the max-width of the container in our example. This seems to have something to do with the size (number of pixels) of the map element (at 33% zoom, it exceeds some kind of limit). Looks like the largest I can make it in chrome is 2881x2881.

But this sounds a bit like an issue with the maps API itself, maybe the Maps API Public Issue Tracker would be a good place to report this as well.

[kiitosu]

Thank you for your suggestion and additional information. I will report this to Maps API Public Issue Tracker.

EDIT: I have reported this to https://issuetracker.google.com/issues/345275127