Question

I am trying to get Google maps to display an image I can use to zoom. I have used this tutorial for most of the work but I am running into two problems.

1. The image I am trying to display naturally is 256×193. The image gets stretched to fit 256×256. How can I let google maps know to only display the image at 256×193.

2. I am trying to bound the box so that the image is always in view and never the background. I am close but I was hopping for a better solution. The one I am using only bounds the center. I can still partially see the map background if I pan.

   var allowedBounds = null;
   var lastValidCenter = null;
   
   google.maps.event.addListenerOnce(map, 'idle', function(){
       allowedBounds = map.getBounds();
       lastValidCenter = map.getCenter();
   });    
   
   google.maps.event.addListener(map, 'center_changed', function() {
       if (allowedBounds.contains(map.getCenter())) {
       lastValidCenter = map.getCenter();
           return; 
       }
   
       map.panTo(lastValidCenter);
   });
   

PS. I am using Google because I kind of have a crush on them for all things. If there is a better more standard solution that lets me zoom with multiple image levels please let me know.

UPDATE: I got the random image size working! The code bellow modifies what the above tutorial started

    Demo.ImgMapType.prototype.imageSize= new google.maps.Size(256, 193);
    Demo.ImgMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
        var tilesCount = Math.pow(2, zoom);
        var maxWidth = this.imageSize.width * tilesCount;
        var maxHeight = this.imageSize.height * tilesCount;
        var width = this.tileSize.width;
        var height = this.tileSize.height;
        var maxX = width * (1 + coord.x);
        var maxY = height * (1 + coord.y);
        if (maxX > maxWidth){
            width = width - (maxX - maxWidth);
        }
        if (maxY > maxHeight){
            height = height - (maxY - maxHeight);
        }

        var div = ownerDocument.createElement('div');
        div.style.width = this.tileSize.width + 'px';
        div.style.height = this.tileSize.height + 'px';
        div.style.backgroundColor = this._backgroundColor;

        if (width <= 0 || coord.x < 0 || height <= 0 || coord.y < 0) {
            return div;    
        }

        var img = ownerDocument.createElement('IMG');
        img.width = width;
        img.height = height;
        img.src = Demo.Utils.GetImageUrl(this._theme + '_' + zoom + '_' + coord.x + '_' + coord.y + '.jpg');
        // Add the image to the div so that we hide the map background
        div.appendChild(img);
        return div;
    };

Answer 1

I got the random image size working! The code bellow modifies what the tutorial I mentioned started

    Demo.ImgMapType.prototype.imageSize= new google.maps.Size(256, 193);
    Demo.ImgMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
        var tilesCount = Math.pow(2, zoom);
        var maxWidth = this.imageSize.width * tilesCount;
        var maxHeight = this.imageSize.height * tilesCount;
        var width = this.tileSize.width;
        var height = this.tileSize.height;
        var maxX = width * (1 + coord.x);
        var maxY = height * (1 + coord.y);
        if (maxX > maxWidth){
            width = width - (maxX - maxWidth);
        }
        if (maxY > maxHeight){
            height = height - (maxY - maxHeight);
        }

        var div = ownerDocument.createElement('div');
        div.style.width = this.tileSize.width + 'px';
        div.style.height = this.tileSize.height + 'px';
        div.style.backgroundColor = this._backgroundColor;

        if (width <= 0 || coord.x < 0 || height <= 0 || coord.y < 0) {
            return div;    
        }

        var img = ownerDocument.createElement('IMG');
        img.width = width;
        img.height = height;
        img.src = Demo.Utils.GetImageUrl(this._theme + '_' + zoom + '_' + coord.x + '_' + coord.y + '.jpg');
        // Add the image to the div so that we hide the map background
        div.appendChild(img);
        return div;
    };