Bad quality Google Maps JS imagery on Android

I'm developing an app which displays a google map (satellite layer) into a web view. Thus, I'm using the Google Maps JavaScript API. I've noticed the JS API imagery is low quality and quite blurry on Android, but not in desktop chrome. Not only in my app, but on any site that embeds a JS Google map.

Take as example the maps JS API hello world example (satellite layer): In desktop chrome, using device simulator, the imagery is sharp In the google maps android app, the imagery is as sharp In android chrome, the imagery is blurry and ugly. Below are two examples. Left pic in each image is the JS hello world map linked above, in chrome on android. Right pic is the same exact are in the native android google map app. In a desktop browser, the JS imagery would look as sharp as in the android app. Click on the pic twice to view it at 100%.

Now I don't know if that's how mobile JS maps should look like or if there is a problem with my phone. Two things I've tried that solved the problem but induced other issues: Add zoom:0.5; to the div of the map, or change Smallest width from 392dpi to say 800dpi in Developer options on the phone.

Desired behavior: Sharp google maps imagery, as seen on desktop or in the android google maps app.

It somehow feels like on mobile the browser zooms in on the map. In desktop chrome, if I set the browser zoom to 150% I get the same sort of ugly pixelated map.

https://stackoverflow.com/questions/67306265/bad-quality-google-maps-js-imagery-on-android April 29, 2021 at 02:53AM