Get non-wrapping map bounds in Google Maps API V3

Question

If you zoom a google map out the world will start to repeat horizontally. Using .getBounds() seems to return the longitude at the edges of the displayed map image. But I would like to get minimum and maximum longitudes for the current view of the real world.

For example in this image .getBounds() says that the longitude ranges between 116 and 37 degrees (giving a width of -79 degrees!). The range I'm looking for is -244 to +37. (or even -180 to +37 as this is the extremes of the world that is viewable around the map centre.)

And another example. Here I'm looking for -180 to +180 ...

You can try it for yourself here... http://jsfiddle.net/spiderplant0/EBNYT/

(Apologies if this has been answered before - I did find some old similar questions but none seemed to have satisfactory answers).

Answer 1

I ran into the same issues today, but I think I finally figured it out.

In the first scenario above, you can use map.getBounds().toSpan() to get the width in longitude.....as long as the map did not wrap around.

For the second scenario where the map wraps around, I extended the google.maps.OverlayView() to get the google.maps.MapCanvasProjection object. From there you can call the function getWorldWidth().

It will give you the world width in pixel, then you can compare it with your map container's width. If your container is bigger, your map has wrapped around.

Don't know if the function is meant for this but it works.

Answer 2

The answer proposed by user1292293 worked for me (Google map api V3)

Extension of google.maps.OverlayView()

function MyMapOverlay() {}
MyMapOverlay.prototype = new google.maps.OverlayView();
MyMapOverlay.prototype.onAdd = function() {};
MyMapOverlay.prototype.draw = function() {};
MyMapOverlay.prototype.onRemove = function() {};

Add overlay to the map

var map = new google.maps.Map(domContainer, {...});
var overlay = new MyMapOverlay();
overlay.setMap(map);

check if map wraps around:

var proj = overlay.getProjection();
var wwidth = 0;
if (proj) wwidth = proj.getWorldWidth();
var mapsWrapsAround=false;
if (__wwidth > 0 && __wwidth < domContainer.width()) mapsWrapsAround = true;

Answer 3

I used the answer from rebpp to prevent the map from wrapping by setting the getWorldWidth. Here's the MapWrappingPrevent I created.

To use this just call

 var wrapPreventer = new MapWrappingPrevent(_map);

---

        /* This class prevents wrapping of a map by adjusting the max-width */
        function MapWrappingPrevent(map) {
            var self = this;
            this.setMap(map);
            map.addListener('zoom_changed', function () {
                self.onZoomChanged();
            });
        }
        MapWrappingPrevent.prototype = new google.maps.OverlayView();
        MapWrappingPrevent.prototype.onAdd = function () { this.onZoomChanged(); };
        MapWrappingPrevent.prototype.draw = function () { };
        MapWrappingPrevent.prototype.onRemove = function () { };
        MapWrappingPrevent.prototype.onZoomChanged = function () {
            var proj = this.getProjection();
            if (proj) {
                var wrappingWidth = proj.getWorldWidth();
                $(this.getMap().getDiv()).css({'max-width': wrappingWidth + 'px'})
            }
        };