Update bounds based on zoom level for Google Maps API - Revised

Question

I am building a custom map and setting bounds to the edge of it, but when the zoom level is changed the bounds don't seem to adhere to those edges. I have tried the solutions from this question but they seem to have the same issue.

You can see the same issue with this fiddle from @koen http://jsfiddle.net/koenpunt/n7h6t/, just pan to an edge and then zoom in a few times, the map will start to be cut off at the edges.

Here is my code:

var map;
window.onload = function() {

    // Define our custom map type
    var customMapType = new google.maps.ImageMapType({
        getTileUrl: function(coord, zoom) {
            var normalizedCoord = getNormalizedCoord(coord, zoom);
            if(normalizedCoord && (normalizedCoord.x < Math.pow(2, zoom)) && (normalizedCoord.x > -1) && (normalizedCoord.y < Math.pow(2, zoom)) && (normalizedCoord.y > -1)) {
                return zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.jpg';
            } else {
                return 'empty.jpg';
            }
        },
        tileSize: new google.maps.Size(256, 256),
        maxZoom: 4,
        name: 'Title'
    });

    // Basic options for our map
    var myOptions = {
        center: new google.maps.LatLng(0, 0),
        zoom: 2,
        minZoom: 2,
        streetViewControl: false,
        mapTypeControl: false,
        mapTypeControlOptions: {
            mapTypeIds: ["custom"]
        }
    };

    // Init the map and hook our custom map type to it
    map = new google.maps.Map(document.getElementById('map'), myOptions);
    map.mapTypes.set('custom', customMapType);
    map.setMapTypeId('custom');


    // bounds of the desired area
    var allowedBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-75.716, -90),
      new google.maps.LatLng(75.716, 90)
    );
    var boundLimits = {
        maxLat : allowedBounds.getNorthEast().lat(),
        maxLng : allowedBounds.getNorthEast().lng(),
        minLat : allowedBounds.getSouthWest().lat(),
        minLng : allowedBounds.getSouthWest().lng()
    };

    var lastValidCenter = map.getCenter();
    var newLat, newLng;
    google.maps.event.addListener(map, 'center_changed', function() {
        center = map.getCenter();
        if (allowedBounds.contains(center)) {
            // still within valid bounds, so save the last valid position
            lastValidCenter = map.getCenter();
            return;
        }
        newLat = lastValidCenter.lat();
        newLng = lastValidCenter.lng();
        if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
            newLng = center.lng();
        }
        if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
            newLat = center.lat();
        }
        map.panTo(new google.maps.LatLng(newLat, newLng));
    });

    //alert(map.getCenter());
}
function getBoundsM(){
    alert(map.getBounds());
}

Edit: What I ended up doing was resizing the map smaller and added more background around the original map. This gave the impression that there was not a need to pan beyond the bounds of the searchable area. More of a 'smoke and mirrors' thing but it worked for my needs.

What do you mean by "when the zoom level is changed the bounds don't seem to adhere to those edges"? — geocodezip
– geocodezip, Commented Feb 18, 2014 at 22:02
@geocodezip What I mean is that when you initially set the LatLong bounds to limit panning up, down, left or right, once you increase the zoom of the map those bounds are no longer accurate and need to be reset, but not sure by how much or what that equation would be. Make sense? — whodeee
– whodeee, Commented Feb 18, 2014 at 22:06
I still don't follow. The bounds are real physical locations, you want to change that when the user zooms in? — geocodezip
– geocodezip, Commented Feb 18, 2014 at 22:09
Take a look at the jsfiddle I provided, notice how much water is visible around the map at the initial zoom level, then zoom the map and notice that the water gets cut off as you increase the zoom level - I am trying to prevent this and be able to keep the same bounding area. — whodeee
– whodeee, Commented Feb 18, 2014 at 22:10
when you say "increase the zoom level" do you mean zoom in (increasing zoom value) or zoom out (decreasing zoom value)? — geocodezip
– geocodezip, Commented Feb 18, 2014 at 22:20

Phillip · Accepted Answer · 2014-03-25 13:39:14Z

3

+50

Your script forces the map's center to stay within a lat/lon boundary. It depends on the zoom level how much of the map around the center you see. If for a given zoom level the map spans 1000 km in longitude, the eastern-most point you're able to see is allowedBounds.getNorthEast().lng() + 500 km. If you zoom in and the spanned region reduces to 500 km, the eastern-most point becomes allowedBounds.getNorthEast().lng() + 250 km and so forth.

You seem to want to limit what a user is able to see, i.e. the locations of the map's boundary instead of its center. For this, you'll have to check whether map.getBounds().getNorthEast() and map.getBounds().getSouthWest() are within the allowed bounds.

Here is an updated JsFiddle which does that. Note that you can still zoom out to an area which is larger than the allowedBounds, but won't be able to move on that zoom level anymore: http://jsfiddle.net/Ya7ju/2/

edited Mar 25, 2014 at 13:39

answered Mar 25, 2014 at 13:15

Phillip

13.7k33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

whodeee Over a year ago

wow, thanks for the clarification and easy fix/adjustment. I guess I was looking at it for too long to not see that solution - bounty awarded

vabada · Accepted Answer · 2016-11-08 14:40:16Z

2

Have you tried using fitBounds and panToBounds instead of forcing a maximum boundary?

var bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(41.93707, -88.00018));
bounds.extend(new google.maps.LatLng(38.67033, -89.98455));
bounds.extend(new google.maps.LatLng(41.68259, -87.64164));
bounds.extend(new google.maps.LatLng(41.75036, -87.66525));

setTimeout(function() {
    google.maps.event.trigger(map.GMap, 'resize');
    map.GMap.fitBounds(bounds);
    map.GMap.panToBounds(bounds);
}, 150);

You can view this in action on our web site. Note that we are also using marker clustering. www.Autoquoter.com Offices

edited Nov 8, 2016 at 14:40

vabada

1,8345 gold badges31 silver badges38 bronze badges

answered Mar 25, 2014 at 14:56

B2K

2,6211 gold badge24 silver badges35 bronze badges

Collectives™ on Stack Overflow

Update bounds based on zoom level for Google Maps API - Revised

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related