title: Google Maps API V3 - Custom Tiles
body: <p>I am currently working on Google Maps API V3 over <a href="http://apps.humannetworklabs.com/GoogleMapAPI.html" rel="noreferrer">here</a></p>
  
  <p>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.</p>
  
  <p>I have problems with the script; </p>
  
  <pre><code>    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
  </code></pre>
  
  <p><strong>First question</strong> How do you find the values of X and Y from the photoshop document?</p>
  
  <p>Let say if I manage to solve the first question.</p>
  
  <p><strong>Second question</strong> Is the below code correct to display the tiles depending on the zoom level? Or am I missing any codes?</p>
  
  <pre><code>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);
  </code></pre>