How to make a google map not to leave world bounds?

Question

I wonder how to make a google map not to leave world bounds, like on google maps site itself. I am using javascript google map api v3, here is my map options:

mapOptions = {
  center: new google.maps.LatLng(20, 0),
  zoom: 3,
  minZoom: 3,
  zoomControl: true,

I've restricted map zoom, but user still can drag out of world bounds and even select region there.

Snapshot

How can I prevent this behavior?

You could check the map bounds while dragging, and set the center back to the last acceptable value when the bounds fall off your criteria. — MrUpsidown, Apr 14 '15 at 12:43
Have a look at [this answer](http://stackoverflow.com/a/27115480/1238965) btw. — MrUpsidown, Apr 14 '15 at 12:45

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

You have to make a general check using some conditional statement like if...else and comparing if the current Lat/Lng is falling out of a specified boundary (which is a world bound in your case).

I would recommend you to look at this SO question that may provide you some leads of how to proceed.

edited May 23 '17 at 11:59

Community

1
1

answered Apr 14 '15 at 23:37

AniV

3,997
1
12
17

Please see http://stackoverflow.com/a/23609552/2305243 for Google Map v3 API, it helped me. – Alan Dong Mar 15 '16 at 23:12

score 0 · Answer 2 · answered Jun 15 '18 at 13:53

0

Found a nice solution I'd like to share:

if (!allowedBounds.intersects(map.getBounds())) {
        map.panToBounds(allowedBounds);
     }

it will return to the initial set bounds (minimum way) when the whole screen left the bounds.

answered Jun 15 '18 at 13:53

Wolfgang Teves

31
3

How to make a google map not to leave world bounds?

2 Answers2