Google Maps API V3 - Custom Tiles

Question

I am currently working on Google Maps API V3 over here

If you zoom between 21 to 23, there will be an image overlay on the map. The image takes too long to load and I have decided to break it into different tiles for easier loading. I am using Automatic Tile Cutter to cut the image into tiles.

I have problems with the script;

    var OrgX = 31551;   // the Google Maps X value of the tile at the top left corner of your Photoshop document 
    var OrgY = 50899;   // the Google Maps Y value of the tile at the top left corner of your Photoshop document

First question How do you find the values of X and Y from the photoshop document?

Let say if I manage to solve the first question.

Second question Is the below code correct to display the tiles depending on the zoom level? Or am I missing any codes?

var BuildingsLayer = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
        return "http://search.missouristate.edu/map/tilesets/baselayer/" + zoom + "_" + coord.x + "_" + coord.y + ".png";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true
});

map.overlayMapTypes.push(BuildingsLayer);

silverbtf silverbtf · Accepted Answer · 2011-01-18T09:59:47

Instead of using Automatic Tile Cutter, I used and recommended MapTiler. Not only it slices the image into tiles and it also generates out a javascript tiles script to use it.

However, the script is written in v2. You can edit the codes according:

v3 tiles script

var maptiler = new google.maps.ImageMapType({ 
  getTileUrl: function(coord, zoom) { 
return zoom + "/" + coord.x + "/" + (Math.pow(2,zoom)-coord.y-1) + ".png"; 
}, 
  tileSize: new google.maps.Size(256, 256), 
  isPng: true 
}); 

var map; 

function initialize() { 
 map = new google.maps.Map(document.getElementById("map_canvas")); 
 map.setCenter(new google.maps.LatLng(36.07, -112.19)); 
 map.setZoom(11); 
 map.setMapTypeId('satellite'); 
 map.overlayMapTypes.insertAt(0, maptiler); 
}

Credits

Google Maps API V3 - Custom Tiles

1 Answers