Restricting panning to one globe in Google Maps API

Question

I have a map created using the Google Maps API, and I'd like to restrict panning to one globe; by default you can pan continuously east/west, the map repeats endlessly. I'm trying to use henningj's solution posted to this question

var allowedBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(85, -180),
    new google.maps.LatLng(-85, 180)
);
lastValidCenter = map.getCenter();

google.maps.event.addListener(map, "center_changed", function() {
    if (allowedBounds.contains(map.getCenter())) {
        lastValidCenter = map.getCenter();
        return; 
    }

    map.panTo(lastValidCenter);
});

What I have currently allows no panning whatsoever, the call to 'contains' always fails. If I log map.getCenter() it all looks sensible enough, I think(?!):

Object { A: 54.683366, F: 25.31663500000002 }

Can anyone see what I'm doing wrong?

Answer 1

You have your allowedBounds defined incorrectly. It should be (from the documentation):

LatLngBounds(sw?:LatLng, ne?:LatLng) Constructs a rectangle from the points at its south-west and north-east corners.

This:

var allowedBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(85, -180),
    new google.maps.LatLng(-85, 180)
);

Should be:

var allowedBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-85, -180),  //sw
    new google.maps.LatLng(85, 180)     //ne
); 

(negative longitudes are west of positive ones, negative latitudes are south of positive ones)

proof of concept fiddle

Answer 2

You can setting a proper Zoom Level and resticting the min e max zoom level

      var mapOptions = {
        center: new google.maps.LatLng(50.431487, 30.539285),
        zoom: 2,
        minZoom: 2,
        maxZomm:19,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }