Get unlimited map borders in the Google V3 Maps API

If you change the google map, the world will start repeating horizontally. Using .getBounds () seems to return the longitude along the edges of the displayed map image. But I would like to get the minimum and maximum longitudes for the current view of the real world.

For example, in this image, .getBounds () says that longitude ranges between 116 and 37 degrees (with a width of -79 degrees!). The range I'm looking for is from -244 to +37. (or even -180 to +37, because these are the extremes of the world that can be seen around the center of the map.)

google-map-bounds1

And one more example. Here I am looking from -180 to +180 ... google-map-bounds2

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

(, - , ).

+5
3

, , , , , .

map.getBounds(). toSpan(), ..... .

, , google.maps.OverlayView(), google.maps.MapCanvasProjection. getWorldWidth().

, . , .

, , .

+2

, 1292293, ( Google api V3)

google.maps.OverlayView()

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

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

, :

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

I used a response from rebpp to prevent map wrapping by setting getWorldWidth. This is where MapWrappingPrevent is created.

To use this 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'})
            }
        };
0
source

All Articles