I'm trying to create a page using an custom map type image map as a background. I needed to restrict the panning on the image, so that it's not possible to pan past the image, but when panning the map left / right (along the x / longitude axis), the map disappears and I'm getting a maximum stack size exceeded (Chrome) or too much recursion (Firefox) error.

It turns out I'm not the only one having this issue, but in most of the cases, people had trouble with the decimal signs in the coordinates (, instead of .), but that is not my case since I don't use decimals.

I think this might be my case, but not sure how to go about the undefined latitude. (Mostly because I am quite new to JavaScript in general.)

This is all the code I'm using for the map:

    function init() {

    var map;

    var repeatOnAxisX = false;

    var blankTile = img/map/empty.png;

    var min_zoom = 4,

        max_zoom = 5;



    function getNormalizedCoord(coord, zoom) {

        if(!repeatOnAxisX) return coord;

        var totalTiles = 1 << (zoom - min_zoom),

            y = coord.y,

            x = coord.x;

        var originX = 1 << (zoom - 1),

            originY = 1 << (zoom - 1);

        if(y < originX || y >= originX + totalTiles || x < originX || x >= originX + totalTiles) {

            return null;

        }

        x -= originX;

        y -= originY;

        return {

            x : x,

            y : y

        };

    }



    var customMapType = new google.maps.ImageMapType({

        getTileUrl: function(coord, zoom) {

            var normalizedCoord = getNormalizedCoord(coord, zoom);

            if(normalizedCoord) {

                return img/map/ + zoom + / + normalizedCoord.x + / + normalizedCoord.y + .png;

            } else {

                return blankTile;

            }

        },

        tileSize: new google.maps.Size(256, 256),

        maxZoom: max_zoom,

        minZoom: min_zoom,

        name: My Image Map

    });



    var mapDiv = document.getElementById(map-canvas),

        myCenter = new google.maps.LatLng(-1, -1),

        myOptions = {

            zoom: 5,

            center: myCenter,

            streetViewControl: false,

            mapTypeControl: false,

            mapTypeControlOptions: {

                mapTypeIds: [custom]

            }

        };



    map = new google.maps.Map(mapDiv, myOptions);

    map.mapTypes.set(custom, customMapType);

    map.setMapTypeId(custom);



    // Setting up the panning restriction

    var allowedBounds = new google.maps.LatLngBounds(

        new google.maps.LatLng(-67, -74),

        new google.maps.LatLng(67, 74)

    );



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

    });

}



google.maps.event.addDomListener(window, load, init);

(I'm using this solution to restrict the panning.)

EDIT: Here is a JSFiddle of the problem.

Any ideas / help is really appreciated! Than you!