Package google_maps_flutter rendering zoom level differently on Web

[filip]

Before I file a bug, I want to ask here whether someone has had a similar problem, or whether I’m holding it wrong.

Using the official Google Maps Flutter plugin, I’m showing a map with zoom level 0.^[1] This is how it looks like on an Android phone:

Here’s the same zoom level on an iOS tablet:

And here it is on the web:

(The same thing happens on other zoom levels, obviously, it’s just the most noticeable when you see it on zoom level 0.)

I have a feeling this is a pixel density issue. Maybe, on the web, the pixel density info is somehow lost in translation so the map thinks we’re rendering on some giant screen? (When in fact it’s a regular monitor, just with high resolution.)

I really want to avoid writing a special case zoom level for the web.

---

1. Zoom level 0 is “zoomed out”. Something like zoom level 14 is “city overview”. So the lesser the zoom level, the lower the scale, and the larger area you see on the map. ↩︎

[Johan]

If I look just at the size of each of your IMG there is size difference.

Don’t it render to the pixel size of the device(screen)?

What is?

Size size = MediaQuery.sizeOf(context);

[filip]

@Johan

What is?

Size size = MediaQuery.sizeOf(context);

Great point. Let’s see.

iPhone landscape: Size(932.0, 430.0)

Chrome window: Size(1200.0, 698.0)

So the size is comparable (+28% horizontal, +62% vertical) but the zoom seems to be more than 3x off.

[Johan]

Then the possibility is that exist that the physical size gets approximated (I know you can’t reliably programmatically calculate the physicals size)

Maybe look at

Size size = MediaQuery.sizeOf(context);
double deviceWidth = size.width* MediaQuery.devicePixelRatioOf(context);
double deviceHeight = size.height * MediaQuery.devicePixelRatioOf(context);
debugPrint("$size");
debugPrint("$deviceWidth");
debugPrint("$deviceHeight");

And then compare the two…

[filip]

Ok, so on Android (emulator) I get this:

• MediaQuery.sizeOf(context) == Size(411.4, 890.3)
• device (hardware pixel) size == 1080 x 2337 (device pixel ratio of ~2.6)

On the web running on my Mac, with a window that’s about four fifths of a 13" screen, I get this:

• MediaQuery.sizeOf(context) == Size(1200.0, 698.0)
• device (hardware pixel) size == 2400 x 1296 (device pixel ratio of 2)

So, I think the Flutter logic is correct, yet the map is zoomed out significantly more. Maybe the device pixel ratio is not applied inside the map widget when on the web?

I’ll file an issue.

[filip]

Google Maps plugin seemingly doesn't apply device pixel ratio on the web