Set fixed area, but issues when zooming in (Google Maps API)

Question

I have the following JSFiddle (originally from this thread: Google Maps v3 - limit viewable area and zoom level) which presents the user with a fixed area of Google Maps: http://jsfiddle.net/9f3f82vw/4/

 // This is the minimum zoom level that we'll allow
 var minZoomLevel = 14;

 var map = new google.maps.Map(document.getElementById('map'), {
     zoom: minZoomLevel,
     center: new google.maps.LatLng(53.2170249, 6.5656727),
     mapTypeId: google.maps.MapTypeId.ROADMAP
 });

var marker = new google.maps.Marker({
    position: {lat: 53.218573, lng: 6.567293},
    map: map,
    title: '???'
});

 // Bounds for Groningen
 var strictBounds = new google.maps.LatLngBounds(
 new google.maps.LatLng(53.2124505, 6.5558022), //Southwest
 new google.maps.LatLng(53.2212904, 6.5760153)); //Northeast

 // Listen for the dragend event
 google.maps.event.addListener(map, 'bounds_changed', function () {
     if (strictBounds.contains(map.getCenter())) return;

     // We're out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
 });

 // Limit the zoom level
 google.maps.event.addListener(map, 'zoom_changed', function () {
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
 });

The problem with this solution is that once you zoom in, you can't get near the areas close to the bounds. So, if you go to the south of the map with the original zoom (14) and you zoom in, you'll notice that you'll not be able to go completely south.

In other words, you can't zoom in on the border.

EDIT: I've dropped the whole border thing and implemented a fog layer to let the user know that there's an area that he can't access. I did this with the help of http://maps.vasile.ch/geomask/

Thnx!

I'm trying to understand what you are asking, but I cannot. However, if what you want is to keep the center in the same place when the user zooms in or out, that's a bad idea: the whole point of seeing a map is to be able to look around a place, and browse the map to see what is nearby or how to get there. Blocking this functionality isn't a good idea. — JotaBe, Oct 16 '15 at 08:10
Well, the idea of what I'm making is to restrict the user's ability to view the whole world (whether that's a good idea or not is another discussion). Point is: when you look at the map and you zoom completely in, you can't go to, for example, the Groningen Station (or further south). — Bas, Oct 16 '15 at 08:28
So, If I understand it right, what you want is to keep the map centered in the same point, whichever the zoom level is. Right? — JotaBe, Oct 16 '15 at 09:17
Exactly. Even when zoomed in completely, you should still be able to move to the places that were shown on the original zoom level. — Bas, Oct 16 '15 at 09:25
Then it's not exactly what I said ;) What you want is that, when the user zooms in, he can move the map without leaving the original area that was shown in the original zoom level. Please, edit your question, and explain it correctly. It's impossible to understand it as it's currently worded. — JotaBe, Oct 16 '15 at 09:35
Sorry, but now I'm not following you anymore. My question is that I'm not understanding the behaviour it's showing right now, which could be related to the center point. When zooming in, it either does something with the bounds or the center point. For some reason I'm not able to move to the far edges, but these bounds are related to my center point. Talking about points, this discussion is getting rather pointless — Bas, Oct 16 '15 at 10:11

score 2 · Accepted Answer · answered Oct 16 '15 at 10:01

If you want the user to be able to move the map, and keep him inside the original bounds, strictBounds in your code, you simply have to handle the events that can get the user out of bounds, i.e. dragging and zooming. And, then call map.panToBounds(strictBounds). This will ensure that the map makes the minimum panning required to keep the viewport inside the bounds (or viceversa, depending on the zoom level).

If you don't want to use the strictBounds, but the bounds in the original zoom level, you simply have to get and store that bounds in a variable, and use them with map.panToBounds. To get them use map.getBounds(). Those bounds will be available after settign the center and zoom level.

I've droppped the whole border thing after your comment that it's a bad idea to restrict the map. I've now solved this by adding "fog" for area's the user shouldn't look at. I'll accept your answer as it lead to a change of mind, thnx. — Bas, Oct 21 '15 at 09:02

Set fixed area, but issues when zooming in (Google Maps API)

1 Answers1