I'm working on a project which requires me to display the whole earth map (zoom level 0 in Google Maps) in a given area (div) on the webpage. Additionally, I'd have to display the map in such a way that the whole world remains visible on different set of resolutions (these set of display resolutions start from 1024x768 and going up six consecutive ones). How can I get current display resolution and then decide which zoom level to initialize the map to? I don't need a zoom-level-to-screen-resolution ratio or anything. Just a tested zoom level for my pre-defined set of resolutions so I can do this using if else statements.
-
Inactive! No more replies, although the question is tagged appropriately! – Basit Sep 17 '12 at 09:37
2 Answers
Which language is this? in javascript you can do the following:
<script type="text/javascript">
if ((screen.width<=1024) && (screen.height<=768)) {
window.location.replace('http://mappagewithresolutionlowerthan1024x768.com');
}
else {
window.location.replace('http://mappagewithresolutiongreaterthan1024x768.com');
}
</script>
This would mean you have a different webpage for each type of display. So it's probably not the best way to do this, but at least the command for getting screen size is there.
You can then use
map.setZoom(map.getZoom()+1);
to set the zoom level and just try out what fits for which screen (there's probably a list somewhere online)
check out: How to set the Google Map zoom level to show all the markers? for some more hints.
But if you're not working on javascript then this is useless
Good luck though :)

- 1
- 1

- 360
- 1
- 3
- 11
-
I will be using JavaScript to display the maps on client-side and probably AJAX and/or JSON to display the data points on it (which is not the part of this question, actually). The solution you provide requires me to develop separate pages for just showing map. This is a solution but not what I am looking for. See, Google map is rendered inside a div (or probably some other block elements, too). In my webpage, maps would be displayed with other information on the webpage so I can't really use this option. What I'd want, is to set zoom level on initialization of map so it displays whole earth! – Basit Sep 05 '12 at 09:19
-
P.S: I had already done some research on this topic and had gone through the link you provided me. In the case of that person, they want to set zoom level to show all the data points while what I'm trying to achieve is kind of different. – Basit Sep 05 '12 at 09:24
map.fitBounds(viewport)
This method sets the viewport and the zoom level according to the given coordinates. You can build a viewport-Object (Type LatLngBounds) with the coordinates from 0 to 180. See the maps reference for more details. This solution works for my project.

- 8,393
- 5
- 38
- 42
-
See, but the difference is, if for some reason, say overlays/pins being too close, the map would have to zoom in which would cut off other parts of the world from the map. What I want to do, is to get screen resolution at the time of initialization of the map, and then set a specific zoom level in such a way that it displays the whole earth map without cutting off any part. I don't need to change the zoom level on run-time. – Basit Sep 05 '12 at 09:27