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%.
image1: https://preview.redd.it/y4wlsuabl3w61.jpg?width=2200&format=pjpg&auto=webp&de881c50
image2: https://preview.redd.it/oi596e0ll3w61.jpg?width=2200&format=pjpg&auto=webp&a10bb9dd
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.
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%.
image1: https://preview.redd.it/y4wlsuabl3w61.jpg?width=2200&format=pjpg&auto=webp&de881c50
image2: https://preview.redd.it/oi596e0ll3w61.jpg?width=2200&format=pjpg&auto=webp&a10bb9dd
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.
Facebook
Twitter
Instagram