Scale-Level Update Boundaries for the Google Maps API - Revised

I create a custom map and set the borders of its edge, but when the zoom level changes, the borders do not seem to be attached to these edges. I tried the solutions from this question , but they seem to have the same problem.

You can see the same problem with this script from @koen http://jsfiddle.net/koenpunt/n7h6t/ , just move to the edge, and then zoom in a few times, the map will begin to cut along 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());
}

. . , . " ", .

+3
2

script lat/lon. , . 1000 , , , allowedBounds.getNorthEast().lng() + 500 km. , 500 , allowedBounds.getNorthEast().lng() + 250 km ..

, , , .. . , map.getBounds().getNorthEast() map.getBounds().getSouthWest() .

JsFiddle, . , , allowedBounds, : http://jsfiddle.net/Ya7ju/2/

+3

fitBounds panToBounds , ?

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);

-. , . www.Autoquoter.com

+2

All Articles