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):
left: JS gmap in chrome android, right: android google maps app
left: JS gmap in chrome android, right: android google maps app
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.
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.
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.

left: JS gmap in chrome android, right: android google maps app

left: JS gmap in chrome android, right: android google maps app
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.
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.