Step 1. Load data into map

Lets request server for tiles in visible viewport


$.get("ajax/load-map-data?SE="+MySECorner.toString()+"&NE="+MyNECorner.toString()+"&zoom"+currentZoom,
      function(data){
        //wow! i got the data for map!
        //forwhole visible viewport( and just for it)
      });


Step 2. Kill users, server and youself

Just answer two single things

• will you rerequest data if maps is moved by pixel
• can you cache request

If first answer is "no" and sencond is "no" - close this page. You allready find nirvana :)
And if you still here - you load your data in wrong way, yet. Until now.

Step 3. How google loads image for tiles?

He(it?) loads it in.. tiles :)

Step 4. Think! Why not to do same?

If you load you marker data in set of tiles -

• you can Perfectly cache them
• Map shift below 256px will not preduce any requests to server
• Normal browser can perform 4-6 request to one server at one moment, so you`ll ask tiles in parrallel, 4-6 times faster

Define your own tile source, not for image tiles, but for data tiles



var ServerFetchedTiles=[];

function ServerFetchMapType() {
}

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

ServerFetchMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var addr=this.getAddr(coord,zoom);
  //test - may be we allready load this block?
  if(ServerFetchedTiles[addr]){
    return
  }
  $.get("ajax/load-map-tile?"+addr,
      function(data){
        ServerFetchedTiles[addr]=data;
        //wow! i got the data just for this tile
        //and any map moving is nothing for me!
      });
};

//and add this tile overlay to current map type
map.overlayMapTypes.insertAt(0, new ServerFetchMapType() );



And you can request tiles by two ways - as google do (x,y,z), or as latlngbox. I write some code for second variant( i think you`ll use second at the begining)


//we can request tile as tile(x,y,z)
ServerFetchMapType.prototype.getAddrXY = function(coord, zoom){
   return "x="+coord.x+"&y="+coor.y+"&z="+zoom;
}

//or as latlng box
ServerFetchMapType.prototype.getAddrLatLng = function(coord, zoom){
    
    //helper function for mercator projection
   var mercator = function(point){
     //
     var numtiles=Math.pow(2,point.zoom);
     var bitmapsize=numtiles*256;
     var bitmaporigo       =bitmapsize/2;
     var pixelsperlondegree=bitmapsize/360;
     var pixelsperlonradian=bitmapsize/(2*Math.PI);
     
     var lat=bitmaporigo+(pixelsperlondegree*point.x);
     var ged2rad=((point.t*Math.PI)/180.0);
     var sn=Math.sin(deg2rad);
     var lng=((bitmaporigo - 0.5 * log((1+sn)/(1-sn)) * pixelsperlonradian));
     return new google.maps.LatLng(lat,lng);
   }
   var point1={x:coord.x*256,y:coord.y*256,z:zoom} ;
   var point2={x:(coord.x+1)*256,y:(coord.y+1)*256,z:zoom} ;
   var ne=mercator(point1);
   var sw=mercator(point2);
   return "NE="+ne.toString()+"&SW="+sw.toString()+"&z="+zoom;
}


more info about map tiles can be found at google code, and there they point this idea somehow. Idea - you can load not only images

Step 5. Enjoy

Now try to impliment pieces of this into your own code. Or see how it works on

• Wikimapia
• eSosedi.ru
• GdeEtotDom.ru

What lasts?

Ask one questing - what you will do is there is no data for tile( you are viewing siberia ), may be just load tile for other zoom( currrent_zoom-2? ). And how we do it.

All of sections, i list here, is allready done by me. I need just to wrap code into article, and, yap, english article :)
If you want to know more - ask