CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Fer
Fer

Reputation: 4196

Zoom Google map to fit the world, on any screen

I have a seemingly simple situation, but have yet to find a solution. Here's a temporary dev link:

[[url removed]]

As you can see, we're looking at a fullscreen Google Map. If you allow the page access to your location, it will zoom into it. If you want to zoom out again to "the world", you can click the globe icon in the top right.

My question is related to zooming out to that "world" level. I'm currently using a zoom level of 3 for that. However, the results highly depend on the size/DPI of the viewport one uses. Zoom level 3 is about right on my desktop, yet too far zoomed in on my smartphone, which then shows only Africa. Setting it to zero will make it right for the smartphone, yet shows the world several times over for my desktop.

What I need is a way to reliably set a zoom level that accomplishes exactly the full world in view, regardless of the viewport size. I was hoping there would be a simple way to this? I have the feeling that I'm overlooking something really essential here.

Note that my question is not related to markers, I simply want the world to fit on screen exactly one time, regardless of markers.

Upvotes: 2

Views: 4729

Answers (2)

tony m
tony m

Reputation: 4779

You can detect the screen size in Javascript to understand if the accessing device is a desktop or mobile and then accordingly set the zoomlevel variable for loading your map

Upvotes: 1

geocodezip
geocodezip

Reputation: 161334

Can't be done. You can get close, but there are discrete zoom levels.

I would try:

var worldBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-85,-180),
                                               new google.maps.LatLng(85,180));
map.fitBounds(worldBounds);

Then adjust worldBounds for the best compromise view on both platforms.

Upvotes: 2

Related Questions