Google map v3 to display a zoomable image

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.

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

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

I suggest making your image 256x256 with an empty area filling the space at the top and bottom (or just the bottom). That will stop it being stretched, and you can the use the bounds to limit what's shown. — Andrew Leach, Jul 30 '12 at 15:23
Users will be uploading images so I don't want to put that constrain on them — Peter, Jul 30 '12 at 15:44
Unfortunately it's an API constraint. The tiles are 256px square. — Andrew Leach, Jul 30 '12 at 15:49
Yes, it has to be square, unless you code another map projection: https://developers.google.com/maps/documentation/javascript/maptypes#WorldCoordinates — Mike Gleason jr Couturier, Jul 30 '12 at 15:52

score 0 · Answer 1 · edited May 23 '17 at 10:24

0

Depending on the platform and language you could have the script processing the upload analyze the image and pad it accordingly. That wouldn't be hard.

Not sure how to handle it otherwise.

As far as bounding: How do I limit panning in Google maps API V3?

edited May 23 '17 at 10:24

Community

1
1

answered Jul 30 '12 at 15:48

Remog

163
1
8

I used that code for the base of the code I posted above in the op. It limits it but I am still able to scroll off the image by half the image (and see the bg). I would like something to limit my center so that I never see the background of the map even after I zoom. – Peter Jul 30 '12 at 15:52

score 0 · Accepted Answer · answered Aug 08 '12 at 21:20

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

Google map v3 to display a zoomable image

2 Answers2