Question

I’ve got a little problem here.

What i want to do.

On my server i have a table with markers that have lat, lng, tile fields in it.
There are a lot of markers in table so i request them by tiles that are visible to the user.
To make it working as it should is my final goal.

Problem

I wanted to solve this by creating my own mapType and define method getTile() that will be responsible for requesting appropriate tiles from server using x/y/z notation where x,y are the coordinates of tile and z is the zoom level. More about this you can find here. There is my code(i’m using jquery-ui-map plugin here):

function ServerFetchMapType() {

      this.tileSize = new google.maps.Size(256,256);
      this.maxZoom = 15;
      this.name = "Server Tile #s";
      this.alt  = "Server Data Tile Map Type";

      this.getTile = function(coord, zoom, ownerDocument){

        //Data for request
        var x = coord.x;
        var y = coord.y;
        var z = zoom;

        //Here i will make an ajax request for markers in this tile

        //Visualization
        var div = ownerDocument.createElement('DIV');
        div.innerHTML = 'X:' + coord.x + ' Y:' +  coord.y + ' Z:' +  zoom;
        div.style.width = this.tileSize.width + 'px';
        div.style.height = this.tileSize.height + 'px';
        div.style.fontSize = '10';
        div.style.borderStyle = 'solid';
        div.style.borderWidth = '1px';
        div.style.borderColor = '#AAAAAA';
        return div;

      };

    }

    var test = new ServerFetchMapType();

    $('#map_canvas').gmap();
    $('#map_canvas').gmap('get', 'map').overlayMapTypes.insertAt(0, test);

Everything worked but then i found one drawback, i will illustrate it:

As you can see only 4 tiles in the center of the picture have the right x/y/z notation and therefore all the tiles that are descendants of this tiles. But i won’t be able to use other tiles to fetch data from server.

Question

So what can i do to change coordinates of other tiles where the map is just repeating to have the same coordinates as main tiles? Or you can offer other way to solve this.
Any help will be appreciated.

Answer 1

One very good man helped me to solve this problem this way:

     function ServerFetchMapType() {

      this.tileSize = new google.maps.Size(256,256);
      this.maxZoom = 15;
      this.name = "Server Tile #s";
      this.alt  = "Server Data Tile Map Type";

      this.getTile = function(coord, zoom, ownerDocument){

        var dim = Math.pow(2, zoom);

        //Data for request
        var x = Math.abs( coord.x ) % dim;
        var y = Math.abs( coord.y ) % dim;
        var z = zoom;



        //Visualization D
        var div = ownerDocument.createElement('DIV');        
        div.innerHTML = 'X:' + Math.abs( coord.x ) % dim  + ' Y:' +  Math.abs( coord.y ) % dim + ' Z:' +  zoom;

        div.style.width = this.tileSize.width + 'px';
        div.style.height = this.tileSize.height + 'px';
        div.style.fontSize = '10';
        div.style.borderStyle = 'solid';
        div.style.borderWidth = '1px';
        div.style.borderColor = '#AAAAA9';
        return div;

      };

    }