1. Are you ready for the Galaxy S20? Here is everything we know so far!

Bad quality Google Maps JS imagery on Android

Discussion in 'Android Development' started by cpper, Apr 29, 2021.

  1. cpper

    cpper Newbie
    Thread Starter

    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):
    1. In desktop chrome, using device simulator, the imagery is sharp
    2. In the google maps android app, the imagery is as sharp
    3. 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%.

    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.

    Muhammad Awais11 likes this.

    1. Download the Forums for Android™ app!



Share This Page