2

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.

Fer
  • 4,116
  • 16
  • 59
  • 102

2 Answers2

2

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.

geocodezip
  • 158,664
  • 13
  • 220
  • 245
  • Thank you, its late at night here so I will try this tomorrow and then report back. – Fer Jul 01 '13 at 21:27
1

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

Community
  • 1
  • 1
tony m
  • 4,769
  • 1
  • 21
  • 28
  • Thanks. Yes, this would be my strategy if nothing else works. – Fer Jul 01 '13 at 21:26
  • 3
    I eventually went for this formula to calculate the zoomlevel based on window width: var zl = Math.round(Math.log($(window).width()/512)) + 1; Since this is a variation of your basic idea, I'll grant you the correct answer. – Fer Jul 02 '13 at 19:06