Map center is never in the allowed bounds

Question

I have the following problem. I have google maps api v3 implemented on my site. And the problem is the following. The user can scroll top as much as he wants, meaning, he's getting out of the visible map area.

Example: http://woist.es/

If you pant to the far top you can pan far over greenland and have a grey area. Google maps itself doesn't allow this.

I saw this post here How do I limit panning in Google maps API V3?

and wanted to adjust it to my requirements. Like this

// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(85, -180),           // top left corner of map
    new google.maps.LatLng(-85, 180)
);
var lastValidCenter = map.getCenter();
// Add event listener to remove highlighted POI images
google.maps.event.addListener(map, 'center_changed', function() {
    if (allowedBounds.contains(map.getCenter())) {
        console.log('valid');
        // still within valid bounds, so save the last valid position
        lastValidCenter = map.getCenter();
    } else {
        console.log(map.getCenter());
        console.log('not valid');
        // not valid anymore => return to last valid position
        map.panTo(lastValidCenter);
    }
});

However, I always come into the else case. This is an example result of the console.log(map.getCenter());

{
    B: 5.00233685
    k: 23.3818240
}

How can I limit this correctly?

Yeah, that's correct. The user should be able to see the whole world, but no further. If you see the example I posted you can pan out of the map into a grey area. I want to forbid this — Musterknabe, Apr 30 '15 at 09:40

Musterknabe · Answer 1 · 2015-04-30T14:54:12.857

0

Ok, I fixed it now. Seems like I had the numbers mixed up.

Instead of

new google.maps.LatLng(85, -180),          
new google.maps.LatLng(-85, 180)

it should be

new google.maps.LatLng(-85, -180),           
new google.maps.LatLng(85, 180)

But the problem I was having now, is that I could still see much grey area. So I adjusted the values to

new google.maps.LatLng(-73, -180),
new google.maps.LatLng(73, 180)

edited Apr 30 '15 at 14:54

answered Apr 30 '15 at 14:34

Musterknabe

5,763
14
61
117

A [google.maps.LatLngBounds object](https://developers.google.com/maps/documentation/javascript/reference#LatLngBounds) is: `LatLngBounds(sw?:LatLng, ne?:LatLng)`. The southwest corner (the first argument) should be the lower left corner of the map, the northeast corner (the second argument) should be the upper right corner of the map. Your comment is incorrect. – geocodezip Apr 30 '15 at 14:53
Ye, the comment is just copy & pasted, not edited :p. I'll edit it out. Thanks – Musterknabe Apr 30 '15 at 14:54
basically all these center-based solutions are not sufficient, they may not prevent the map from being panned outside of the specified bounds. You'll have to check center **and** northEast+southWest of the current bounds, only when all 3 values are within the specified bounds, it will always work as expected. – Dr.Molle Apr 30 '15 at 18:49

Map center is never in the allowed bounds

1 Answers1